Лабораторная работа № 4
Задание: К созданному веб-приложению необходимо добавить веб-страницу *.aspx (страница ASP.NET). Затем необходимо в серверной части кода реализовать асинхронный метод и вызывать его с использованием технологий AJAX и PageMethods.
Реализованный на странице асинхронный метод должен возвращать объект одного из классов, после чего данный объект должен быть отображен на странице.
Варианты:
В соответствии с первой лабораторной работой.
Вспомогательный материал:
Для создания ASP.NET страницы необходимо кликнуть в «Обозревателе решений» на проекте правой кнопкой и в меню выбрать пункт «Создать новый элемент» и выбрать типа «Форма Web Form» с именем Default.aspx. При этом в корне веб-приложения будет размещено два файла – Default.aspx (в котором располагаются элементы интерфейса и клиентская часть кода на HTML-языке со вставками серверного кода ASP.NET) и Default.aspx.cs (серверная часть кода на языке C#). После создания в файле Default.aspx будет размещен код:
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
В файле Default.aspx.cs код будет выглядеть следующим образом:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
В файле Default.aspx.c необходимо создать заготовку веб-метода в следующей форме (в разделе using необходимо подключить пространство имен «System.Web.Services»):
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)
{
}
public class tempclass
{
public string TempField { get; set; }
}
[WebMethod()]
public static object ExampleMethod()
{
tempclass t = new tempclass();
t.TempField = "Hello World";
return t;
}
}
Важно обратить внимание, что для примера был создан класс tempclass, вместо которого при реализации лабораторной работы необходимо вернуть один из классов, заданный в варианте.
В файле Default.aspx необходимо добавить ScriptManager (открыв Default.aspx в Visual Studio – можно увидеть слева – панель элементов, либо открыть ее через «Вид – Панель элементов», оттуда можно перетащить ScriptManager на страницу), обрабатывающий асинхронные AJAX запросы, после чего страница примет вид:
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" EnableScriptLocalization="true" EnablePartialRendering="true" EnableScriptGlobalization="true" AsyncPostBackTimeout="999" runat="server">
</asp:ScriptManager>
<div>
</div>
</form>
</body>
</html>
Затем необходимо в коде добавить кнопку и дописать к ней код обращения к асинхронному методу. Для удобства работа с элементами HTML на клиентской стороне – подключим к проекту модули JQuery (необходимо скопировать папку JS из исходных данных в корень сайта):
<%@ 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='js/jquery-1.10.2.min.js' type="text/javascript"></script>
<script src='js/jquery-ui-1.10.3.min.js' type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" EnableScriptLocalization="true" EnablePartialRendering="true" EnableScriptGlobalization="true" AsyncPostBackTimeout="999" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
$(document).ready(function (e) {
$('#<%= Button1.ClientID %>').click(function (e) {
PageMethods.ExampleMethod(function (e) {
{
alert(e.TempField);
}
}, function (error) {
});
return false;
});
});
</script>
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
После нажатия на кнопку – должно отобразиться сообщение с текстом «Hello world».
При реализации лабораторной работы – во всплывающем сообщении должны отображаться значения полей какого-либо класса из варианта задания.
Изучить понятие JSON объектов, основы технологии JQuery.
Ресурсы:
Технология ASP.NET и PageMethods:
http://weblogs.asp.net/jalpeshpvadgama/page-methods-in-asp-net
http://weblogs.asp.net/jalpeshpvadgama/asp-net-page-methods-with-parameters
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/calling-an-Asp-Net-C-Sharp-method-web-method-using-javascript/
Дополнительно. Пошаговое руководство. Создание и использование веб-службы с поддержкой AJAX: http://msdn.microsoft.com/ru-ru/library/bb532367(v=vs.90).aspx
JQuery для начинающих: http://anton.shevchuk.name/javascript/jquery-for-beginners/