Dynamické naplnění ovládacího prvku pomocí javascriptového kódu (VB)

Vytvořil Christian Wenz

Stáhnout PDF

DynamicPopulate ovládací prvek v ASP.NET AJAX Control Toolkit volá webovou službu nebo metodu stránky a vloží výslednou hodnotu do cílového ovládacího prvku na stránce bez aktualizace stránky. Je také možné spustit naplnění pomocí vlastního klientského JavaScriptového kódu.

Přehled

Ovládací DynamicPopulate prvek v ASP.NET AJAX Control Toolkit volá webovou službu (nebo metodu stránky) a vyplní výslednou hodnotu do cílového ovládacího prvku na stránce bez aktualizace stránky. Je také možné spustit naplnění pomocí vlastního klientského JavaScriptového kódu.

Kroky

Nejprve potřebujete webovou službu ASP.NET, která implementuje metodu, kterou má ovládací prvek DynamicPopulateExtender volat. Webová služba implementuje metodu getDate() , která očekává jeden argument typu řetězec, který se nazývá contextKey, protože DynamicPopulate ovládací prvek odesílá jednu část kontextových informací s každým voláním webové služby. Tady je kód (soubor DynamicPopulate.vb.asmx), který načte aktuální datum v jednom ze tří formátů:

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

V dalším kroku vytvořte nový web ASP.NET a začněte s ovládacím prvkem ASP.NET AJAX ScriptManager.

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

Potom přidejte ovládací prvek štítku (například pomocí ovládacího prvku HTML s odpovídajícím názvem nebo webového <asp:Label /> ovládacího prvku), který později zobrazí výsledek volání webové služby.

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

Dále zahrňte DynamicPopulateExtender ovládací prvek a zadejte informace o webové službě, cílový ovládací prvek, ale ne název ovládacího prvku, který aktivuje populaci, bude provedeno později pomocí vlastního JavaScriptu.

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

Teď přejděte do části JavaScript. Funkce $find() definovaná knihovnou ASP.NET AJAX vrátí odkaz na objekty na straně serveru ASP.NET AJAX Control Toolkit, například DynamicPopulateExtender. V aktuálním souboru $find("dpe") vrátí odkaz na jeden DynamicPopulateExtender ovládací prvek na stránce. Zveřejňuje metodu nazvanou populate(), která aktivuje proces dynamického naplnění. Metoda populate() vyžaduje jeden argument: kontextový klíč, který bude sloužit jako argument pro webovou metodu getDate() . $find("dpe").populate("format1") Například by se popisek naplnil aktuálním datem ve formátu měsíce-den-rok.

Aby byla ukázka trochu flexibilnější, uživatel si teď může vybrat mezi několika formáty kalendářních dat. U každého z nich se zobrazí přepínač. Jakmile uživatel klikne na přepínač, JavaScriptový kód dynamicky naplní etiketu vybraným formátem data. Tady jsou ty přepínače rádia:

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

Všimněte si, že v kontextu přepínače odkazuje výraz this.value JavaScriptu na hodnotu aktuálního tlačítka, což je přesně stejné informace getDate() , se kterými může metoda pracovat.

Kliknutím na tlačítko se načte datum ze serveru ve formátu zadaném (kliknutím zobrazíte obrázek s plnou velikostí).

PředchozíDalší