Обновление данных без перезагрузки страницы

В ASP.NET 2.0 стало возможным обновлять данные на странице без отправки страницы на сервер и ее полного обновления. Это стало возможно благодаря появлению клиентских сценариев с обратным вызовом (callback scripts или клиентские коллбэки). После того, как некоторое событие вызывает запрос к серверу, обновленные данные передаются непосредственно в клиентский сценарий в качестве аргументов функции.

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

Допустим, существует страница, на которой находится выпадающий список. Когда пользователь выбирает некоторое значение из списка, в некоторый элемент управления загружается значение, логически связанное с выбранным из списка значением. При этом задача такова, что нельзя хранить все данные на стороне клиента (возможно данных слишком много и страница будет долго передаваться по сети, либо данные генерируются на сервере не только в зависимости от выбранного пользователем элемента выпадающего списка). В ASP.NET 1.x для решения этой задачи необходимо привязать к событию изменения значения в выпадающем списке серверный метод. При этом список должен вызывать отправку страницы на сервер при каждом изменении значения (AutoPostBack="True").

 

protected void ddStatic_SelectedIndexChanged(object sender, EventArgs e)

{ // На основании значения

ddStatic.Items[ddStatic.SelectedIndex].Value

// метод устанавливает свойства других элементов управления

}

 

В ASP.NET 2.0, как уже было сказано выше, существует возможность не обновлять всю страницу целиком. В данном случае разумно обновить только необходимые данные, поскольку обновлять всю страницу только для того, чтобы установить одно значение слишком расточительно.

Для реализации механизма обновления данных без перезагрузки страницы необходимо создать клиентскую функцию обратного вызова, принимающую переданные с сервера параметры, серверную функцию, принимающую параметры от клиента и возвращающую клиенту значения на основании полученных параметров, и связать эти две функции. Мало того, механизм обратного вызова в ASP.NET 2.0 позволяет возвращать результат асинхронно. Для этого в интерфейсе ICallbackEventHandler определены два метода: RaiseCallbackEvent, для получения параметров на сервере и GetCallbackResult для возвращения результата клиенту. Для реализации функциональности предыдущего примера в .aspx файле помещается следующий код.

 

<script>

function UpdateText(result, context)

{ dSpan.innerText = result;

}

</script>

<asp:DropDownList ID="ddDynamic" runat="server" />

<br /><span id="dSpan" style="font-weight: bold;" />

 

Класс страницы, использующей функции с обратным вызовом, должен реализовать интерфейс ICallbackEventHandler.

 

public partial class ScriptCallback_aspx: System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { }

 

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

 

public virtual void PrepareCallbackEvent(string Аргументы)

public virtual string RenderCallbackResult()

private string EventArgument = "";

public void PrepareCallbackEvent(string eventArgument)

{ EventArgument = eventArgument;

}

public string RenderCallbackResult()

{ return EventArgument; // значение типа string

}

 

Последним шагом к поставленной цели является связывание серверной и клиентских функций.

 

protected void Page_Load(object sender, EventArgs e)

{ // создаем ссылку на функцию обратного вызова

string callbackFunction =

Page.ClientScript.GetCallbackEventReference (this,

"document.all['ddDynamic'].value", "UpdateText",

"null"

);

// Привязываем сценарий к событию изменения значения выпадающего

// списка

ddDynamic.Attributes["onchange"] = String.Format("javascript:{0}",

callbackFunction);}

 

Метод GetCallbackEventReference объекта ClientScriptManager принимает в качестве параметров ссылку на объект страницы, строку, указывающую на значение, которое необходимо передавать на сервер при обратном вызове, имя метода на стороне клиента и принимающего ответ сервера. Подробное описание можно получить в документации MSDN или с помощью инструмента VS - Object Browser.

Используя эту технологию можно создавать сложные методы обновления данных страницы, позволяющие получить значительный выигрыш в производительности. Для этого достаточно разобраться в том, какой код генерирует среда выполнения ASP.NET, реализуя эту функциональность.

 

// Список, вызывающий перезагрузку страницы

<select name="ddStatic"onchange="javascript:setTimeout('__doPostBack(\'ddStati

c\',\'\')', 0)"id="ddStatic"></select>

// Список вызывающий метод с обратным вызовом

<select name="ddDynamic" id="ddDynamic"onchange="javascript:WebForm_DoCallback('__Page',document.all['ddDynamic'].value,UpdateText,null,null,false)">

 

Стандартная функция doPostBack весьма проста и служит для сохранения данных о событии в скрытые поля формы.

 

var theForm = document.forms['frmCallBack'];

function __doPostBack(eventTarget, eventArgument)

{ if (theForm.onsubmit == null || theForm.onsubmit())

{ theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

 

При использовании функций с обратным вызовом механизм значительно сложнее. Код функции WebForm_DoCallback гораздо больше, чем doPostBack, поскольку эта функция определяет тип объектной модели браузера, после чего загружает необходимый для передачи данных с модуль. Например, для браузера поддерживающего DOM это будет Microsoft.XMLHTTP.

Посмотреть код различных клиентских функций, используемых средой ASP.NET 2.0 можно сохранив страницу, поддерживающую функции с обратным вызовом на жесткий диск и открыв в текстовом редакторе файл WebResource.axd, ссылка на который имеется в HTML странице.