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

作者 ：一個是一個

下載 PDF

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

概觀

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

步驟

首先，您需要 ASP.NET Web 服務，以實作 控制項要呼叫 DynamicPopulateExtender 的方法。 Web 服務會實作 getDate() 預期一個類型字串引數的方法，稱為 contextKey ，因為 DynamicPopulate 控制項會傳送一段內容資訊與每個 Web 服務呼叫。 以下是程式碼 (檔案 DynamicPopulate.cs.asmx) ，以下列三種格式之一擷取目前日期：

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

在下一個步驟中，建立新的 ASP.NET 網站，並從 AJAX ScriptManager 控制項 ASP.NET 開始：

<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.cs.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() 。

按一下按鈕會從伺服器擷取日期，格式 (按一下以檢視完整大小的影像)

上一個下一個