Microsoft ASP.NET AJAX: получение данных с сервера при помощи веб-сервисов - Вызов веб-сервиса из приложения ASP.NET AJAX

Вызов веб-сервиса из приложения ASP.NET AJAX

Для того, чтобы вызвать веб-сервис из приложения ASP.NET AJAX, вам сначала необходимо оповестить элемент управления ScriptManager о том, что для вашего сервиса необходим прокси-класс, основанный на JavaScript. Это выполняется путем указания пути к сервису в секции <Services> элемента ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
   <Services>
      <asp:ServiceReference Path="pathToWebService" />
   </Services>
</asp:ScriptManager>

Это дополнение заставляет ScriptManager автоматически создавать прокси-класс JavaScript и он будет доступен странице. Чтобы вызвать веб-сервис из JavaScript, вам просто нужно ввести корректный тип веб-сервиса (к примеру NorthwindServices или, если вы расположили веб-сервис в пространстве имен, то тогда Namespace.NorthwindServices), при этом передавая любые параметры. Прокси-класс асинхронно вызывает сервис, то есть вам надо предоставить функцию на языке JavaScript , которая будет вызвана как только вызов будет завершен. Как раз из этой функции вы должны будете обновить внешний вид страницы для того, чтобы она включала в себя информацию, возвращенную веб-сервисом. (Вы также можете указать функцию, которую можно будет вызвать в случае, если вызов веб-сервиса завершился ошибкой.)

Пример приложения, доступный в конце данной статьи, включает в себя страницу, которая использует метод Add веб-сервиса. Страница содержит два элемента TextBox , где пользователь может ввести суммируемые числа. Также, на странице есть кнопка, при нажатии которой будет вызван веб-сервис из JavaScript и будет отображена сумма в элементе <span> , названном sum. Разметка для пользовательского интерфейса будет выглядеть следующим образом:

<asp:TextBox runat="server" ID="Num1" Columns="3"></asp:TextBox>
+
<asp:TextBox runat="server" ID="Num2" Columns="3"></asp:TextBox>
=
<span id="sum"></span>
<br />
<input type="button" id="AddNumbers" value="Вычислить сумму" onclick="ComputeSum()" />

Обратите внимание на то, что кнопка "Вычислить сумму " реализована в качестве <input type="button" /> , вместо простого элемента Button, потому, что когда кнопка будет нажата, нам нужно запустить код JavaScript (вместо выполнения постбэка). Обработчик события onclick кнопки с клиентской стороны ссылается на функцию ComputeSum, написанную в JavaScript. Функция ComputeSum вызывает метод Add веб-сервиса, передавая в него значения, введенные пользователем в элементы управления Num1 и Num2 (TextBox).

function ComputeSum() {
   var n1 = document.getElementById('<%=Num1.ClientID %>').value;
   var n2 = document.getElementById('<%=Num2.ClientID %>').value;

   NorthwindServices.Add(n1, n2, OnComputeSumSuccess, OnComputeSumError);
}

Функция document.getElementById(id) используется для получения ассоциированного HTML-элемента из документа. Поскольку элементы управления - Num1 и Num2 - являются элементами управления ASP.NET , то будет благоразумным ссылаться на значения свойств ClientID элемента, вместо того, чтобы ссылаться на литеральные значения ID, Num1 и Num2. Причиной этого является то, что значения ID элемента могут быть модифицированы во время выполнения в случае, если TextBox появится в пределах именного контейнера (к примеру, мастер-страницы (Master Page)).

Чтобы вызвать метод Add вам нужно передать четыре параметра: два целочисленных значения для суммы, JavaScript-функцию, которую нужно выполнить в случае, если вызов будет завершен успехом (OnComputeSumSuccess) , а также JavaScript-функцию на случай, если вызов завершится ошибкой (OnComputeSumError). Вот код для двух упомянутых функций:

function OnComputeSumSuccess(results) {
   var sumLabel = document.getElementById('sum');
   sumLabel.innerHTML = results;
}

function OnComputeSumError(results) {
   alert('Произошла ошибка при вызове сервиса Add : ' + results.get_message());
}

Функция OnComputeSumSuccess ссылается на sum span-элемент и назначает его свойство innerHTML возвращенному результату. Функция OnComputeSumError отображает сообщение об ошибке в модальном диалоговом окне.

Следующий рисунок демонстрирует данную функциональность в действии. При первом посещении страницы пользовательский интерфейс включает в себя два текстовых поля и кнопку "Compute Sum" (Вычислить сумму).

После введения некоторых значений, к примеру 4 и 7, и нажатия кнопки "Compute Sum", функция ComputeSum клиентской стороны будет запущена и пошлет HTTP-ответ веб-сервису NorthwindServices.asmx со следующим содержимым:

{"x":"4","y":"7"}

Указанный выше JSON будет получен веб-сервисом и преобразован в значения входных параметров (4 и 7), затем метод Add будет вызван с этими значениями. Сумма будет подсчитана (11) и результаты будут возвращены обратно к клиенту:

{"d":11}

Получив ответ, метод OnComputeSumSuccess будет вызван, передавая 11 в качестве возвращаемого значения. Данное значение будет отображено в качестве содержимого элемента <span>.