使用 JavaScript 程式碼以動態方式填入控制項 (VB)

作者 ：擷取 Wenz

下載 PDF

ASP.NET AJAX Control Toolkit 中的 DynamicPopulate 控制項會呼叫 Web 服務 (或頁面方法) ，並將產生的值填入頁面上的目標控制項，而不需重新整理頁面。 您也可以使用自訂用戶端 JavaScript 程式碼來觸發母體擴展。

概觀

DynamicPopulateASP.NET AJAX 控制項工具組中的控制項會呼叫 Web 服務 (或頁面方法) ，並將產生的值填入頁面上的目標控制項，而不需重新整理頁面。 您也可以使用自訂用戶端 JavaScript 程式碼來觸發母體擴展。

步驟

首先，您需要 ASP.NET Web 服務，以實作 控制項所呼叫 DynamicPopulateExtender 的方法。 Web 服務會實作預期字串類型的一個引數的方法 getDate() ， contextKey 因為 DynamicPopulate 控制項會為每個 Web 服務呼叫傳送一段內容資訊。 以下是程式碼 (檔案 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 控制項並提供 Web 服務資訊、目標控制項，但不是觸發母體擴展的控制項名稱，稍後會使用自訂 JavaScript 完成！

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

現在，移至 JavaScript 元件。 ASP.NET $find() AJAX 程式庫所定義的函式會傳回 ASP.NET AJAX Control Toolkit 的伺服器端物件的參考，例如 DynamicPopulateExtender 。 在目前的檔案中， $find("dpe") 傳回頁面中一個 DynamicPopulateExtender 控制項的參考。 它會公開稱為 populate() 的方法，以觸發動態母體擴展程式。 方法 populate() 需要一個引數：內容索引鍵，做為 Web 方法的 getDate() 引數。 例如， $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() 完全相同。

按一下按鈕會從伺服器擷取日期，其格式為指定的 (按一下即可檢視完整大小的影像)

上一個下一個