作者 :克里斯蒂安·溫茲
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
下一步,建立一個新的 ASP.NET 站點,並從 ASP.NET AJAX ScriptManager 控制項開始:
<asp:ScriptManager ID="asm" runat="server" />
接著,新增一個標籤控制項(例如使用同名的 HTML 控制項,或 <asp:Label /> 是 Web 控制項),之後會顯示該 Web 服務呼叫的結果。
<label id="myDate" runat="server" />
接著,包含 DynamicPopulateExtender 一個控制項並提供網路服務資訊、目標控制,但不提供觸發人口的控制名稱,這將在後續使用自訂 JavaScript 來完成!
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
ServiceMethod="getDate" />
現在談談 JavaScript 部分。 該 $find() 函式由 ASP.NET AJAX 函式庫定義,回傳 ASP.NET AJAX 控制工具包中伺服器端物件的參考,例如 DynamicPopulateExtender。 在目前檔案中,$find("dpe") 傳回頁面中唯一的 DynamicPopulateExtender 控制項參考。 它揭露了一種稱為 populate() 觸發動態族群過程的方法。 此 populate() 方法需要一個參數:上下文鍵,作為 getDate() Web 方法的參數。 例如, $find("dpe").populate("format1") 標籤中會以月份-日-年格式填入當前日期。
為了讓樣本更具彈性,使用者現在可以在多種日期格式中選擇。 每一個項目都會顯示一個單選按鈕。 使用者點擊單一按鈕後,JavaScript 程式碼會動態地將所選日期格式填入標籤。 以下是這些單選按鈕:
<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>
請注意,JavaScript 表達式 this.value 在單選按鈕的情境中指的是當前按鈕的值,這正好是 getDate() 方法可以處理的相同資訊。
點擊按鈕即可從伺服器取得指定格式的日期(點擊查看全尺寸圖片)