動態填入控制項 (VB)

作者 :克里斯蒂安·溫茲

下載 PDF

ASP.NET AJAX 控制工具包中的 DynamicPopulate 控制項呼叫一個網頁服務(或頁面方法),並將所得值填入頁面上的目標控制項,無需頁面重新整理。

概觀

DynamicPopulate ASP.NET AJAX 控制工具包中的控制項呼叫網路服務(或頁面方法),並將所得值填入頁面上的目標控制項,無需頁面刷新。 這個教學示範了如何設定這個功能。

Steps

首先,你需要一個 ASP.NET 網路服務,它實作了 DynamicPopulate 將呼叫的方法。 網路服務類別需要定義在 Microsoft.Web.Script.Services 的 ScriptService 屬性,否則 ASP.NET AJAX 無法為網路服務建立客戶端 JavaScript 代理,而 DynamicPopulate 則需要該代理。

網頁方法必須預期有一個型別字串的參數,稱為 contextKey,因為 DynamicPopulate 控制項在每次網路服務呼叫時都會傳送一段上下文資訊。 以下網路服務以參數表示的格式 contextKey 回傳當前日期:

<%@ 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

網路服務隨後儲存為 DynamicPopulate.vb.asmx。 或者,你也可以在包含 DynamicPopulate 控制項的實體 ASP.NET 頁面中,將 getDate() 方法作為頁面方法來實作。

下一步,建立一個新的 ASP.NET 檔案。 一如往常,第一步是在當前頁面中包含 , ScriptManager 以載入 ASP.NET AJAX 函式庫並讓控制工具包正常運作:

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

接著,新增一個標籤控制項(例如使用同名的 HTML 控制項,或 <asp:Label /> web 控制項),之後會顯示網路服務呼叫的結果。

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

接著會用一個 HTML 按鈕(作為 HTML 控制項,因為我們不需要回傳到伺服器)來觸發動態人口:

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

最後,我們需要 DynamicPopulateExtender 控制器來進行連線。 以下屬性將被設定(除了明顯的屬性外), ID 以及 runat="server":

  • TargetControlID 將網路服務呼叫結果放在哪裡
  • ServicePath 網路服務的路徑 (若想使用頁面方法則省略)
  • ServiceMethod 網頁方法名稱或頁面方法名稱
  • ContextKey 要傳送到網路服務的上下文資訊
  • PopulateTriggerControlID 觸發 Web 服務呼叫的元素
  • ClearContentsDuringUpdate 是否在網路服務呼叫時清空目標元素

如你所見,控制需要一些資訊,但要把所有東西放到位其實很簡單。 以下是目前情境下控制點 DynamicPopulateExtender 的標記:

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

在瀏覽器中執行 ASP.NET 頁面並點擊按鈕;您將收到以月日年格式呈現的當前日期。

點擊按鈕即可從伺服器取得日期

點擊按鈕即可從伺服器取得日期(點擊查看全尺寸圖片)