Dynamiczne wypełnianie kontrolki (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka DynamicPopulate w zestawie narzędzi kontroli AJAX ASP.NET wywołuje usługę internetową (lub metodę strony) i wypełnia wynikową wartość kontrolką docelową na stronie bez odświeżania strony.

Omówienie

Kontrolka DynamicPopulate w zestawie narzędzi kontroli AJAX ASP.NET wywołuje usługę internetową (lub metodę strony) i wypełnia wynikową wartość kontrolką docelową na stronie bez odświeżania strony. W tym samouczku pokazano, jak to skonfigurować.

Kroki

Przede wszystkim potrzebujesz ASP.NET usługi sieci Web, która implementuje metodę wywoływaną przez metodę DynamicPopulate. Klasa usługi internetowej wymaga atrybutu zdefiniowanego ScriptService w programie Microsoft.Web.Script.Services; w przeciwnym razie ASP.NET AJAX nie może utworzyć serwera proxy języka JavaScript po stronie klienta dla usługi internetowej, który z kolei jest wymagany przez DynamicPopulateprogram .

Metoda sieci Web musi oczekiwać jednego argumentu ciągu typu o nazwie contextKey, ponieważ kontrolka DynamicPopulate wysyła jedną część informacji kontekstowych z każdym wywołaniem usługi internetowej. Następująca usługa sieci Web zwraca bieżącą datę w formacie reprezentowanym contextKey przez argument:

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

Usługa internetowa jest następnie zapisywana jako DynamicPopulate.cs.asmx. Alternatywnie można zaimplementować getDate() metodę jako metodę strony na rzeczywistej stronie ASP.NET za pomocą kontrolki DynamicPopulate .

W następnym kroku utwórz nowy plik ASP.NET. Jak zawsze pierwszym krokiem jest dołączenie ScriptManager elementu do bieżącej strony w celu załadowania biblioteki ASP.NET AJAX i działania zestawu narzędzi kontroli:

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

Następnie dodaj kontrolkę etykiety (na przykład przy użyciu kontrolki HTML o tej samej nazwie lub <asp:Label kontrolce sieci> Web), która później pokaże wynik wywołania usługi internetowej.

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

Przycisk HTML (jako kontrolka HTML, ponieważ nie wymagamy powrotu do serwera) zostanie użyty do wyzwolenia dynamicznej populacji:

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

Wreszcie, potrzebujemy kontroli, aby połączyć rzeczy w górę DynamicPopulateExtender . Następujące atrybuty zostaną ustawione (oprócz oczywistych ID i runat="server"):

• TargetControlID gdzie umieścić wynik z wywołania usługi internetowej
• ServicePath ścieżka do usługi internetowej (pomiń, jeśli chcesz użyć metody strony)
• ServiceMethod nazwa metody internetowej lub metody strony
• ContextKey informacje kontekstowe, które mają być wysyłane do usługi internetowej
• PopulateTriggerControlID element, który wyzwala wywołanie usługi internetowej
• ClearContentsDuringUpdate czy należy opróżnić element docelowy podczas wywołania usługi internetowej

Jak widać, kontrolka wymaga pewnych informacji, ale wprowadzenie wszystkiego w miejsce jest dość proste. Oto znaczniki dla kontrolki DynamicPopulateExtender w bieżącym scenariuszu:

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

Uruchom stronę ASP.NET w przeglądarce i kliknij przycisk; Otrzymasz bieżącą datę w formacie miesiąc-dzień-rok.

Kliknięcie przycisku pobiera datę z serwera (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dalej