Web Matrix. Работа с изображениями. Добавление функции поиск
Динамическое добавление изображений на веб – страниц
1.Cоздадим в WebMatrix новый сайт на основе шаблона EmtySite ( Пустой сайт ):
2.Перейдем в рабочее пространство "Файлы". Добавим новую страницу в проект и назовем ее DynamicImage.cshtml:
3.Создадим, папку в проекте и назовем ее "image":
4.Добавим в папку "image", четыре изображения и переименуем в image1.jpg, image2.jpg, image3.jpg, image4.jpg:
5.Изменим начальный код страницы DynamicImage.cshtml на:
@{
var imagePath= "";
if( Request["imageChoice"] != null)
{
imagePath = @"image\" + Request["imageChoice"];
}
}
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<form method="post" action="">
<div>
I want to see:
<select name="imageChoice">
<option value="image1.jpg">Image 1</option>
<option value="image2.jpg">Image 2</option>
<option value="image3.jpg">Image 3</option>
<option value="image4.jpg">Image 4</option>
</select>
<input type="submit" value="Submit" />
</div>
<div style="padding:10px;">
@if(imagePath != "")
{
<img src="@imagePath" alt="Sample Image" width="300px" />
}
</div>
</form>
</body></html>В теге <body></body> расположен элемент управления - выпадающий список ( drop-down list ) c именем imageChoice. Список содержит четыре значения ( option ) с атрибутом value, которому присваиваются имена файлов и их расширение (в нашем случае .jpg ):
<select name="imageChoice">
<option value="image1.jpg">Image 1</option>
<option value="image2.jpg">Image 2</option>
<option value="image3.jpg">Image 3</option>
<option value="image4.jpg">Image 4</option>
</select>При выборе из выпадающего списка, нужного значения (в нашем случае картинки), и нажатии кнопки Submit, в код из объекта Request["imageChoice", передается значение атрибута (выпадающего списка) value. С помощью переменной imagePath формируется путь к файлу (в нашем случае переменная будет содержать значение image/image1.jpg ):
@{
var imagePath= "";
if( Request["imageChoice"] != null)
{
imagePath = @"image\" + Request["imageChoice"];
}
}Значение переменной imagePath передается HTML элементу < img></img>:
<img src="@imagePath" alt="Sample Image" width="300px" />
Запустим приложение, выберем из списка "image 1" и нажмем кнопку "Submit". В браузере отобразиться выбранное изображение:
