Vezérlő dinamikus feltöltése JavaScript-kóddal (C#)

által Christian Wenz

PDF letöltése

Az ASP.NET AJAX vezérlőeszközkészlet DynamicPopulate vezérlőeleme meghív egy webszolgáltatást (vagy lapmetódust), és az eredményül kapott értéket a lap egy célvezérlőjébe tölti ki lapfrissítés nélkül. A populációt egyéni ügyféloldali JavaScript-kóddal is aktiválhatja.

Áttekintés

Az DynamicPopulate ASP.NET AJAX-vezérlőeszközkészlet vezérlője meghív egy webszolgáltatást (vagy lapmetódust), és az eredményül kapott értéket kitölti egy célvezérlőbe a lapon, oldalfrissítés nélkül. A populációt egyéni ügyféloldali JavaScript-kóddal is aktiválhatja.

Lépések

Először is szüksége van egy ASP.NET webszolgáltatásra, amely implementálja a vezérlő által meghívandó metódust DynamicPopulateExtender . A webszolgáltatás implementálja azt a metódust getDate(), amely egy sztring típusú argumentumot vár, mivel a contextKeyDynamicPopulate vezérlő minden webszolgáltatás-híváshoz küld egy-egy környezeti információt. Az alábbi kód (fájl DynamicPopulate.cs.asmx) három formátum egyikében kéri le az aktuális dátumot:

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

A következő lépésben hozzon létre egy új ASP.NET webhelyet, és kezdje az ASP.NET AJAX ScriptManager vezérlővel:

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

Ezután adjon hozzá egy címkevezérlőt (például az azonos nevű HTML-vezérlő vagy a <asp:Label /> webvezérlő használatával), amely később megjeleníti a webszolgáltatás hívásának eredményét.

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

Ezután adjon meg egy vezérlőt DynamicPopulateExtender , és adja meg a webszolgáltatás adatait, a célvezérlőt, de a populációt aktiváló vezérlő nevét nem. Ezt később egyéni JavaScript használatával végezheti el!

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

Most átérünk a JavaScript részre. Az $find() függvény, amelyet az ASP.NET AJAX könyvtár definiál, egy hivatkozást ad vissza az ASP.NET AJAX vezérlőkészlet kiszolgálóoldali objektumaira, mint például DynamicPopulateExtender. Az aktuális fájlban $find("dpe") a lap egyetlen DynamicPopulateExtender vezérlőelemére mutató hivatkozást ad vissza. Egy metódust populate() biztosít, amely elindítja a dinamikus népesítési folyamatot. A populate() metódushoz egy argumentum szükséges: a környezeti kulcs, amely a getDate() webes metódus argumentumaként szolgál. Így például $find("dpe").populate("format1") az aktuális dátummal tölti fel a címkét hónap-nap formátumban.

A minta rugalmasabbá tétele érdekében a felhasználó mostantól több dátumformátum közül választhat. Mindegyiknél megjelenik egy választógomb. Miután a felhasználó rákattint egy választógombra, a JavaScript-kód dinamikusan kitölti a címkét a kiválasztott dátumformátummal. Itt vannak a választógombok:

<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>

Vegye figyelembe, hogy egy választógomb kontextusában a JavaScript-kifejezés this.value az aktuális gomb értékére hivatkozik, amely történetesen pontosan ugyanaz az információ, amellyel a getDate() metódus képes dolgozni.

A gombra kattintva lekéri a dátumot a kiszolgálóról a megadott formátumban (Ide kattintva megtekintheti a teljes méretű képet)

ElőzőKövetkező