В данной статье я хочу описать подход, который позволяет вызывать серверную функцию в ASP.NET с клиента без перезагрузки страницы. Давайте начнём.
На клиенте мы будем реализовывать данный подход с помощью библиотеки jquery, поэтому сначала нужно скачать и подключить эту библиотеку. jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax. То что нам и нужно.
Мы будем использовать метод jQuery.ajax. Данный метод загружает удаленную страницу используя HTTP запрос.
Это низкоуровневая реализация AJAX в jQuery. $.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.
В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом. Существует много параметров в данном методе, не буду их все описывать, опишу только те которые мы с вами будем использовать.
Имя параметра
|
Описание
| |
data
|
| |
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. Потому что, никто не хочет видеть лишний раз перегрузку страницы. Надеюсь, данная статья вам пригодится.
Если можно, прикрепите архив проекта к тексту, я пытаюсь реализовать подобное, но вызова метода на сервере не происходит. Может встроенный в студию сервер не умеет вызывать такие методы?
ОтветитьУдалитьМожет быть приложить совой проект, а Вы сможете его поправить, у меня 2012 студия.
ОтветитьУдалить