Dynamiczne wypełnianie kontrolki przy użyciu kodu JavaScript (C#)
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.
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.
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ą lokację ASP.NET i zacznij od kontrolki ASP.NET AJAX ScriptManager:
<asp:ScriptManager ID="asm" runat="server" />
Następnie dodaj kontrolkę etykiety (na przykład przy użyciu kontrolki HTML o tej samej nazwie lub kontrolce <asp:Label /> internetowej), która później wyświetli wynik wywołania usługi internetowej.
<label id="myDate" runat="server" />
Następnie dołącz kontrolkę DynamicPopulateExtender i podaj informacje o usłudze internetowej, kontrolkę docelową, ale nie nazwę kontrolki, która wyzwala populację, która zostanie wykonana później, przy użyciu niestandardowego kodu JavaScript!
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx"
ServiceMethod="getDate" />
Teraz do części JavaScript. Funkcja zdefiniowana $find() przez bibliotekę AJAX ASP.NET zwraca odwołanie do obiektów po stronie serwera ASP.NET zestawu narzędzi kontroli AJAX, takich jak DynamicPopulateExtender. W bieżącym pliku $find("dpe") zwraca odwołanie do jednej DynamicPopulateExtender kontrolki na stronie. Uwidacznia metodę o nazwie populate() , która wyzwala dynamiczny proces populacji. Metoda populate() wymaga jednego argumentu: klucza kontekstu, który będzie służyć jako argument getDate() metody internetowej. Na przykład $find("dpe").populate("format1") należy wypełnić etykietę bieżącą datą w formacie miesiąc-dzień-rok.
Aby przykład był nieco bardziej elastyczny, użytkownik może teraz wybrać między kilkoma formatami dat. Dla każdego z nich jest wyświetlany przycisk radiowy. Gdy użytkownik kliknie przycisk radiowy, kod JavaScript dynamicznie wypełnia etykietę wybranym formatem daty. Oto te przyciski radiowe:
<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>
Należy pamiętać, że w kontekście przycisku radiowego wyrażenie this.value Języka JavaScript odwołuje się do wartości bieżącego przycisku, która ma być dokładnie tymi samymi informacjami getDate() , z którymi może pracować metoda.
Kliknięcie przycisku pobiera datę z serwera w określonym formacie (kliknij, aby wyświetlić obraz pełnowymiarowy)
