Dynamiczne wypełnianie kontrolki przy użyciu kodu 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.

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.

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ą witrynę 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 uwzględnij kontrolkę DynamicPopulateExtender i podaj informacje o usłudze internetowej, kontrolce docelowej, ale nie nazwę kontrolki, która wyzwala populację, która zostanie wykonana później przy użyciu niestandardowego języka JavaScript!

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

Teraz przejdź do części JavaScript. Funkcja zdefiniowana $find() przez bibliotekę ASP.NET AJAX zwraca odwołanie do obiektów po stronie serwera zestawu narzędzi ASP.NET AJAX Control Toolkit, 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 proces dynamicznej 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") wypełnia etykietę aktualną 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. Po kliknięciu przycisku radiowego przez użytkownika 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 w JavaScript odnosi się do wartości bieżącego przycisku, która jest dokładnie taką samą informacją, z jaką metoda getDate() może pracować.

Kliknięcie przycisku pobiera datę z serwera w określonym formacie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

PoprzedniNastępny