JavaScript Kodu Kullanarak Denetimi Dinamik Olarak Doldurma (VB)

tarafından Christian Wenz

PDF'i indirin

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

Öncelikle, DynamicPopulateExtender denetimi tarafından çağrılmak üzere yöntemi uygulayan bir ASP.NET Web Hizmetine ihtiyacınız var. Web hizmeti, her web hizmeti çağrısıyla bir bağlam bilgisi parçası gönderen DynamicPopulate kontrolü nedeniyle, bir contextKey dize türünde bağımsız değişken bekleyen getDate() yöntemini 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" />

Bir DynamicPopulateExtender denetim ekleyin ve web hizmeti bilgileri ile hedef denetimi belirtin, ancak popülasyonu başlatan denetimin adını özel JavaScript kullanarak daha sonra belirteceğiz.

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

Şimdi JavaScript bölümüne. $find() fonksiyonu, ASP.NET AJAX kitaplığı tarafından tanımlanır ve ASP.NET AJAX Denetim Araç Seti'nin sunucu tarafı nesnelerine, DynamicPopulateExtender gibi, bir başvuru döndürür. Geçerli dosyada, $find("dpe") sayfa üzerindeki tek DynamicPopulateExtender denetime başvuru döndürür. Dinamik popülasyon işlemini tetikleyen adlı populate() bir yöntemi kullanıma sunar. populate() yöntemi bir bağımsız değişken gerektirir: web yöntemine getDate() bağımsız değişken olarak görev yapacak bağlam anahtarı. Örneğin, $find("dpe").populate("format1") etiketi ay-gün-yıl biçimindeki geçerli tarihle 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çili 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 tam olarak aynı olduğunu getDate() 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