Використання технології AJAX в ASP.NET допомогою Atlas (исходники), Різне, Програмування, статті

Дана стаття присвячується створенню найпростішого Web-додатки, що дозволяє динамічно на стороні клієнта заповнювати даними випадає, а також проводити динамічну завантаження додаткової інформації з бази даних з використанням технологій ASP.NET 2.0, AJAX і Atlas.

AJAX (Asynchronous JavaScript and XML) – це крос-платформна технологія створення Web-додатків. Дана технологія дозволяє розробнику виконувати асинхронні запити до Web-додатків, використовуючи мову розмітки даних XML.


Технологія фірми Microsoft з кодовим ім’ям “Atlas” дозволяє використовувати AJAX при створенні серверних додатків заснованих на технології ASP.NET 2.0.


Дана стаття присвячується створенню найпростішого Web-додатки, що дозволяє динамічно на стороні клієнта заповнювати даними випадає, а також проводити динамічну завантаження додаткової інформації з бази даних з використанням технологій ASP.NET 2.0, AJAX і Atlas.


Для того, щоб почати роботу з технологією Atlas необхідно завантажити відповідне розширення для Visual Studio 2005. Зробити це можна з сайту фірми Microsoft (скачати).


Після установки даного розширення необхідно створити новий Web проект, вибравши шаблон «ASP.NET ‘Atlas’ Web Site» (рис. 1)

Рис. 1 Вікно створення нового проекту на основі шаблону

Рис. 2 Створювана таблиця sprEmployee


Після створення бази даних і заповнення її якимись даними можна приступати до створення веб-служби, необхідної для отримання інформації з бази даних у форматі XML.


Для створення веб-служби необхідно виділити у вікні «Solution Exploler» створений проект, і після цього в меню Website обрати Add New Item. У вікні (рис. 3) вибрати шаблон Web Service, ввести ім’я WebAccess.asmx, і прибрати галочку Place code in separate file.

Рис. 3 Вікно створення нової веб-служби


Тепер додамо код нашої веб-служби:







<%@ WebService Language=”VB” Class=”WebAccess” %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Collections

<WebService(Namespace:=”http://tempuri.org/”)> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
Public Class WebAccess
Inherits System.Web.Services.WebService
Public Structure EmployeeLittleRec “Структура для відправки даних про
облікових записах
Dim Name As String “Ім’я облікового запису
Dim ID As Integer “Код облікового запису
End Structure

Private Structure EmployeeRec “Структура для отримання додатково
інформації про обліковий запис
Dim Name As String “Ім’я облікового запису
Dim Password As String “Пароль облікового запису
Dim DateBegin As Date “Дата створення
Dim DateEnd As Date “Дата видалення
Dim Comments As String “Коментарі
End Structure
“”” <summary>
“” “Функція отримання додатково інформації за кодом облікового запису
“”” </summary>
“” “ Код облікового запису
“” “ Повертає HTML код містить інформацію про облікову
записи
<WebMethod()> _
Public Function GetFullEmployeeInfo(ByVal IDEmployee As Integer) As
String
Dim Rec As EmployeeRec
Dim ReturnStr As String
Dim con As New SqlConnection(“workstation id=Test;packet
size = 4096; Data Source = crash; Initial Catalog = WebAccess; user id = sa “)” Створюємо
з’єднання з базою даних
con.Open () “Відкриваємо з’єднання (тут звичайно необхідно виконати
перехоплення виключень, але ця стаття не про це)
Dim command As New SqlCommand(“SELECT * FROM sprEmployee WHERE
IDEmployee = “& CStr (IDEmployee), con)” Створюємо запит до нашої таблиці
Dim dbReader As SqlDataReader
dbReader = command.ExecuteReader () “Створюємо SqlDataReader для читання
даних з таблиці
If dbReader.Read Then
Rec.Name = CStr(dbReader(“Name”))
Rec.Password = CStr(dbReader(“Password”))
Rec.DateBegin = CDate(dbReader(“DateBegin”))
If Not IsDBNull(dbReader(“DateEnd”)) Then
Rec.DateEnd = CDate(dbReader(“DateEnd”))
Else
Rec.DateEnd = Nothing
End If
Rec.Comments = CStr(dbReader(“Comments”))
ReturnStr = String.Format (“

Ім’я: {0}
Пароль: {1}
Дата підключення: {2}
Дата
відключення: {3}
Коментарі: {4} “, Rec.Name, Rec.Password,
Rec.DateBegin, Rec.DateEnd, Rec.Comments) “Створюємо код HTML який відразу ж
буде виведений на сторінку
Else
ReturnStr = “Помилка при отриманні даних” “Запис не була знайдена
End If
con.Close()
con.Dispose()
Return ReturnStr
End Function
“”” <summary>
“” “Функція необхідна для отримання списку облікових записів
“”” </summary>
“” “ Максимальна кількість записів
“” “ Масив з інформацією про записи
<WebMethod()> Public Function GetEmployee(ByVal Count As Integer) As
Generic.List(Of EmployeeLittleRec)
Dim sql As String
Dim ListRec As New Generic.List (Of EmployeeLittleRec) “Створюємо масив
Dim OneRec As EmployeeLittleRec
Dim ReturnStr As String = “”
Dim con As New SqlConnection(“workstation id=Test;packet
size=4096;Data Source=crash;Initial Catalog=WebAccess;user id=sa”)
con.Open () “Єднаймося з базою даних
Dim command As SqlCommand
If Count> 0 Then “Перевіряємо встановлено чи кількість виведених записів
sql = String.Format(“SELECT TOP {0} IDEmployee,Name FROM
sprEmployee”, Count)
Else
sql = “SELECT IDEmployee,Name FROM sprEmployee”
End If
command = New SqlCommand(sql, con)
Dim dbReader As SqlDataReader
dbReader = command.ExecuteReader
Do Until Not dbReader.Read “Заповнюємо масив облікових записів
OneRec.ID = dbReader(“IDEmployee”)
OneRec.Name = dbReader(“Name”)
ListRec.Add(OneRec)
Loop
con.Close()
con.Dispose()
Return ListRec “Повертаємо масив
End Function
End Class

Лістинг 1. Вихідний код веб-служби


Тепер приступимо до створення веб-сторінки для доступу до інформації про облікові записи. Для цього, виділивши у вікні «Solution Exploler» створений проект і вибравши в меню Website пункт Add New Item, задаємо відповідні параметри створюваної сторінці (рис 4.):


Рис. 4 Створення нової веб-сторінки


Після створення веб-форми введемо в неї код, необхідний для її роботи.






<%@ Page Language=”VB” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<script runat=”server”>
</script>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title>Testing Atlas</title>
<script language=”javascript” type=”text/javascript”>
// <!CDATA[
///////////////////////////////////////////////////////////////////
/ / JavaScript для роботи з веб-службою та обробка клієнтських подій
///////////////////////////////////////////////////////////////////
function bttnLoadToDropDown_onclick () / / Функція обробки кліка по кнопці
“Завантажити список”
{
document.getElementById(“SplashScreen”).style.display=”block”;
/ / Показуємо “йде завантаження”
var Count =document.getElementById(“txtCount”).value;
/ / Отримання кол-ва виведених записів
WebAccess.GetEmployee (Count, OnCallBackResult); / / Виконання запиту до
веб-службі, де OnCallBackResult-функція зворотного виклику
}
function OnCallBackResult (result) / / Опис функції зворотного виклику, в
яку повертається результат
{
var ddl = document.getElementById (“ddlEmployee”); / / Оголошуємо наш
випадаючий список
var i;
for (i=0;i<result.length;i++)
{
ddl.options[i]=new Option(result[i].Name,result[i].ID);
/ / Додаємо в список завантажені дані
}
document.getElementById (“SplashScreen”). style.display = “none”; / / Приховуємо
“Йде завантаження”
}
function ddlEmployee_onchange()
{
document.getElementById(“SplashScreen”).style.display=”block”;
/ / Показуємо “йде завантаження”
WebAccess.GetFullEmployeeInfo(document.getElementById(“ddlEmployee”).value,On
CallBackFullInfo); / / Виконання запиту до веб-службі
}
function OnCallBackFullInfo(result)
{
document.getElementById (“FullInfo”). innerHTML = result / / показує
отриманих HTML користувачеві
document.getElementById (“SplashScreen”). style.display = “none”; / / Приховуємо
“Йде завантаження”
}
// ]]>
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<% - Оголошуємо об'єкти Atlas -%>
<atlas:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Services>
<% - Оголошуємо посилання на нашу веб-службу -%>
<atlas:ServiceReference Path=”WebAccess.asmx”
Type=”text/javascript” />
</Services>
</atlas:ScriptManager>
<% - Створюємо об'єкт для відображення завантаження -%>
<div id=”SplashScreen” style=”position: absolute; display: none;
left: 246px; width: 476px;
top: 141px; height: 49px; text-align: justify;”>
<h2>
Йде
отримання даних
</div>
<div>
<input id=”txtCount” style=”width: 147px” type=”text” value=”0″ />
onclick=”return bttnLoadToDropDown_onclick()” /><br />
<select id=”ddlEmployee” style=”width: 313px” onchange=”return
ddlEmployee_onchange()”>
<option selected=”selected”></option>
</select>
<span id=”FullInfo”></span>
</div>
</form>
</body>
</html>

Лістинг 2. Вихідний код веб-форми


Тепер запустимо створений проект на виконання. Якщо все зроблено правильно, то на екрані має відобразитися наступне вікно браузера (рис. 5), а після завантаження списку і вибору будь-якої записи екран прийме приблизно такий вигляд як на рис. 6.

Рис. 5 Результат запуску проекту

Рис. 6 Результати роботи


Для створення даної статті використовувалися матеріали з сайту atlas.asp.net


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*