作者 :克里斯蒂安·溫茲
ASP.NET AJAX 控制工具包中的 DynamicPopulate 控制項呼叫一個網頁服務(或頁面方法),並將所得值填入頁面上的目標控制項,無需頁面重新整理。 也可以使用自訂的客戶端 JavaScript 程式碼來觸發該族群。 然而,當擴展器位於使用者控制中時,必須特別小心。
概觀
DynamicPopulate ASP.NET AJAX 控制工具包中的控制項呼叫網路服務(或頁面方法),並將所得值填入頁面上的目標控制項,無需頁面刷新。 也可以使用自訂的客戶端 JavaScript 程式碼來觸發該族群。 然而,當擴展器位於使用者控制中時,必須特別小心。
Steps
首先,你需要一個 ASP.NET 網路服務,來實作控制項要呼叫 DynamicPopulateExtender 的方法。 網路服務實作 getDate() 了期望一個類型字串參數的方法,該參數稱為 contextKey,因為 DynamicPopulate 控制項在每次網路服務呼叫時都會傳送一段上下文資訊。 以下是用三種格式之一取得當前日期的程式碼(檔案 DynamicPopulate.vb.asmx):
<%@ 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
下一步,建立一個新的使用者控制項(.ascx 檔案),其首行宣告如下:
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
<
label
>一個元素會用來顯示來自伺服器的資料。
<label id="myDate" runat="server" />
在使用者控制檔案中,我們會使用三個單選按鈕,每個按鈕代表網路服務支援的三種可能日期格式之一。 當使用者點擊其中一個單選按鈕時,瀏覽器會執行 JavaScript 程式碼,內容如下:
$find("mcd1_dpe1").populate(this.value)
這段程式碼會存取 DynamicPopulateExtender (暫時不用擔心奇怪的 ID,這部分稍後會說明),並觸發動態填入數據。 在目前的單選按鈕語境中,this.value 代表其值,即 format1、format2 或 format3,這正是網頁方法所期望的值。
目前使用者控制 DynamicPopulateExtender 中唯一缺少的是連結單選按鈕與網路服務的控制項。
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>
你可能會注意到控制中使用的奇怪 ID: mcd1$myDate 取代 myDate。 過去,JavaScript 程式碼使用 mcd1_dpe1 來存取 DynamicPopulateExtender 而非 dpe1。這種命名策略是在使用者控制中使用 DynamicPopulateExtender 時的一個特殊要求。 此外,你必須以特定方式嵌入使用者控制,才能讓整體運作。 建立一個新的 ASP.NET 頁面,並為你剛實作的使用者控制註冊一個標籤前綴:
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>
接著,在新頁面加入 ASP.NET AJAX ScriptManager 控制項:
<asp:ScriptManager ID="asm" runat="server" />
最後,將使用者控制權加入頁面。 你只需要設定它的 ID 屬性(當然還有 runat="server"),但你也必須設定它為特定名稱: mcd1 因為這是使用者控制中用來使用 JavaScript 存取它的前綴。
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
就是這樣! 頁面的行為如預期:使用者點擊其中一個單選按鈕,工具包中的控制項呼叫網路服務,並以所需格式顯示當前日期。
單選按鈕位於用戶控制項中(點擊可查看全尺寸圖片)