Модификация веб-приложения 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-код добавленной страницы будет таким:
|
|
<%@ Page Title="Страница с AJAX" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Ajax.aspx.cs" Inherits="LWP18ASPNET.Axaj" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Работа с технологией AJAX!
</h2>
<p align="center">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Серверная кнопка" />
</p>
</asp:Content>
Страница содержит одну кнопку, один Label (в качестве базовых элементов управления).
Добавим страницу в меню (файл Site . Master). Найдём там:
<asp:MenuItem NavigateUrl="~/Page.aspx" Text="Страница"/>
Добавим после:
<asp:MenuItem NavigateUrl="~/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. Внутрь U pdatePanel необходимо добавить тэг ContentTemplate и затем в него уже добавлять компоненты (добавим один TextBox). Добавим на форму компонент UpdateProgress, отображаться который будет, если запрос на обновление UpdatePanel будет происходить дольше, чем указано в свойстве DisplayAfter. Ну и для полноты компонент Timer, который будет перезагружать UpdatePanel через интервал указанный в свойстве Interval (в нашем случае это будет одна секунда):
|
|
</p>
<p>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Обновление...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
Так это будет выглядеть в представлении «Конструктор»:
Теперь код события Page _ Load, который будет реализовывать функции часов, и обновлять TextBox через каждую секунду, посредством всех добавленных элементов (Label 2 же будет неизменным и будет содержать время старта страницы, так как находится вне UpdatePanel):
Label2.Text = DateTime.Now.ToString();
TextBox1.Text = DateTime.Now.ToString();
Запускаем, следим за текстом в TextBox (временем) и за текстом в Label 1 (не получили ли мы «PostBack» случаем):
Рассмотрим несколько простых примеров с действиями. Начнём с самого базового и часто-описываемого: загрузка данных из текстового файла. Будем применять отдельный класс.
Загрузка данных из одного файла:
Создаём в веб-проекте новый текстовый файл AJAX _ Text 1. txt и заносим туда любой текс, например: «Здесь расположен текст первого текстового файла AJAX_Text1.txt!». Для создания файла выполняем Проект -> Добавить новый элемент...: в открывшемся окне ищем группу Данные и далее Текстовый файл:
Рис. 4. 2. Добавление нового элемента – LWP 18 ASPNET: Текстовый файл
Сохраняем текст в файле:
Теперь, необходимо создать дополнительный класс для работы 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;
public class AJAX : IHttpHandler
{
#region Члены IHttpHandler
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
// Здесь будет код обработки запроса
}
#endregion
}
Подготовим «почву» для работы AJAX. Откроем файл Site.Master и найдём строчки:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
Добавим после:
<script language = "javascript" type="text/javascript">
function getDataFromServer(dataSource, targetControl)
{
}
</script>
Добавим на страницу Ajax.aspx ещё один серверный Label и Input (Buton). Для события onclick кнопки запишем вызов некоторой функции getDataFromServer(' AJAX _ Text 1.txt', 'Label3') при нажатии кнопки. Задача функции — вывести данные в Label3 из файла без перегрузки страницы. HTML-код будет таким:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла ]</span><br />
<asp:Label ID="Label3" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button2" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('AJAX_Text1.txt', 'MainContent_Label3')"/>
</p>
Заполняем код скрипта:
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);
}
Поясним. Первое, что добавляем в скрипт: создание XMLHttpRequest -объекта.
Создание объектов различно для браузеров Mozilla Firefox, Opera, Safari и некоторых других (new XMLHttpRequest ()) и Internet Explorer (new ActiveXObject (" 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» видим, что страница не обновлялась (сигнализатор: текст в Label 1 на странице).
Используем класс AJAX . cs :
Расширим текст кода файла класса AJAX . cs. Найдём:
HttpResponse Response = context.Response;
// Здесь будет код обработки запроса
Добавим после:
// Чтение файла
String s = AppDomain.CurrentDomain.BaseDirectory + (@"AJAX_Text1.txt");
byte[] bText;
using (FileStream filestream = new FileStream(s, FileMode.Open, FileAccess.Read))
{
int bufSize = (int)filestream.Length;
bText = new byte[bufSize];
filestream.Read(bText, 0, (int)filestream.Length);
}
// Так мы вновь потеряем кириллицу
// Response.BinaryWrite(bText);
// А так нет
s = System.Text.Encoding.UTF8.GetString(bText);
Response.Write(s);
Теперь нужно создать файл содержащий скрипт из предыдущего примера. Добавим в наш проект одну пустую форму (Форма Web Forms) с именем Ajax _ Script . aspx и следующим простым кодом (заменим код созданного файла):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language = "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>
<add verb="GET" path="Ajax_Script.aspx" type="AJAX" />
</httpHandlers>
И наконец, создаём «интерфейс» на странице Ajax . aspx:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла, используя класс ]</span><br />
<asp:Label ID="Label4" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button3" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('Ajax_Script.aspx', 'MainContent_Label4')"/>
</p>
Выбираем загружаемую информацию:
Создаём ещё один текстовый файл с именем AJAX _ Text 2. txt и текстом «Здесь расположен текст первого текстового файла AJAX_Text2.txt!».
Отредактируем ради новой функциональности код класс AJAX . cs, изменим всю функцию ProcessRequest следующим образом:
public void 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 = new FileStream(id, FileMode.Open, FileAccess.Read))
{
int bufSize = (int)filestream.Length;
bTextid = new byte[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»):
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из файла, используя класс с выбором ]</span><br />
<asp:Label ID="Label5" runat="server" Text="Здесь будет выводимый текст"></asp:Label><br />
<input type="button" id="Button4" value="Загрузить текст из AJAX_Text1.txt"
onclick="getDataFromServer('Ajax_Script.aspx?id=1', 'MainContent_Label5')"/>
<input type="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;
public class AJAX_Image : IHttpHandler
{
#region Члены IHttpHandler
public bool IsReusable
{
get { return true; }
}
void IHttpHandler.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 = new MemoryStream())
{
Bitmap bitmap = null;
try
{
bitmap = new Bitmap(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):
<add verb="GET" path="Ajax_Script_Image.aspx" type="AJAX_Image" />
Создаём копию страницы со скриптом Ajax _ Script _ Image . aspx с кодом (изменена одна строка):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script_Image.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script_Image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language = "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:
<div align="center" id="iddivforimage"></div>
<div align="center">
<select id="Select1"
onchange="getImageFromServer('Ajax_Script_Image.aspx?='+this.options[this.selectedIndex].value,
'iddivforimage')">
<option value="1">Рисунок № 1</option>
<option value="2">Рисунок № 2</option>
</select>
</div>
Добавим в корень проекта два изображения с именами Image 1. jpg и Image 2. jpg (импортируем извне). Например, в данном случае были использованы два изображения:
Первое:
Второе:
« AJAXML »:
Перейдём непосредственно к использованию XML-данных. Как видно из рассмотренных свойств и методов объекта XMLHttpRequest, он имеет специальное свойство для трактовки данных, полученных от сервера, как XML-данные. Это свойство, доступное для чтения — responseXML. Далее, JavaScript имеет методы для разбора XML-файлов.
Следующий пример демонстрирует простейшее использование совместной работы AJAX и JavaScript при получении и разборке XML-данных с сервера без перегрузки страницы.
Создаём простой XML-файл (XML -файл — в окне добавления нового объекта)с именем D ata.xml и поместим его в директорию веб-проекта. Структура файла будет такой:
<?xml version="1.0" standalone="yes" ?>
<sites>
<site comments="World Wide Web Consortium (W3C)">http://www.w3.org/</site>
<site comments="Сайт корпорации Microsoft">http://www.microsoft.com</site>
<site comments="Russian on the Net">http://www.ru</site>
</sites>
Создаём новый файл скрипта Ajax_Script_XML.aspx с кодом:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax_Script_XML.aspx.cs" Inherits="LWP18ASPNET.Ajax_Script_XML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="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;
public class AJAX_XML : IHttpHandler
{
#region Члены IHttpHandler
bool IHttpHandler.IsReusable
{
get { return true; }
}
void IHttpHandler.ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
HttpResponse Response = context.Response;
string s = string.Empty;
s = AppDomain.CurrentDomain.BaseDirectory + (@"Data.xml");
using (FileStream filestream = new FileStream(s, FileMode.Open, FileAccess.Read))
{
// Чтение символов из файла
using (TextReader streamreader = new StreamReader(s, System.Text.Encoding.Default))
{
s = streamreader.ReadToEnd();
Response.ContentType = "text/xml"; // Ключевая строка для передачи XML
Response.BinaryWrite(System.Text.Encoding.UTF8.GetBytes(s));
}
}
}
#endregion
}
Регистрируем класс в Web.config:
<add verb="GET" path="Ajax_Script_XML.aspx" type="AJAX_XML" />
Код элементов управления для файла Ajax . aspx:
<p align="center">
<span class="bold" style="color:Green">[ реализация технологии AJAX: загрузка текста из XML-файла, используя класс ]</span><br />
<input type="button" id="Button7" value="Загрузить XML-файл"
onclick="getXMLFromServer('Ajax_Script_XML.aspx', 'iddivforxml')" /><br />
<asp:Label ID="Label7" runat="server" Text="Ниже будет выводимое содержимое:"></asp:Label>
</p>
<div align="center" id="iddivforxml"></div>
Готово. Компилируем, проверяем работоспособность. Перед компиляцией перемещаемся на страницу Default . aspx (должна быть активной вкладкой в среде разработки). Перед компиляцией изменим заголовок на странице. Найдём в файле Site . Master строчки:
<div class="title">
<h1>
Мое приложение ASP.NET (C#)
</h1>
И изменим на:
<div class="title">
<h1>
Знакомство с ASP.NET (C#)
</h1>
Завершающая часть
Компилируем приложение (Release) и запускаем. Оказываемся на выбранной ранее в среде разработки странице («Домашняя страница»). Переключаемся между страницами при помощи меню навигации.
Рис. 5. 1. Результат работы веб-приложения ASP.NET: общий вид страницы «Домашняя страница»
Рис. 5. 2. Результат работы веб-приложения ASP.NET: общий вид страницы «Домашняя страница» (продолжение)
Рис. 5. 3. Результат работы веб-приложения ASP.NET: общий вид страницы «Новая страница»
Рис. 5. 4. Результат работы веб-приложения ASP.NET: общий вид страницы «AJAX»
Проверяем работоспособность всех созданных в данной лабораторной работе элементов на всех страницах.
Дата добавления: 2019-09-13; просмотров: 203; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!