Модификация веб-приложения 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>

<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">

<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>

</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 и найдём строчки:

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

function getDataFromServer(dataSource, targetControl)

{

}

</script>

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

<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">

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>

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

<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»):

<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):

Создаём копию страницы со скриптом 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">

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:

<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="Сайт корпорации Microsoft">http://www.microsoft.com</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">

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:

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

<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>

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

<h1>

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

</h1>

И изменим на:

<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; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 67 68 69 70 717273 74 75 76 Следующая ⇒

Мы поможем в написании ваших работ!