среда, 29 июня 2011 г.

Использование WebMethod в ASP.NET с помощью jquery


В данной статье я хочу описать подход, который позволяет вызывать серверную функцию в ASP.NET с клиента без перезагрузки страницы. Давайте начнём.
На клиенте мы будем реализовывать данный подход с помощью библиотеки jquery, поэтому сначала нужно скачать и подключить эту библиотеку. jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax. То что нам и нужно.
Мы будем использовать метод jQuery.ajax. Данный метод загружает удаленную страницу используя HTTP запрос.
Это низкоуровневая реализация AJAX в jQuery.  $.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.
В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом. Существует много параметров в данном методе, не буду их все описывать, опишу только те которые мы с вами будем использовать.


Имя параметра
Описание
data
Данные, которые отсылаются на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Объект должен состоять из пар ключ/значение. Если значение представляет собой массив, то jQuery упорядочивает значения, принадлежащие одному ключу, например, {foo:["bar1", "bar2"]} превращается в ‘&foo=bar1&foo=bar2′.
url
По умолчанию: текущая страница
URL к запросу. Это ДОЛЖНА быть строка (например, document.location.href) а не локальный объект
type
Тип запроса (»POST» или «GET»), по умолчанию «GET». Примечание: другие методы такие, как PUT и DELETE, также можно указывать здесь, но они поддерживаются не всеми браузерами.
contentType
Тип, отсылаемых данных на сервер, мы будем посылать наши данные в формате json. Поэтому мы тут укажем application/json; charset=utf-8
dataType
Тип данных, который Вы ожидаете от сервера. Если не указано никакого типа, то jQuery укажет его самостоятельно (либо responseXML либо responseText), отталкиваясь от типа MIME ответа.
error
Функция, которая исполняется всякий раз после неудачного запроса AJAX. Функция принимает три аргумента: объект XMLHttpRequest, строку, описывающую тип случившейся ошибки и необязательный объект «исключения».
success
Функция, которая исполняется всякий раз после удачного завершения запроса AJAX. Функция принимает два аргумента: данные от сервера, отформатированные в соответствие с параметром ‘dataType’, и строку, описывающую текущий статус. Это событие Ajax.


Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и и текущее время на сервере. При получении ответа, клиент просто показывет alert с полученной от сервера информацией.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="json2.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Имя:
                </td>
                <td>
                    <asp:TextBox ID="tbxName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Фамилия:
                </td>
                <td>
                    <asp:TextBox ID="tbxSurname" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
        <input type="button" id="btnAJAX" value='AJAX' />
    </div>
   
    <script type="text/javascript">

        $(document).ready(function() {
            $('#btnAJAX').click(function() {
                doAJAX();
            });
        });

        function doAJAX() {

            var data = {
                'name': $('#<%= tbxName.ClientID %>').val(),
                'surname': $('#<%= tbxSurname.ClientID %>').val()
            };

            $.ajax({
                type: "POST",
                url: "Default.aspx/GetServerMessage",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    alert(response.d);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                }
            });
        }
   
    </script>
   
    </form>
</body>
</html>


Далее обратимся к серверу. На сервере нам необходимо написать метод которй будет вызываться клиентом с помощью ajax. Данный метод во первых обязательно должен быть статическим, а во вторых должен быть помечен атрибутом [WebMethod]. Что же это за атрибут?
Присоединение атрибута WebMethod к методу Public означает, что этот метод должен публиковаться в качестве составной части веб-службы XML. Свойства этого атрибута также можно использовать для более детальной настройки поведения метода веб-службы XML.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetServerMessage(string name, string surname)
    {
        return "Hello " + surname + " " + name + Environment.NewLine + "At " + DateTime.Now.ToLongTimeString();
    }
}


Давайте посмотрим на то что у меня получилось.

Ещё необходимо отметить то что, как вы уже заметили, данные на сервер передаются в json формате. Все современные браузеры знают этот формат и понимают. Но для Internet Explorer 6 необходимо подключить специальный файл json2.js, который можно без труда скачать в интернете.
Этот подход, который я описала в статье, очень часто применяется на практике в ASP.NET. Потому что, никто не хочет видеть лишний раз перегрузку страницы. Надеюсь, данная статья вам пригодится.

2 комментария:

  1. Если можно, прикрепите архив проекта к тексту, я пытаюсь реализовать подобное, но вызова метода на сервере не происходит. Может встроенный в студию сервер не умеет вызывать такие методы?

    ОтветитьУдалить
  2. Может быть приложить совой проект, а Вы сможете его поправить, у меня 2012 студия.

    ОтветитьУдалить