Używanie DynamicPopulate z kontrolą użytkownika i językiem JavaScript (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka DynamicPopulate w zestawie narzędzi sterowania AJAX ASP.NET wywołuje usługę internetową (lub metodę strony) i wypełnia wynikową wartość w kontrolce docelowej na stronie bez odświeżania strony. Istnieje również możliwość wyzwolenia populacji przy użyciu niestandardowego kodu JavaScript po stronie klienta. Należy jednak zachować szczególną ostrożność, gdy rozszerzenie znajduje się w kontrolce użytkownika.

Przegląd

Kontrolka DynamicPopulate w ASP.NET AJAX Control Toolkit wywołuje usługę internetową (lub metodę strony) i wypełnia wynikową wartość w kontrolce docelowej na stronie bez odświeżania strony. Istnieje również możliwość wyzwolenia populacji przy użyciu niestandardowego kodu JavaScript po stronie klienta. Należy jednak zachować szczególną ostrożność, gdy rozszerzenie znajduje się w kontrolce użytkownika.

Kroki

Przede wszystkim potrzebna jest ASP.NET usługa sieci Web, która implementuje metodę wywoływaną przez kontrolkę DynamicPopulateExtender . Usługa internetowa implementuje metodę getDate() , która oczekuje jednego argumentu ciągu typu o nazwie contextKey, ponieważ DynamicPopulate kontrolka wysyła jeden fragment informacji kontekstowych z każdym wywołaniem usługi internetowej. Oto kod (plik DynamicPopulate.cs.asmx), który pobiera bieżącą datę w jednym z trzech formatów:

<%@ 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;
 }
}

W następnym kroku utwórz nową kontrolkę użytkownika (.ascx plik) oznaczona następującą deklaracją w pierwszym wierszu:

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

Element <label> będzie używany do wyświetlania danych pochodzących z serwera.

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

Ponadto w pliku kontroli użytkownika użyjemy trzech przycisków radiowych, z których każdy reprezentuje jeden z trzech możliwych formatów dat obsługiwanych przez usługę internetową. Gdy użytkownik kliknie jeden z przycisków radiowych, przeglądarka wykona kod JavaScript, który wygląda następująco:

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

Ten kod uzyskuje dostęp do DynamicPopulateExtender (nie martw się jeszcze dziwnym identyfikatorem, zostanie on omówiony później) i rozpoczyna dynamiczne wypełnianie danymi. W kontekście bieżącego przycisku radiowego, this.value odnosi się do jego wartości, która jest format1, format2 lub format3, dokładnie to, czego oczekuje metoda sieciowa.

Jedyną rzeczą brakującą w kontrolce użytkownika jest jeszcze kontrolka DynamicPopulateExtender , która łączy przyciski radiowe z usługą internetową.

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

Ponownie możesz zanotować dziwny identyfikator użyty w kontrolce: mcd1$myDate zamiast myDate. Wcześniej kod JavaScript używał mcd1_dpe1 do uzyskiwania dostępu do DynamicPopulateExtender zamiast dpe1. Ta strategia nazewnictwa jest specjalnym wymaganiem podczas korzystania z DynamicPopulateExtender w kontrolce użytkownika. Ponadto musisz osadzić kontrolkę użytkownika w określony sposób, aby wszystko działało. Utwórz nową stronę ASP.NET i zarejestruj prefiks tagu dla właśnie zaimplementowanej kontrolki użytkownika:

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

Następnie dołącz kontrolkę ASP.NET AJAX ScriptManager na nowej stronie:

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

Na koniec dodaj kontrolkę użytkownika do strony. Musisz ustawić tylko jego ID atrybut (i runat="server", oczywiście), ale musisz również ustawić go na określoną nazwę: mcd1 ponieważ jest to prefiks używany w kontrolce użytkownika, aby uzyskać do niego dostęp przy użyciu języka JavaScript.

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

I to wszystko! Strona działa zgodnie z oczekiwaniami: użytkownik kliknie jeden z przycisków radiowych, kontrolka w zestawie narzędzi wywołuje usługę internetową i wyświetla bieżącą datę w żądanym formacie.

Przyciski radiowe znajdują się w kontrolce użytkownika (kliknij, aby wyświetlić obraz o pełnym rozmiarze)