如何從 ASCX 的 VB 代碼中調用 JavaScript function？

Question

我有一個包含 ASCX 控件的 ASPX 頁面，該控件又引用單獨文件中的腳本。 我希望 ASCX 通過在腳本文件中調用 function 來處理按鈕單擊，但是每當頁面加載時，瀏覽器的調試器都會說找不到 function。

下面的代碼應該是這樣的：加載 ParentPage.aspx 時，它包含 ASCX 控件 Control1.ascx，它有一個按鈕，單擊該按鈕時調用 JavaScript function ShowAnAlert()。 但是，瀏覽器的調試器顯示“意外的標識符‘ShowAnAlert’”。

如何從 ASCX 訪問 function？ 請注意，正在調用點擊處理程序； 那不是問題。

父頁面.aspx：

<%@ Register TagPrefix="ascx" TagName="Control1" Src="~/Control1.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="AuthContent" Runat="Server">
    <div class="page_content">
        <div id="Control1">
            <ascx:Control1 ID="Step1Control" runat="server" />
        </div>
    </div>
</asp:Content>

控件 1.ascx：

<button id="TheButton" text="Click Here" onclick="TheButton_Click" />
<script type="text/javascript" src="Control1Script.js"></script>

控件 1.ascx.vb：

Protected Sub TheButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Alert1", "ShowAnAlert('ShowAnAlert works')", True)
End Sub

Control1Script.js：

function ShowAnAlert(theText) {
    alert(theText);
}

Answer 1

使用腳本管理器

該代碼有多個問題，但我們可以讓它工作。

它不起作用的主要原因是腳本未加載。 在 HTML 頁面上，您使用<script>標記加載腳本，但 ASCX 控件需要使用 ScriptManager 加載腳本。

如下所示修改 Control1.ascx 文件。 它添加了一個帶有調用 JavaScript function 的 OnClientClick 處理程序的 asp:Button 控件。腳本標記替換為 ScriptManagerProxy 控件。 代理告訴主機 ASPX 頁面上的腳本管理器它需要哪些腳本。 這確保即使頁面可能使用多個控件，腳本也只加載一次。

控件1.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Control1.ascx.vb" Inherits="Control1" %>

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return ShowAnAlert('Hello World');"/>

<asp:ScriptManagerProxy runat="server" ID="Manager">
<Scripts>
    <asp:ScriptReference Path="~/Control1Script.js" />
</Scripts>
</asp:ScriptManagerProxy>

然后在 ParentPage.aspx（或母版頁）中，我們需要添加 ScriptManager 控件，如第一行所示。

父頁面.aspx

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

<div id="Control1">
    <ascx:Control1 ID="Step1Control" runat="server" />
</div>

瞧。 當我們運行應用程序並單擊按鈕時，我們現在會看到我們的警告框。

請記住，此解決方案僅展示了您可以使用 ScriptManager 的幾種不同方式中的一種。 要了解更多信息，請參閱： ScriptManager Class

Answer 2

我讓它工作了，但我不得不跳過一兩個箍。

主要問題是，(a) 我應該一直在使用 ClientScriptManager (Page.ClientScript)，(b) 我必須使用 RegisterStartupScript 而不是 RegisterClientScriptBlock（與現有腳本相關的腳本加載時間有關）， (c) 使用 Page.ClientScript.RegisterStartupScript 時，必須包含...標簽。

換句話說，將 Control1.ascx.vb 更改為：

Protected Sub TheButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Page.ClientScript.RegisterStartupScript(Me.GetType(), "Alert", "<script type=""text/javascript"">ShowAnAlert('ShowAnAlert works');</script>")
End Sub