使用具有使用者控制項的 DynamicPopulate 和 JavaScript (C#)

發行項
07/13/2023

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;
 }
}

在下一個步驟中，建立新的使用者控制項 (.ascx 檔案) ，以第一行中的下列宣告表示：

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

元素 <label> 將用來顯示來自伺服器的資料。

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

此外，在使用者控制檔案中，我們將使用三個選項按鈕，每一個按鈕都代表 Web 服務支援的三種可能日期格式之一。當使用者按一下其中一個選項按鈕時，瀏覽器會執行如下所示的 JavaScript 程式碼：

$find("mcd1_dpe1").populate(this.value)

此程式碼會 DynamicPopulateExtender 存取 (還不必擔心奇怪的識別碼，稍後會討論) 並觸發動態母體擴展的資料。在目前選項按鈕的內容中， this.value 會參考其值為， format2 或 format3 Web 方法預期的確切值 format1 。

使用者控制項中唯一遺漏的專案是 DynamicPopulateExtender 將選項按鈕連結至 Web 服務的控制項。

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

同樣地，您可能會注意到控制項中使用的奇怪識別碼： mcd1$myDate 而不是 myDate 。先前，用來 mcd1_dpe1 存取而非的 DynamicPopulateExtenderdpe1 JavaScript 程式碼。此命名策略是在使用者控制項內使用 DynamicPopulateExtender 時的特殊需求。此外，您必須以特定方式內嵌使用者控制項，才能讓它全部運作。建立新的 ASP.NET 網頁，並為您剛實作的使用者控制項註冊標籤前置詞：

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>

然後，在新頁面上包含 ASP.NET AJAX ScriptManager 控制項：

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

最後，將使用者控制項新增至頁面。您只需要設定其 ID 屬性 (和 runat="server" ，當然) ，但您也必須將其設定為特定名稱： mcd1 因為這是使用者控制項內用來使用 JavaScript 存取它的前置詞。

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

就這麼簡單！頁面會如預期般運作：使用者按一下其中一個選項按鈕，工具組中的控制項會呼叫 Web 服務，並以所需的格式顯示目前的日期。

選項按鈕位於使用者控制項中， (按一下即可檢視完整大小的影像)

上一個下一個

共用方式為

使用具有使用者控制項的 DynamicPopulate 和 JavaScript (C#)

概觀

步驟

意見反應

其他資源