Использование DynamicPopulate с пользовательским элементом управления и JavaScript (C#)

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

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

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

Обзор

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

Шаги

Прежде всего, вам потребуется ASP.NET веб-служба, которая реализует метод, вызываемый элементом DynamicPopulateExtender управления. Веб-служба реализует метод getDate(), который ожидает один аргумент типа string, называемый contextKey, так как контрол DynamicPopulate отправляет одну единицу контекстной информации с каждым вызовом веб-службы. Ниже приведен код (файл DynamicPopulate.cs.asmx), который извлекает текущую дату в одном из трех форматов:

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

На следующем шаге создайте новый элемент управления пользователем (.ascx файл), обозначаемый следующим объявлением в первой строке:

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

Элемент <label> будет использоваться для отображения данных, поступающих с сервера.

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

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

$find("mcd1_dpe1").populate(this.value)

Этот код обращается к DynamicPopulateExtender (не волнуйтесь о странном идентификаторе, это будет описано позже) и активирует динамическую популяцию с данными. В контексте текущей радиокнопки this.value относится к его значению, которое может быть format1, format2 или format3, именно то, что ожидает веб-метод.

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

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

Опять же, вы можете отметить странный идентификатор, используемый в элементе управления: mcd1$myDate вместо myDate. Ранее код JavaScript использовал mcd1_dpe1 для доступа к DynamicPopulateExtender вместо dpe1. Эта стратегия именования является особым требованием при использовании DynamicPopulateExtender в пользовательском элементе управления. Кроме того, необходимо определенным образом внедрить пользовательский элемент управления, чтобы это все работало. Создайте новую страницу ASP.NET и зарегистрируйте префикс тега для элемента управления пользователем, который вы только что реализовали:

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>

Затем добавьте элемент управления AJAX ScriptManager ASP.NET на новую страницу:

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

Наконец, добавьте элемент управления пользователя на страницу. Необходимо задать только его ID атрибут (и runat="server", конечно), но также необходимо задать его определенное имя: mcd1 так как это префикс, используемый в пользовательском элементе управления для доступа к нему с помощью JavaScript.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

Вот и все! Страница ведет себя должным образом: пользователь щелкает одну из переключателей, элемент управления в наборе средств вызывает веб-службу и отображает текущую дату в нужном формате.

Переключатели находятся в пользовательском элементе управления (нажмите, чтобы посмотреть полноразмерное изображение)