JavaScript Kodu Kullanarak Bir Denetimi Dinamik Olarak Doldurma (C#)

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 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. Denetim her web hizmeti çağrısıyla bir bağlam bilgisi parçası gönderdiğinden, contextKeyDynamicPopulate web hizmeti adlı dize türünde bir bağımsız değişken bekleyen yöntemini getDate() uygular. Geçerli tarihi üç biçimden birinde alan kod (dosya DynamicPopulate.cs.asmx) aşağıdadır:

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

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 bu işlemi gerçekleştirecek popülasyonu tetikleyen denetimin adını sağlamayın!

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

Şimdi JavaScript bölümüne. $find() ASP.NET AJAX kitaplığı tarafından tanımlanan işlev, 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. 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. Bu 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)