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

Кристиан Венц

Скачать в формате PDF

Элемент управления DynamicPopulate в ASP.NET наборе средств управления AJAX вызывает веб-службу (или метод страницы) и заполняет полученное значение целевым элементом управления на странице без обновления страницы. Кроме того, можно активировать население с помощью пользовательского кода JavaScript на стороне клиента.

Обзор

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

Затем добавьте элемент управления меткой (например, с помощью элемента управления 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, например 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().

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

НазадДалее