Знакомство с ASP.NET

<p>

<asp:TextBoxID="TextBox6"runat="server"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"

ErrorMessage="RequiredFieldValidator"ControlToValidate="TextBox6"

Text="[ пожалуйста, заполнитетекстовоеполе ]"Font-Size="Large"ForeColor="#FF3300"Font-Bold="True"></asp:RequiredFieldValidator><br/>

<asp:ButtonID="Button5"runat="server"Text="Выполнить"/>

</p>

Запустим, нажмём серверную кнопку «Выполнить», не заполняя текстовое поле:

Второй элемент проверки:RangeValidator проверяет, входит ли введенное значение в диапазон. Ключевые свойства:

· MaximumValue-- максимальное значение.

· MinimumValue--минимально значение.

Изменим добавленный HTML-код:

<p>

<asp:TextBoxID="TextBox6"runat="server"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"

ErrorMessage="RequiredFieldValidator"ControlToValidate="TextBox6"

Text="[ пожалуйста, заполнитетекстовоеполе ]"Font-Size="Large"ForeColor="#FF3300"Font-Bold="True">

</asp:RequiredFieldValidator>

<br/>

<asp:RangeValidatorID="RangeValidator1"runat="server"

ErrorMessage="RangeValidator"ControlToValidate="TextBox6"

Text="[ значениеполеневдиапазонеот 0 до 100 ]"Font-Size="Large"

ForeColor="#FF3300"Font-Bold="True"MaximumValue="100"MinimumValue="0">

</asp:RangeValidator>

<br/>

<asp:ButtonID="Button5"runat="server"Text="Выполнить"/>

</p>

RegularExpressionValidator проверяет заполнение поля по шаблону (регулярному выражению). Очень удобно, например, проверять правильность введенного E-mail адреса, тем более что в Visual Studio уже есть шаблон «e-mail».

Свойства:

· ValidationExpression--регулярное выражение проверки.

Рис. 3.6 Редактор регулярных выражений: редактируем свойство ValidationExpression и выбираем выражение

Добавим новый код на страницу:



<p>

<asp:TextBoxID="TextBox7"runat="server"></asp:TextBox>

<asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"

ErrorMessage="RegularExpressionValidator"ControlToValidate="TextBox7"

Text="[ пожалуйста, введитекорректныйадрес E-mail ]"Font-Size="Large"

Font-Bold="True"ForeColor="Red"

ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

<br/>

<asp:ButtonID="Button6"runat="server"Text="Выполнить"/>

</p>

CompareValidatorсравнивает значения введённые в разные элементы управления. Таким образом, можно проверить правильность ввода пароля в два поля. Свойства:

· ControlToCompare-- элемент для сравнения.

<p>

<asp:TextBoxID="TextBox8"runat="server"></asp:TextBox>

<asp:TextBoxID="TextBox9"runat="server"></asp:TextBox>

<asp:CompareValidatorID="CompareValidator1"runat="server"

ErrorMessage="CompareValidator"ControlToValidate="TextBox8"

ControlToCompare="TextBox9"Font-Size="Large"Font-Bold="True"

Text="[ значения в текстовых полях не совпадают ]"ForeColor="Red"></asp:CompareValidator>

<br/>

<asp:ButtonID="Button7"runat="server"Text="Выполнить"/>

</p>

CustomValidator позволяет проверить то, что не смог ни один предыдущий компонент. Для этого нужно написать стороннюю функцию роверки на стороне клиента. Свойства:

· ClientValidationFunction--скрипт на стороне клиента.

Если полей на форме достаточно много, то имеет смысл показывать все ошибки вместе, например, вверху или внизу страницы. Для этого существует ValidationSummary. Свойства:

· DisplayMode--определяет стиль отображения списка.

· HeaderText--определяет заголовок списка.

· ShowMessageBox--показывает сообщение об ошибке в JavaScript-окне.

<asp:ValidationSummaryID="ValidationSummary1"runat="server"

Font-Bold="True"Font-Size="Large"ForeColor="Red"

HeaderText="Ошибкиввода:"ShowMessageBox="True"/>

Также «облагородим» свойство ErrorMessageостальных «валидаторов» (именно этот текст ловит ValidationSummary, например для CompareValidator:

<asp:CompareValidatorID="CompareValidator1"runat="server"

ErrorMessage="Значения в текстовых полях не совпадают."ControlToValidate="TextBox8"

ControlToCompare="TextBox9"Font-Size="Large"Font-Bold="True"

Text="[ значения в текстовых полях не совпадают ]"ForeColor="Red"></asp:CompareValidator>

И всплывающее окно:

С этой частью работы закончили.

3. Модификациявеб-приложенияASP.NET: AJAX

Введение в AJAX:

AJAX (Asynchronous JavaScript And XML-- асинхронный JavaScript «плюс» XML), обозначает подход к созданию веб-приложений, при котором после первичного вызова веб-страницы она получает возможность обмена данных с сервером и отображения данных без необходимости своей перегрузки.

Это обеспечивают ряд механизмов, основной из которых -- движок AJAX. Это посредник между браузером (загруженной в него страницей) и сервером, способный передавать данные серверу и принимать их от него. Окончательно этот механизм сформировался в 1998 году, когда в Internet Explorer 5.0 были внедрены новые ActiveX-объекты, и, в частности, XMLHttpRequest-объект. Именно XMLHttpRequest приобрел наибольшую популярность и поддержку в других браузерах (Mozilla Firefox, начиная с версии 1.0, Opera, начиная с версии 8.0, Safari...).

Движок AJAX (XMLHttpRequest) производит необходимые запросы асинхронно, обычно при помощи XML, не прерывая взаимодействия пользователя с приложением. Ответ сервера -- это либо текстовая строка, либо XML документ.

XMLHttpRequest-объект создаётся для страницы, именно как объект, в момент её загрузки или при необходимости обмена данных с сервером. Созданный объект имеет свои методы и свойства, доступные коду JavaScript-скриптов страницы. Вот основные:

open('Тип запроса «GET» или «POST»', 'URL страницы", 'исполнение запроса --«True»-- асинхронное исполнение', 'username', 'pasword') -- создаёт запрос к серверу.

send('content') -- отправляет запрос на сервер. В качестве значений может быть null или данные для запроса «POST» или пустая строка.

onreadystatechange-- событие, возникающее при смене состояния объекта:

· 0 -- (uninitialized) -- запрос не отправлен;

· 1 -- (loading) -- объект инициализирован;

· 2 -- (loaded) -- получен ответ от сервера;

· 3 -- (interactive) -- соединение с сервером активно;

· 4 -- (complete) -- объект завершил работу;

responseText-- взять данные от сервера в виде строки.

responseXML-- взять данные от сервера в виде XML;

status-- свойство статус HTTP-ответа (например, 404 -- страница не найдена на сервере).

Все свойства и методы объекта, доступны из JavaScript скриптов. Таким образом, AJAX, как её трактуют сами разработчики, это несколько технологий, объединённых в новое направление:

· стандартизованное представление данных с использованием XHTML и CSS;

· динамическое отображение и взаимодействие при помощи DOM (Document Object Model);

· обмен и управление данными через XML и XSLT;

· асинхронные получение данных с использованием XMLHttpRequest;

· JavaScript, как язык, связывающий все компоненты.

Подготовка к реализации функциональности AJAX:

Создаём новую страницу («Веб-форма, использующая главную страницу») с именем Ajax.aspx. В качестве основного шаблона выбираем Site.Master. HTML-код добавленной страницы будет таким:

<%@PageTitle="Страницас AJAX"Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="Ajax.aspx.cs"Inherits="LWP18ASPNET.Axaj"%>

<asp:ContentID="Content1"ContentPlaceHolderID="HeadContent"runat="server">

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">

<h2>

Работа с технологией AJAX!

</h2>

<palign="center">

<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>&nbsp;

<asp:ButtonID="Button1"runat="server"Text="Сервернаякнопка"/>

</p>

</asp:Content>

Страница содержит одну кнопку, один Label (в качестве базовых элементов управления).



Добавим страницу в меню (файл Site.Master). Найдём там:

<asp:MenuItemNavigateUrl="~/Page.aspx"Text="Страница"/>

Добавим после:

<asp:MenuItemNavigateUrl="~/Ajax.aspx"Text="AJAX"/>

Теперь добавим код для события Page_Loadфайла Ajax.aspx.cs:

if (!IsPostBack) { Label1.Text = "ТекстприпервойзагрузкестраницыDefault.aspx"; }

else { Label1.Text = "Текст при перегрузке страницы"; }

Этот код будет сигнализировать о том, что страница не перегружается при использовании AJAX-вызовов. Загрузим веб-сайт, текст в Label1 будет «Текст при первой загрузке страницы Default.aspx», нажимаем серверную кнопку --«Текст при перегрузке страницы». По смене текста будем судить о том, перегружалась или нет страница:

Рис. 4.1 Результат работы веб-приложения ASP.NET: загружена «Страница с AJAX»

Среда разработки по умолчанию умеет работать со следующими компонентами AJAX:



Выполним самый простейший вариант, который не требует действия пользователя, а именно AJAX-часы.

Реализации таких часов: вначале добавим простой Label. Затем, на странице, которая будет использовать эту технологию должен быть обязательно элемент управления ScriptManager(группа AJAX-расширения панели элементов). Добавляем его на страницу. Добавляем компонент UpdatePanel. При постбэке из этого элемента будет обновляться только эта часть, то есть элементы внутри UpdatePanel. Внутрь UpdatePanel необходимо добавить тэг ContentTemplate и затем в него уже добавлять компоненты (добавим один TextBox). Добавим на форму компонент UpdateProgress, отображаться который будет, если запрос на обновление UpdatePanel будет происходить дольше, чем указано в свойстве DisplayAfter. Ну и для полноты компонент Timer, который будет перезагружать UpdatePanel через интервал указанный в свойстве Interval(в нашем случае это будет одна секунда):

</p>

<p>

<asp:LabelID="Label2"runat="server"Text="Label"></asp:Label>

</p>

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:TimerID="Timer1"runat="server"Interval="1000">

</asp:Timer>

<asp:TextBoxID="TextBox1"runat="server"ReadOnly="True"></asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgressID="UpdateProgress1"runat="server">

<ProgressTemplate>

Обновление...

</ProgressTemplate>

</asp:UpdateProgress>

</div>

Так это будет выглядеть в представлении «Конструктор»:

Теперь код события Page_Load, который будет реализовывать функции часов, и обновлять TextBoxчерез каждую секунду, посредством всех добавленных элементов (Label2же будет неизменным и будет содержать время старта страницы, так как находится вне UpdatePanel):

Label2.Text = DateTime.Now.ToString();

TextBox1.Text = DateTime.Now.ToString();

Запускаем, следим за текстом в TextBox (временем) и за текстом в Label1 (не получили ли мы «PostBack»случаем):



Рассмотрим несколько простых примеров с действиями. Начнём с самого базового и часто-описываемого: загрузка данных из текстового файла. Будем применять отдельный класс.

Загрузка данных из одного файла:

Создаём в веб-проекте новый текстовый файл AJAX_Text1.txtи заносим туда любой текс, например: «Здесь расположен текст первого текстового файла AJAX_Text1.txt!». Для создания файла выполняем Проект ->Добавить новый элемент...: в открывшемся окне ищем группу Данные и далее Текстовый файл:

Рис. 4.2 Добавление нового элемента - LWP18ASPNET: Текстовый файл

Сохраняем текст в файле:

Теперь, необходимо создать дополнительный класс для работы AJAXи исполнения загрузки из этого файла. Будем использовать HttpHandler.

ASP.NET обрабатывает запросы HTTP с помощью обработчика HttpHandler, который доступен по умолчанию для всех запрашиваемых страниц c расширением *.aspx и служб (*.asmx). HttpHandlers-- это классы, реализующие интерфейсы IHttpHandler и IHttpAsyncHandler и, по существу, служат ISAPI-фильтром, обработки HTTP-запросов. Запросы могут обрабатываться как синхронно (интерфейс System.Web.IHttpHandler) --HttpHandler возвращает управление по завершению обработки запроса или асинхронно (интерфейс System.Web.IHttpAsyncHandler) -- путём запуска процессов обработки и возврата управления. Иначе --HttpHandler'ы могут передавать выполнение запроса другим классам или же сами обрабатывают запрос и возвращают результат клиенту.

Важной особенностью ASP.NET является то, что HttpHandler может быть создан разработчиком для выполнения своих конкретных задач.

Для того, чтобы любой класс мог выполнять функции HttpHandler'а, необходимо реализовать в нём интерфейс System.Web.IHttpHandler или System.Web.IHttpAsyncHandler.Можно также создавать экземпляр обработчика HttpHandler с помощью класса, реализующего интерфейс IHttpHandlerFactory.

Интерфейсы System.Web.IHttpAsyncHandler и System.Web.IHttpHandler должны включать методы ProcessRequest (обработчик запроса), свойства IsReusable (поддержка организация пулов). Для интерфейса System.Web.IHttpAsyncHandler требуются дополнительно методы BeginProcessRequest и EndProcessRequest(инициализация и завершение асинхронных вызовов).

Выполним: Проект ->Добавить класс... (Shift+Alt+C). Имя вводим как AJAX.cs. Вставляем туда код:

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Drawing;

using System.IO;

using System.Drawing.Imaging;

publicclassAJAX : IHttpHandler

{

#regionЧлены IHttpHandler

publicbool IsReusable

{

get { returntrue; }

}

publicvoid ProcessRequest(HttpContext context)

{

HttpRequest Request = context.Request;

HttpResponse Response = context.Response;

// Здесь будет код обработки запроса

}

#endregion

}

Подготовим «почву» для работы AJAX. Откроем файл Site.Masterи найдём строчки:

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title></title>

Добавим после:

<scriptlanguage="javascript"type="text/javascript">

function getDataFromServer(dataSource, targetControl)

{

}

</script>

Добавим на страницу Ajax.aspx ещё один серверный Label и Input (Buton). Для события onclickкнопки запишем вызов некоторой функции getDataFromServer('AJAX_Text1.txt', 'Label3') при нажатии кнопки. Задача функции -- вывести данные в Label3 из файла без перегрузки страницы.HTML-код будет таким:

<palign="center">

<spanclass="bold"style="color:Green">[ реализация технологии AJAX: загрузка текста из файла ]</span><br/>

<asp:LabelID="Label3"runat="server"Text="Здесь будет выводимый текст"></asp:Label><br/>

<inputtype="button"id="Button2"value="Загрузитьтекстиз AJAX_Text1.txt"

onclick="getDataFromServer('AJAX_Text1.txt', 'MainContent_Label3')"/>

</p>

Заполняем код скрипта:

varmyAjaxObject = false;

if (window.XMLHttpRequest) {

myAjaxObject = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");

}

}

if (myAjaxObject) {

myAjaxObject.open("GET", dataSource);

myAjaxObject.onreadystatechange =

function () {

if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {

var targetObj = document.getElementById(targetControl);

targetObj.innerHTML = myAjaxObject.responseText;

delete myAjaxObject;

myAjaxObject = null;

}

}

myAjaxObject.send(null);

}

Поясним. Первое, чтодобавляемвскрипт: созданиеXMLHttpRequest-объекта.

СозданиеобъектовразличнодлябраузеровMozillaFirefox, Opera, Safariинекоторыхдругих (newXMLHttpRequest()) иInternetExplorer (newActiveXObject("Microsoft.XMLHTTP")), чтоиотражаетданныйкод. Далее, после проверки того, что объект создан, мы создаём запрос к серверу (метод «open»). К событию, возникающему при смене состояния объекта (onreadystatechange), добавляем безымянную функцию, задачей которой будет слежение за состоянием объекта (нас интересует завершение получения данных):

if (myAjaxObject) {

myAjaxObject.open("GET", dataSource);

myAjaxObject.onreadystatechange =

function () {

}

}

В телефункции определяем, что загрузка данных завершена (readyState == 4) и обмен прошёл без ошибок (status == 200). Осталось получить текст (myAjaxObject.responseText) и присвоить его свойству innerHTML элемента Label3:

if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {

var targetObj = document.getElementById(targetControl);

targetObj.innerHTML = myAjaxObject.responseText;

delete myAjaxObject;

myAjaxObject = null;

И последнее: отсылка запроса на сервер:

myAjaxObject.send(null);

В результате имеем работающий код, выполняющий динамическое чтение данных из текстового файла:

После нажатия кнопки «Загрузить текст из AJAX_Text1.txt» видим, что страница не обновлялась (сигнализатор: текст в Label1 на странице).

Используем классAJAX.cs:

Расширим текст кода файла класса AJAX.cs. Найдём:



HttpResponse Response = context.Response;

// Здесь будет код обработки запроса

Добавим после:

// Чтениефайла

String s = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text1.txt");

byte[] bText;

using (FileStream filestream = newFileStream(s, FileMode.Open, FileAccess.Read))

{

int bufSize = (int)filestream.Length;

bText = newbyte[bufSize];

filestream.Read(bText, 0, (int)filestream.Length);

}

// Такмывновьпотеряемкириллицу

// Response.BinaryWrite(bText);

// Атакнет

s = System.Text.Encoding.UTF8.GetString(bText);

Response.Write(s);

Теперь нужно создать файл содержащий скрипт из предыдущего примера. Добавим в наш проект одну пустую форму (Форма WebForms) с именем Ajax_Script.aspxи следующим простым кодом (заменим код созданного файла):

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Ajax_Script.aspx.cs"Inherits="LWP18ASPNET.Ajax_Script"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

<scriptlanguage="javascript"type="text/javascript">

function getDataFromServer(dataSource, targetControl) {

var myAjaxObject = false;

if (window.XMLHttpRequest) {

myAjaxObject = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");

}

}

if (myAjaxObject) {

myAjaxObject.open("GET", dataSource);

myAjaxObject.onreadystatechange =

function () {

if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {

var targetObj = document.getElementById(targetControl);

targetObj.innerHTML = myAjaxObject.responseText;

delete myAjaxObject;

myAjaxObject = null;

}

}

myAjaxObject.send(null);

}

}

</script>

</head>

</html>

Теперь организуем «регистрацию» нашего класса и привязку его к скрипту. Откроем корневой Web.config, найдём там

<system.web>

Добавим после:

<httpHandlers>

<addverb="GET"path="Ajax_Script.aspx"type="AJAX" />

</httpHandlers>

И наконец, создаём «интерфейс» на странице Ajax.aspx:

<palign="center">

<spanclass="bold"style="color:Green">[ реализациятехнологииAJAX: загрузкатекстаизфайла, используякласс ]</span><br/>

<asp:LabelID="Label4"runat="server"Text="Здесьбудетвыводимыйтекст"></asp:Label><br/>

<inputtype="button"id="Button3"value="Загрузитьтекстиз AJAX_Text1.txt"

onclick="getDataFromServer('Ajax_Script.aspx', 'MainContent_Label4')"/>

</p>

Выбираем загружаемую информацию:

Создаём ещё один текстовый файл с именем AJAX_Text2.txtи текстом «Здесь расположен текст первого текстового файла AJAX_Text2.txt!».

Отредактируем ради новой функциональности код класс AJAX.cs, изменим всю функцию ProcessRequest следующим образом:

publicvoid ProcessRequest(HttpContext context)

{

HttpRequest Request = context.Request;

HttpResponse Response = context.Response;

// Здесь будет код обработки запроса

String id = string.Empty;

// Извлечение параметров

id = Request.QueryString.Get(0);

if (!string.IsNullOrEmpty(id))

{

if (id == "1") { id = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text1.txt"); }

else { id = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text2.txt"); }

}

else { return; }

byte[] bTextid;

using (FileStream filestream = newFileStream(id, FileMode.Open, FileAccess.Read))

{

int bufSize = (int)filestream.Length;

bTextid = newbyte[bufSize];

filestream.Read(bTextid, 0, (int)filestream.Length);

}

id = System.Text.Encoding.UTF8.GetString(bTextid);

Response.Write(id);

}



Также подправим код для предыдущего примера, найдём в файле Ajax.aspx:

onclick="getDataFromServer('Ajax_Script.aspx', 'MainContent_Label4')"/>

Изменим на:

onclick="getDataFromServer('Ajax_Script.aspx?id=1', 'MainContent_Label4')"/>

И добавим новый HTML-код (в тэге «p»):

<palign="center">

<spanclass="bold"style="color:Green">[ реализация технологии AJAX: загрузка текста из файла, используя класс с выбором ]</span><br/>

<asp:LabelID="Label5"runat="server"Text="Здесь будет выводимый текст"></asp:Label><br/>

<inputtype="button"id="Button4"value="Загрузитьтекстиз AJAX_Text1.txt"

onclick="getDataFromServer('Ajax_Script.aspx?id=1', 'MainContent_Label5')"/>

<inputtype="button"id="Button5"value="Загрузитьтекстиз AJAX_Text2.txt"

onclick="getDataFromServer('Ajax_Script.aspx?id=2', 'MainContent_Label5')"/>

</p>



Выбор и отображение изображений:

Создаём новый класс AJAX_Image.csс кодом:

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Drawing;

using System.IO;

using System.Drawing.Imaging;

publicclassAJAX_Image : IHttpHandler

{

#regionЧлены IHttpHandler

publicbool IsReusable

{

get { returntrue; }

}

voidIHttpHandler.ProcessRequest(HttpContext context)

{

HttpRequest Request = context.Request;

HttpResponse Response = context.Response;

string s = string.Empty;

s = Request.QueryString.Get(0);

if (!string.IsNullOrEmpty(s))

{

if (s == "1") { s = AppDomain.CurrentDomain.BaseDirectory + (@"Image1.jpg"); }

else{ s = AppDomain.CurrentDomain.BaseDirectory + (@"Image2.jpg"); }

}

else { s = AppDomain.CurrentDomain.BaseDirectory + (@"Image1.jpg"); }

using (MemoryStream memorystream = newMemoryStream())

{

Bitmap bitmap = null;

try

{

bitmap = newBitmap(s);

bitmap.Save(memorystream, ImageFormat.Png);

byte[] b = memorystream.GetBuffer();

// Формат файла рисунка может быть отличен от исходного файла

Response.ContentType = "image/png";

Response.BinaryWrite(b);

bitmap.Dispose();

}

catch (Exception) { }

memorystream.Dispose();

}

}

#endregion

}

Регистрируем класс вWeb.config (в блоке httpHandlers):



<addverb="GET"path="Ajax_Script_Image.aspx"type="AJAX_Image" />

Создаёмкопиюстраницы соскриптомAjax_Script_Image.aspxскодом (изменена одна строка):

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Ajax_Script_Image.aspx.cs"Inherits="LWP18ASPNET.Ajax_Script_Image"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

<scriptlanguage="javascript"type="text/javascript">

function getImageFromServer(dataSource, targetControl) {

var myAjaxObject = false;

if (window.XMLHttpRequest) {

myAjaxObject = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP");

}

}

if (myAjaxObject) {

myAjaxObject.open("GET", dataSource);

myAjaxObject.onreadystatechange =

function () {

if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {

var targetObj = document.getElementById(targetControl);

targetObj.innerHTML = "<img src= " + dataSource + ">";

delete myAjaxObject;

myAjaxObject = null;

}

}

myAjaxObject.send(null);

}

}

</script>

</head>

</html>

Тот же скрипт помещаем в Site.Masterпосле предыдущего добавленного в этот файл скрипта. Не забудем это сделать, иначе функция JavaScriptбудет не определена!

И наконец, создаём интерфейс для реализации выбора и отображения изображения в файле Ajax.aspx:

<divalign="center"id="iddivforimage"></div>

<divalign="center">

<selectid="Select1"

onchange="getImageFromServer('Ajax_Script_Image.aspx?='+this.options[this.selectedIndex].value,

'iddivforimage')">

<optionvalue="1">Рисунок № 1</option>

<optionvalue="2">Рисунок № 2</option>

</select>

</div>

Добавим в корень проекта два изображения с именами Image1.jpgи Image2.jpg (импортируем извне). Например, в данном случае были использованы два изображения:

Первое:

Второе:

«AJAXML»:

Перейдём непосредственно к использованию XML-данных. Как видно из рассмотренных свойств и методов объекта XMLHttpRequest, он имеет специальное свойство для трактовки данных, полученных от сервера, как XML-данные. Это свойство, доступное для чтения --responseXML. Далее, JavaScript имеет методы для разбора XML-файлов.

Следующий пример демонстрирует простейшее использование совместной работы AJAX и JavaScript при получении и разборке XML-данных с сервера без перегрузки страницы.

Создаём простой XML-файл (XML-файл--в окне добавления нового объекта)с именемData.xml и поместим его в директорию веб-проекта.Структурафайлабудеттакой:

<?xmlversion="1.0"standalone="yes" ?>

<sites>

<sitecomments="World Wide Web Consortium (W3C)">http://www.w3.org/</site>

<sitecomments="Сайткорпорации Microsoft">http://www.microsoft.com</site>

<sitecomments="Russian on the Net">http://www.ru</site>

</sites>

Создаём новый файл скриптаAjax_Script_XML.aspx с кодом:

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Ajax_Script_XML.aspx.cs"Inherits="LWP18ASPNET.Ajax_Script_XML"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

<scriptlanguage="javascript"type="text/javascript">

function getXMLFromServer(dataSource, targetControl) {

var myAjaxObject = false;

if (window.XMLHttpRequest) { myAjaxObject = new XMLHttpRequest();}

else { if (window.ActiveXObject) { myAjaxObject = new ActiveXObject("Microsoft.XMLHTTP"); } }

if(myAjaxObject)

{

myAjaxObject.open("GET", dataSource);

myAjaxObject.onreadystatechange =

function()

{

if (myAjaxObject.readyState == 4 && myAjaxObject.status == 200)

{

var xmlDocument = myAjaxObject.responseXML;

var i;

var points = xmlDocument.getElementsByTagName("site");

var html='';

for (i = 0; i < points.length; i++)

{

html=html+'<a href="'+points[i].firstChild.data+'" target="blank">'+

points[i].getAttribute ('comments')

+'</a><br/>';

}

var targetObj = document.getElementById(targetControl);

targetObj.innerHTML = html + "";

}

}

myAjaxObject.send(null);

}

}

</script>

</head>

</html>

Не забываем поместить код скрипта (<script> ... </script>) втэгheadфайлаSite.Master.

Создаём новый класс AJAX_XML.csс кодом:

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Drawing;

using System.IO;

using System.Drawing.Imaging;

publicclassAJAX_XML : IHttpHandler

{

#regionЧлены IHttpHandler

boolIHttpHandler.IsReusable

{

get { returntrue; }

}

voidIHttpHandler.ProcessRequest(HttpContext context)

{

HttpRequest Request = context.Request;

HttpResponse Response = context.Response;

string s = string.Empty;

s = AppDomain.CurrentDomain.BaseDirectory + (@"Data.xml");

using (FileStream filestream = newFileStream(s, FileMode.Open, FileAccess.Read))

{

// Чтениесимволовизфайла

using (TextReader streamreader = newStreamReader(s, System.Text.Encoding.Default))

{

s = streamreader.ReadToEnd();

Response.ContentType = "text/xml"; // Ключеваястрокадляпередачи XML

Response.BinaryWrite(System.Text.Encoding.UTF8.GetBytes(s));

}

}

}

#endregion

}

Регистрируем классв Web.config:

<addverb="GET"path="Ajax_Script_XML.aspx"type="AJAX_XML" />

Код элементов управления для файла Ajax.aspx:

<palign="center">

<spanclass="bold"style="color:Green">[ реализация технологии AJAX: загрузка текста из XML-файла, используя класс ]</span><br/>

<inputtype="button"id="Button7"value="Загрузить XML-файл"

onclick="getXMLFromServer('Ajax_Script_XML.aspx', 'iddivforxml')"/><br/>

<asp:LabelID="Label7"runat="server"Text="Нижебудетвыводимоесодержимое:"></asp:Label>

</p>

<divalign="center"id="iddivforxml"></div>

Готово. Компилируем, проверяем работоспособность. Перед компиляцией перемещаемся на страницу Default.aspx (должна быть активной вкладкой в среде разработки).



Перед компиляцией изменим заголовок на странице. Найдём в файле Site.Masterстрочки:

<divclass="title">

<h1>

Моеприложение ASP.NET (C#)

</h1>

И изменим на:

<divclass="title">

<h1>

Знакомство с ASP.NET (C#)

</h1>

4. Завершающая часть

Компилируем приложение (Release) и запускаем. Оказываемся на выбранной ранее в среде разработки странице («Домашняя страница»). Переключаемся между страницами при помощи меню навигации.

Рис. 5.1 Результат работы веб-приложения ASP.NET: общий вид страницы «Домашняя страница»



Рис. 5.2 Результат работы веб-приложения ASP.NET: общий вид страницы «Домашняя страница» (продолжение)

Рис. 5.3 Результат работы веб-приложения ASP.NET: общий вид страницы «Новая страница»

Рис. 5.4 Результат работы веб-приложения ASP.NET: общий вид страницы «AJAX»

Проверяем работоспособность всех созданных в данной лабораторной работе элементов на всех страницах.

5. О приложении к Лабораторной работе

Ресурсы (архив с рисунками Images.zip,а также XML-файлData.xml), , а также получившуюся программу (откомпилированный DLL-компонент LWP18ASPNET.dllдля веб-сервера IIS), собранную из кусков кода приведённых в данной лабораторной работе, можно загрузить по ссылке в конце этого материала.

Размещено на Allbest.ur