Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 706 / 58 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Самостоятельная работа 7:

Web Matrix. Работа с изображениями. Добавление функции поиск

Аннотация: Добавление изображений на веб - страницу, изменение размеров, расположения, реализации функций загрузки изображений. Добавление функций "Search Site" и "Search Web".

Динамическое добавление изображений на веб – страниц

1.Cоздадим в WebMatrix новый сайт на основе шаблона EmtySite ( Пустой сайт ):

2.Перейдем в рабочее пространство "Файлы". Добавим новую страницу в проект и назовем ее DynamicImage.cshtml:

3.Создадим, папку в проекте и назовем ее "image":


Рис. 12.3.

4.Добавим в папку "image", четыре изображения и переименуем в image1.jpg, image2.jpg, image3.jpg, image4.jpg:


Рис. 12.4.

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". В браузере отобразиться выбранное изображение:


Рис. 12.5.