Kullanıcı Denetimi ve JavaScript ile DynamicPopulate Kullanma (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 bir hedef denetime doldurur. Özel istemci tarafı JavaScript kodu kullanarak popülasyonu tetikleme de mümkündür. Ancak genişletici bir kullanıcı denetiminde bulunduğunda özel bir özen gösterilmelidir.

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. Ancak genişletici bir kullanıcı denetiminde bulunduğunda özel bir özen gösterilmelidir.

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.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, ilk satırında aşağıdaki bildirimle belirtilen yeni bir kullanıcı denetimi (.ascx dosyası) oluşturun:

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

<label> Sunucudan gelen verileri görüntülemek için bir öğe kullanılır.

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

Ayrıca kullanıcı denetim dosyasında, her biri web hizmeti tarafından desteklenen üç olası tarih biçiminden birini temsil eden üç radyo düğmesi kullanacağız. Kullanıcı radyo düğmelerinden birine tıkladığında tarayıcı aşağıdakine benzer bir JavaScript kodu yürütür:

$find("mcd1_dpe1").populate(this.value)

Bu kod öğesine erişir DynamicPopulateExtender (henüz garip kimlikle ilgili endişelenmeyin, daha sonra ele alınacaktır) ve verilerle dinamik popülasyonu tetikler. Geçerli radyo düğmesi bağlamında değeri this.value olan format1format2 değerini veya format3 web yönteminin tam olarak beklediği değeri ifade eder.

Kullanıcı denetiminde eksik olan tek şey, radyo düğmelerini web hizmetine bağlayan denetimdir DynamicPopulateExtender .

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

Yine denetimde kullanılan garip kimliği not edebilirsiniz: mcd1$myDate yerine myDate. Daha önce, yerine öğesine erişmek DynamicPopulateExtenderdpe1için kullanılan mcd1_dpe1 JavaScript kodu. Bu adlandırma stratejisi, kullanıcı denetimi içinde kullanılırken DynamicPopulateExtender özel bir gereksinimdir. Ayrıca, kullanıcı denetiminin tümünün çalışmasını sağlamak için belirli bir şekilde eklemeniz gerekir. Yeni bir ASP.NET sayfası oluşturun ve az önce uyguladığınız kullanıcı denetimi için bir etiket ön eki kaydedin:

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>

Ardından ASP.NET AJAX ScriptManager denetimini yeni sayfaya ekleyin:

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

Son olarak, kullanıcı denetimini sayfaya ekleyin. Yalnızca özniteliğini ID (ve runat="server"elbette) ayarlamanız gerekir, ancak bunu belirli bir ada da ayarlamanız gerekir: mcd1 Çünkü bu, JavaScript kullanarak erişmek için kullanıcı denetiminde kullanılan ön ektir.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

Hepsi bu! Sayfa beklendiği gibi davranır: Kullanıcı radyo düğmelerinden birine tıklar, Araç Seti'ndeki denetim web hizmetini çağırır ve geçerli tarihi istenen biçimde görüntüler.

Radyo düğmeleri bir kullanıcı denetiminde bulunur (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki