Динамическое заполнение элемента управления с помощью кода JavaScript (VB)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

Элемент управления DynamicPopulate в ASP.NET AJAX Control Toolkit вызывает веб-службу (или метод страницы) и заполняет полученное значение в целевой элемент управления на странице без обновления страницы. Можно также активировать заполнение с помощью пользовательского кода 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

На следующем шаге создайте сайт ASP.NET и начните с элемента управления ASP.NET AJAX ScriptManager:

<asp:ScriptManager ID="asm" runat="server" />

Затем добавьте элемент управления label (например, с помощью элемента управления HTML с тем же именем или <asp:Label /> веб-элемента управления), который позже отобразит результат вызова веб-службы.

<label id="myDate" runat="server" />

Затем включите DynamicPopulateExtender элемент управления и предоставьте сведения о веб-службе, целевой элемент управления, но не имя элемента управления, который активирует заполнение. Это будет сделано позже с помощью пользовательского JavaScript!

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
 ServiceMethod="getDate" />

Теперь к части JavaScript. Функция, определяемая $find() библиотекой ASP.NET AJAX, возвращает ссылку на серверные объекты ASP.NET AJAX Control Toolkit, например DynamicPopulateExtender. В текущем файле $find("dpe") возвращает ссылку на один DynamicPopulateExtender элемент управления на странице. Он предоставляет метод с именем populate() , который запускает процесс динамического заполнения. Методу populate() требуется один аргумент: ключ контекста, который будет служить аргументом getDate() веб-метода. Например, $find("dpe").populate("format1") будет заполнять метку текущей датой в формате месяц-день-год.

Чтобы сделать пример немного более гибким, пользователь теперь может выбрать один из нескольких форматов даты. Для каждого из них отображается переключатель. Когда пользователь нажимает переключатель, код JavaScript динамически заполняет метку выбранным форматом даты. Вот эти переключатели:

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

Обратите внимание, что в контексте переключателя выражение this.value JavaScript ссылается на значение текущей кнопки, которое является точно такой же информацией getDate() , с которой может работать метод.

Нажатие кнопки извлекает дату с сервера в указанном формате (щелкните для просмотра полноразмерного изображения)

НазадВперед