Używanie kontrolki DynamicPopulate z kontrolką użytkownika i kodem JavaScript (VB)
Autor: Christian Wenz
Kontrolka DynamicPopulate w zestawie narzędzi kontroli 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.
Omówienie
Kontrolka DynamicPopulate w zestawie narzędzi AJAX Control Toolkit 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.
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 (pliki DynamicPopulate.vb.asmx), który pobiera bieżącą datę w jednym z trzech formatów:
<%@ 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
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 sterowania 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 DynamicPopulateExtender dostęp do elementu (nie martw się jeszcze o dziwny identyfikator, zostanie on omówiony później) i wyzwala dynamiczną populację przy użyciu danych. W kontekście bieżącego przycisku radiowego odwołuje się do jego wartości , format2 czyli format1format3 dokładnie tego, this.value czego oczekuje metoda internetowa.
Jedyną rzeczą, której brakuje 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.vb.asmx" ServiceMethod="getDate"/>
Ponownie możesz zanotować dziwny identyfikator używany w kontrolce: mcd1$myDate zamiast myDate. Wcześniej kod JavaScript używany mcd1_dpe1 do uzyskiwania dostępu do elementu DynamicPopulateExtender zamiast dpe1. Ta strategia nazewnictwa jest specjalnym wymaganiem w przypadku korzystania z DynamicPopulateExtender kontrolki 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.vb.ascx"%>
Następnie dołącz kontrolkę AJAX ScriptManager ASP.NET na nowej stronie:
<asp:ScriptManager ID="asm" runat="server" />
Na koniec dodaj kontrolkę użytkownika do strony. Musisz tylko ustawić 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 klika 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 pełnowymiarowy)
