Использование DynamicPopulate с пользовательским элементом управления и кодом JavaScript (VB)
Элемент управления DynamicPopulate в наборе элементов управления ASP.NET AJAX вызывает веб-службу (или метод страницы) и заполняет полученное значение в целевой элемент управления на странице без обновления страницы. Кроме того, можно активировать заполнение с помощью пользовательского кода JavaScript на стороне клиента. Однако необходимо соблюдать особую осторожность, когда расширитель находится в пользовательском элементе управления.
Общие сведения
Элемент DynamicPopulate управления в ASP.NET AJAX Control Toolkit вызывает веб-службу (или метод страницы) и заполняет полученное значение в целевой элемент управления на странице без обновления страницы. Кроме того, можно активировать заполнение с помощью пользовательского кода JavaScript на стороне клиента. Однако необходимо соблюдать особую осторожность, когда расширитель находится в пользовательском элементе управления.
Этапы
Прежде всего, требуется веб-служба ASP.NET, которая реализует метод, вызываемый элементом DynamicPopulateExtender управления . Веб-служба реализует метод getDate() , который ожидает один аргумент типа string с именем contextKey, так как DynamicPopulate элемент управления отправляет один фрагмент контекстной информации с каждым вызовом веб-службы. Ниже приведен код (файлы DynamicPopulate.vb.asmx), который извлекает текущую дату в одном из трех форматов:
<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function getDate(ByVal contextKey As String) As String
Dim myDate As String = ""
Select Case contextKey
Case "format1"
myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
Case "format2"
myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
Case "format3"
myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
End Select
Return myDate
End Function
End Class
На следующем шаге создайте новый пользовательский элемент управления (.ascx файл), обозначаемый следующим объявлением в первой строке:
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
Элемент <label> будет использоваться для отображения данных, поступающих с сервера.
<label id="myDate" runat="server" />
Кроме того, в файле пользовательского элемента управления мы будем использовать три переключателя, каждый из которых представляет один из трех возможных форматов дат, поддерживаемых веб-службой. Когда пользователь щелкает один из переключателей, браузер выполнит код JavaScript, который выглядит следующим образом:
$find("mcd1_dpe1").populate(this.value)
Этот код обращается DynamicPopulateExtender к (пока не беспокойтесь о странном идентификаторе, это будет описано позже) и активирует динамическое заполнение данными. В контексте текущего переключателя ссылается на его значение, которое равно format1, format2 или format3 именно то, this.value что ожидает веб-метод.
Единственное, что еще отсутствует в пользовательском элементе управления, — это DynamicPopulateExtender элемент управления, который связывает переключатели с веб-службой.
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>
Снова можно заметить странный идентификатор, используемый в элементе управления: mcd1$myDate вместо myDate. Ранее код JavaScript использовался для mcd1_dpe1 доступа DynamicPopulateExtender к вместо dpe1. Эта стратегия именования является особым требованием при использовании DynamicPopulateExtender в пользовательском элементе управления. Кроме того, необходимо внедрить пользовательский элемент управления определенным образом, чтобы все это работало. Создайте новую страницу ASP.NET и зарегистрируйте префикс тега для только что реализованного пользовательского элемента управления:
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>
Затем добавьте элемент управления ASP.NET AJAX ScriptManager на новую страницу:
<asp:ScriptManager ID="asm" runat="server" />
Наконец, добавьте пользовательский элемент управления на страницу. Необходимо задать только его ID атрибут (и runat="server", конечно), но также необходимо задать для него определенное имя: mcd1 так как это префикс, используемый в пользовательском элементе управления для доступа к нему с помощью JavaScript.
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
Вот и все! Страница работает должным образом: пользователь щелкает один из переключателей, элемент управления в наборе средств вызывает веб-службу и отображает текущую дату в нужном формате.
Переключатели находятся в пользовательском элементе управления (щелкните для просмотра полноразмерного изображения)
