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

á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.vb.asmx) három formátum egyikében kéri le az aktuális dátumot:

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

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.vb.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ő