使用 JavaScript 程式碼(VB)動態填充控制項

作者 :克里斯蒂安·溫茲

下載 PDF

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() 方法可以處理的相同資訊。

點擊按鈕即可從伺服器取得指定格式的日期

點擊按鈕即可從伺服器取得指定格式的日期(點擊查看全尺寸圖片