JavaScript Kodu Kullanarak Bir Denetimi Dinamik Olarak Doldurma (VB)

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki DynamicPopulate denetimi bir web hizmetini (veya sayfa yöntemini) çağırır ve sonuçta elde edilen değeri sayfa yenilemesi olmadan sayfadaki bir hedef denetime doldurur. Özel istemci tarafı JavaScript kodu kullanarak popülasyonu tetikleme de mümkündür.

Genel Bakış

DynamicPopulate ASP.NET AJAX Denetim Araç Seti'ndeki denetim bir web hizmetini (veya sayfa yöntemini) çağırır ve sonuçta elde edilen değeri sayfa yenilemesi olmadan sayfadaki bir hedef denetime doldurur. Özel istemci tarafı JavaScript kodu kullanarak popülasyonu tetikleme de mümkündür.

Adımlar

Her şeyden önce, denetim tarafından DynamicPopulateExtender çağrılmak üzere yöntemini uygulayan bir ASP.NET Web Hizmeti gerekir. Web hizmeti, denetim her web hizmeti çağrısıyla bir bağlam bilgisi gönderdiğinden, dize türünde adlı contextKeyDynamicPopulate tek bir bağımsız değişken bekleyen yöntemini getDate() uygular. Geçerli tarihi üç biçimden birinde alan kod (dosya DynamicPopulate.vb.asmx) aşağıdadır:

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

Sonraki adımda yeni bir ASP.NET sitesi oluşturun ve ASP.NET AJAX ScriptManager denetimiyle başlayın:

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

Ardından, daha sonra web hizmeti çağrısının sonucunu gösterecek bir etiket denetimi (örneğin, aynı ada sahip HTML denetimini veya <asp:Label /> web denetimini kullanarak) ekleyin.

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

Ardından, bir DynamicPopulateExtender denetim ekleyin ve özel JavaScript kullanarak web hizmeti bilgilerini, hedef denetimi sağlayın, ancak daha sonra bunun gerçekleştirileceği popülasyonu tetikleyen denetimin adını sağlamayın!

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

Şimdi JavaScript bölümüne. $find() ASP.NET AJAX kitaplığı tarafından tanımlanan işlevi, gibi ASP.NET AJAX Denetim Araç Seti'nin DynamicPopulateExtendersunucu tarafı nesnelerine başvuru döndürür. Geçerli dosyada, $find("dpe") sayfadaki tek DynamicPopulateExtender denetime başvuru döndürür. Dinamik popülasyon işlemini tetikleyen adlı populate() bir yöntemi kullanıma sunar. yöntemi populate() bir bağımsız değişken gerektirir: web yöntemine getDate() bağımsız değişken olarak hizmet edecek bağlam anahtarı. Örneğin, $find("dpe").populate("format1") etiketi geçerli tarihle ay-gün-yıl biçiminde doldurur.

Örneği biraz daha esnek hale getirmek için kullanıcı artık birkaç tarih biçimi arasında seçim yapabilir. Her biri için bir radyo düğmesi görüntülenir. Kullanıcı bir radyo düğmesine tıkladıktan sonra JavaScript kodu etiketi seçilen tarih biçimiyle dinamik olarak doldurur. Radyo düğmeleri şunlardır:

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

Bir radyo düğmesi bağlamında JavaScript ifadesinin this.value geçerli düğmenin değerini ifade ettiğini ve bu değerin yöntemin çalışabileceği bilgilerle getDate() tam olarak aynı olduğunu unutmayın.

Düğmeye tıkladıktan sonra tarih sunucudan belirtilen biçimde alınır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki