1.Cоздадим в WebMatrix новый сайт на основе шаблона EmtySite ( Пустой сайт ):
(рис 12.1) 2.Перейдем в рабочее пространство "Файлы". Добавим новую страницу в проект и назовем ее DynamicImage.cshtml:
(рис 12.2) 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) 1.Добавим к проекту новую страницу и назовем ее UploadImage.cshtml:
(рис 12.6) 2.Изменим начальный код страницы UploadImage.cshtml на:
@{ WebImage img = null;
var newFileName = "";
var imagePath = "";
if(IsPost){
img = WebImage.GetImageFromRequest();
if(img != null){
newFileName = Path.GetFileName(img.FileName);
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> Upload Image </legend>
<label for="Image">Image</label>
<input type="file" name="Image" />
<br/>
<input type="submit" value="Upload" />
</fieldset>
</form>
<h1>Uploaded Image</h1>
@if(imagePath != ""){
<div class="result">
<img src="@imagePath" alt="image" />
</div>
}
</body>
</html>
В теге <body></body> используется HTML элемент управления для загрузки файлов:
<input type="file" name="Image" />
(рис 12.7) Что бы получить загруженное изображение используется класс WebImage, который содержит различные методы для работы с изображением. В частности метод WebImage.GetImageFromRequest получает загруженное изображение и присваивает переменной img:
img = WebImage.GetImageFromRequest();
Свойство FileName возвращает имя файла, включая путь до этого файла:
C:\Users\Public\Pictures\Sample Pictures\image5.jpg
Метод Path.GetFileName, возвращает имя файла и расширение указанной строки пути:
newFileName = Path.GetFileName(img.FileName);
Для сохранения изображения в папку используется метод Save, класса WebImage:
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
Символы @"~\" указывают на текущее расположение проекта.
3.Запустим проект, выберем какое-нибудь изображение, и нажмем кнопку "Submit". Загруженное изображение отобразиться в окне браузера:
(рис 12.8) Проверим, загрузилось ли изображение в папку проекта - "image". Для этого правой кнопкой мыши, щелкнем на папке "image" выберем "обновить":
(рис 12.9) Загруженное изображение отобразиться в списке:
(рис 12.10) 1.Добавим к проекту новую страницу и назовем ее Thumbnail.cshtml
(рис 12.11) 2.В папке image, создадим папку в которую будут помещаться уменьшенные версии изображений thumbs:
(рис 12.12) 3.Изменим начальный код страницы Thumbnail.cshtml на:
@{ WebImage img = null;
var newFileName = "";
var imagePath = "";
var imageThumbPath = "";
if(IsPost)
{
img = WebImage.GetImageFromRequest();
if(img != null)
{
newFileName = Path.GetFileName(img.FileName);
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
imageThumbPath = @"image\thumbs\" + newFileName;
img.Resize(width: 60, height: 60);
img.Save(@"~\" + imageThumbPath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> Creating Thumbnail Image </legend>
<label for="Image">Image</label>
<input type="file" name="Image" />
<br/>
<input type="submit" value="Submit" />
</fieldset>
</form>
@if(imagePath != "")
{
<img src="@imageThumbPath" alt="Thumbnail image" />
<a href="@imagePath" target="_Self">
View full size
</a>
}
</body>
</html>
Данный код похож на код из пункта "Загрузка изображений на сервер", отличается только тем, что изображение загружается дважды. В папку image помещается обычного размера изображение, в папку thumbs с помощью метода Resize, уменьшенная копия изображения (в нашем примере изображение размера 60x60 пикселей):
imageThumbPath = @"image\thumbs\" + newFileName; img.Resize(width: 60, height: 60); img.Save(@"~\" + imageThumbPath);
Отобразим уменьшенную версию изображения на страницу и разместим ссылку на изображение оригинального размера:
<img src="@imageThumbPath" alt="Thumbnail image" />
<a href="@imagePath" target="_Self">
View full size
</a>
4.Запустим проект, выберем какое-нибудь изображение, и нажмем кнопку "Submit". Загруженное изображение в уменьшенном виде отобразиться в окне браузера:
(рис 12.13) Кликнем на ссылку "View full size". Браузер откроет новое окно с изображением исходного размера:
(рис 12.14) 1.Добавим к проекту новую страницу и назовем ее Flip.cshtml:
(рис 12.15) 2.Изменим начальный код страницы Flip.cshtml на:
@{ var imagePath= "";
WebImage img = new WebImage(@"~\image\image5.jpg");
if(img != null)
{
imagePath = @"image\image5.jpg";
img.FlipVertical();
img.Save(@"~\" + imagePath);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Get Image From File</title>
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != "")
{
<img src="@imagePath" alt="Image" />
}
</body>
</html>
В данном фрагменте кода используется метод класса WebImage - FlipVertical (так же для манипуляции с изображением можно использовать методы: RotateLeft и RotateRight для вращения по часовой против часовой. И метод аналогичный методу FlipVertical- FlipHorizontal который отображает зеркально изображение).
3.Запустим проект, в браузере отобразиться:
(рис 12.16) При обновлении страницы, метод FlipVertical выполниться повторно и вернет изображение в исходное состояние:
(рис 12.17) В данной части практического занятия будет рассмотрено, размещение на сайте специального плагина-поисковика. (данный плагин работает только с поисковой системой http://www.bing.com):
(рис 12.18) 1.Для того что бы плагин работал необходимо предварительно подключить специальную библиотеку ASP.NET Web Helpers Library.Для этого перейдем в рабочее пространство ( workspace ) "Сайт" и выберем "Администрирование веб-страниц ASP.NET":
(рис 12.19) 2.Откроется окно браузера, где необходимо ввести пароль (для каждого нового проекта эта операция будет проводиться повторно):
(рис 12.20) После ввода пароля в браузере отобразиться (Окно браузера закрывать ненужно):
(рис 12.21) 3.Перейдем в WebMatrix далее рабочее пространство ( workspace ) "Файлы" и обновим содержание проекта:
(рис 12.22) 4.После обновления проекта появится папка App_Data с файлом "_Password.config":
(рис 12.23) 5.Переименуем "_Password.config" в "Password.config":
(рис 12.24) 6.Перейдем в окно браузера и перейдем по ссылке:
(рис 12.25) 7.После ввода пароля, в браузере отобразиться список доступных расширений:
(рис 12.26) 8.Выбираем в списке пакет ASP.NET Web Helpers (на момент написания курса актуальная версия 1.1) и жмем установить:
(рис 12.27) После установки появится сообщение, что пакет успешно установлен:
(рис 12.28) 9.Теперь закроем окно браузера. В WebMatrix создадим новый файл и назовем его Search.cshtml (Файл создается в проекте ImageSearch ):
(рис 12.29) 10.Изменим начальный код страницы Search.cshtml на:
<!DOCTYPE html>
<html>
<head>
<title>Custom Bing Search Box</title>
</head>
<body>
<div>
<h1>Simple Search</h1>
@Bing.SearchBox()
</div>
<div>
<h1>Advanced Search Option</h1>
@Bing.AdvancedSearchBox(
boxWidth: "300px",
resultWidth: 600,
resultHeight: 900,
themeColor: "Green",
locale: "ru-RU")
</div>
</body>
</html>
В теге <body></body> используются два метода: Bing.SearchBox который открывает окно браузера с результатами поиска в системе bing:
(рис 12.30) И метод Bing.AdvancedSearchBox, результаты работы отображены ниже:
(рис 12.31) 1.Cоздадим в WebMatrix новый сайт на основе шаблона EmtySite ( Пустой сайт ):
(рис 12.1) 2.Перейдем в рабочее пространство "Файлы". Добавим новую страницу в проект и назовем ее DynamicImage.cshtml:
(рис 12.2) 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) 1.Добавим к проекту новую страницу и назовем ее UploadImage.cshtml:
(рис 12.6) 2.Изменим начальный код страницы UploadImage.cshtml на:
@{ WebImage img = null;
var newFileName = "";
var imagePath = "";
if(IsPost){
img = WebImage.GetImageFromRequest();
if(img != null){
newFileName = Path.GetFileName(img.FileName);
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> Upload Image </legend>
<label for="Image">Image</label>
<input type="file" name="Image" />
<br/>
<input type="submit" value="Upload" />
</fieldset>
</form>
<h1>Uploaded Image</h1>
@if(imagePath != ""){
<div class="result">
<img src="@imagePath" alt="image" />
</div>
}
</body>
</html>
В теге <body></body> используется HTML элемент управления для загрузки файлов:
<input type="file" name="Image" />
(рис 12.7) Что бы получить загруженное изображение используется класс WebImage, который содержит различные методы для работы с изображением. В частности метод WebImage.GetImageFromRequest получает загруженное изображение и присваивает переменной img:
img = WebImage.GetImageFromRequest();
Свойство FileName возвращает имя файла, включая путь до этого файла:
C:\Users\Public\Pictures\Sample Pictures\image5.jpg
Метод Path.GetFileName, возвращает имя файла и расширение указанной строки пути:
newFileName = Path.GetFileName(img.FileName);
Для сохранения изображения в папку используется метод Save, класса WebImage:
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
Символы @"~\" указывают на текущее расположение проекта.
3.Запустим проект, выберем какое-нибудь изображение, и нажмем кнопку "Submit". Загруженное изображение отобразиться в окне браузера:
(рис 12.8) Проверим, загрузилось ли изображение в папку проекта - "image". Для этого правой кнопкой мыши, щелкнем на папке "image" выберем "обновить":
(рис 12.9) Загруженное изображение отобразиться в списке:
(рис 12.10) 1.Добавим к проекту новую страницу и назовем ее Thumbnail.cshtml
(рис 12.11) 2.В папке image, создадим папку в которую будут помещаться уменьшенные версии изображений thumbs:
(рис 12.12) 3.Изменим начальный код страницы Thumbnail.cshtml на:
@{ WebImage img = null;
var newFileName = "";
var imagePath = "";
var imageThumbPath = "";
if(IsPost)
{
img = WebImage.GetImageFromRequest();
if(img != null)
{
newFileName = Path.GetFileName(img.FileName);
imagePath = @"image\" + newFileName;
img.Save(@"~\" + imagePath);
imageThumbPath = @"image\thumbs\" + newFileName;
img.Resize(width: 60, height: 60);
img.Save(@"~\" + imageThumbPath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> Creating Thumbnail Image </legend>
<label for="Image">Image</label>
<input type="file" name="Image" />
<br/>
<input type="submit" value="Submit" />
</fieldset>
</form>
@if(imagePath != "")
{
<img src="@imageThumbPath" alt="Thumbnail image" />
<a href="@imagePath" target="_Self">
View full size
</a>
}
</body>
</html>
Данный код похож на код из пункта "Загрузка изображений на сервер", отличается только тем, что изображение загружается дважды. В папку image помещается обычного размера изображение, в папку thumbs с помощью метода Resize, уменьшенная копия изображения (в нашем примере изображение размера 60x60 пикселей):
imageThumbPath = @"image\thumbs\" + newFileName; img.Resize(width: 60, height: 60); img.Save(@"~\" + imageThumbPath);
Отобразим уменьшенную версию изображения на страницу и разместим ссылку на изображение оригинального размера:
<img src="@imageThumbPath" alt="Thumbnail image" />
<a href="@imagePath" target="_Self">
View full size
</a>
4.Запустим проект, выберем какое-нибудь изображение, и нажмем кнопку "Submit". Загруженное изображение в уменьшенном виде отобразиться в окне браузера:
(рис 12.13) Кликнем на ссылку "View full size". Браузер откроет новое окно с изображением исходного размера:
(рис 12.14) 1.Добавим к проекту новую страницу и назовем ее Flip.cshtml:
(рис 12.15) 2.Изменим начальный код страницы Flip.cshtml на:
@{ var imagePath= "";
WebImage img = new WebImage(@"~\image\image5.jpg");
if(img != null)
{
imagePath = @"image\image5.jpg";
img.FlipVertical();
img.Save(@"~\" + imagePath);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Get Image From File</title>
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != "")
{
<img src="@imagePath" alt="Image" />
}
</body>
</html>
В данном фрагменте кода используется метод класса WebImage - FlipVertical (так же для манипуляции с изображением можно использовать методы: RotateLeft и RotateRight для вращения по часовой против часовой. И метод аналогичный методу FlipVertical- FlipHorizontal который отображает зеркально изображение).
3.Запустим проект, в браузере отобразиться:
(рис 12.16) При обновлении страницы, метод FlipVertical выполниться повторно и вернет изображение в исходное состояние:
(рис 12.17) В данной части практического занятия будет рассмотрено, размещение на сайте специального плагина-поисковика. (данный плагин работает только с поисковой системой http://www.bing.com):
(рис 12.18) 1.Для того что бы плагин работал необходимо предварительно подключить специальную библиотеку ASP.NET Web Helpers Library.Для этого перейдем в рабочее пространство ( workspace ) "Сайт" и выберем "Администрирование веб-страниц ASP.NET":
(рис 12.19) 2.Откроется окно браузера, где необходимо ввести пароль (для каждого нового проекта эта операция будет проводиться повторно):
(рис 12.20) После ввода пароля в браузере отобразиться (Окно браузера закрывать ненужно):
(рис 12.21) 3.Перейдем в WebMatrix далее рабочее пространство ( workspace ) "Файлы" и обновим содержание проекта:
(рис 12.22) 4.После обновления проекта появится папка App_Data с файлом "_Password.config":
(рис 12.23) 5.Переименуем "_Password.config" в "Password.config":
(рис 12.24) 6.Перейдем в окно браузера и перейдем по ссылке:
(рис 12.25) 7.После ввода пароля, в браузере отобразиться список доступных расширений:
(рис 12.26) 8.Выбираем в списке пакет ASP.NET Web Helpers (на момент написания курса актуальная версия 1.1) и жмем установить:
(рис 12.27) После установки появится сообщение, что пакет успешно установлен:
(рис 12.28) 9.Теперь закроем окно браузера. В WebMatrix создадим новый файл и назовем его Search.cshtml (Файл создается в проекте ImageSearch ):
(рис 12.29) 10.Изменим начальный код страницы Search.cshtml на:
<!DOCTYPE html>
<html>
<head>
<title>Custom Bing Search Box</title>
</head>
<body>
<div>
<h1>Simple Search</h1>
@Bing.SearchBox()
</div>
<div>
<h1>Advanced Search Option</h1>
@Bing.AdvancedSearchBox(
boxWidth: "300px",
resultWidth: 600,
resultHeight: 900,
themeColor: "Green",
locale: "ru-RU")
</div>
</body>
</html>
В теге <body></body> используются два метода: Bing.SearchBox который открывает окно браузера с результатами поиска в системе bing:
(рис 12.30) И метод Bing.AdvancedSearchBox, результаты работы отображены ниже:
(рис 12.31) 
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.