ASP.NET WebForms中模态对话框无法弹出的JavaScript执行问题

API 探路者

2026-4-14

我在使用基于ASPX页面的ASP.NET WebForms应用，需求是这样的：当用户修改费率名称并点击保存按钮后，要弹出一个模态对话框，要求输入必填的工单编号和可选的备注。

在编辑费率名称时会触发文本变更事件，由于显示费率的GridView是动态生成的，我用了一个隐藏TextBox来捕获变更，把修改后的名称存入字典再放到Session里，后台代码如下：

Protected Sub TariffNameChangesTextbox_OnTextChanged(sender As Object, e As EventArgs) Handles TariffNameChangesTextbox.TextChanged
    Dim txtBox As TextBox = TryCast(sender, TextBox)
    If txtBox IsNot Nothing Then

        Dim textboxNr As Integer = DirectCast(txtBox.DataItemContainer, System.Web.UI.WebControls.GridViewRow).RowIndex
        Dim textboxId As String = txtBox.ID
        Dim keyForDict As String = $"{textboxId}_{textboxNr.ToString().PadLeft(3, "0"c)}"

        Dim dictionaryChangedTariffNames As Dictionary(Of String, String) = TryCast(Session("ChangedTariffNames"), Dictionary(Of String, String))
        If dictionaryChangedTariffNames Is Nothing Then
            dictionaryChangedTariffNames = New Dictionary(Of String, String)()
            dictionaryChangedTariffNames.Add(keyForDict, txtBox.Text)
        ElseIf dictionaryChangedTariffNames.Count > 0 AndAlso dictionaryChangedTariffNames.ContainsKey(keyForDict) Then
            dictionaryChangedTariffNames(keyForDict) = txtBox.Text
        Else
            dictionaryChangedTariffNames.Add(keyForDict, txtBox.Text)
        End If

        Session("ChangedTariffNames") = dictionaryChangedTariffNames
    End If
End Sub

现在遇到的问题是：保存按钮是全局的，没法修改，但它会调用母版页（MasterPage.master.vb）里的一个方法，这个方法只针对当前页面执行保存逻辑。我尝试从Session取出字典后，注册启动脚本来触发模态对话框，但脚本就是不执行，模态框弹不出来。脚本文件的路径是正确的，已经在项目目录里了。

编辑：
补充一下细节：VB.NET代码位于MasterPage.master中，但需要弹出对话框的目标页面是tarifnamen.aspx。脚本已经成功加载到HTML里了——我在控制台执行typeof handleSaveButtonClick，返回的是function，说明脚本确实存在，但注册的启动脚本就是不执行，模态框死活弹不出来。

母版页里注册脚本的代码是这样的：

Dim dictionaryChangedTariffNames As Dictionary(Of String, String) = TryCast(Session("ChangedTariffNames"), Dictionary(Of String, String))
If dictionaryChangedTariffNames IsNot Nothing AndAlso dictionaryChangedTariffNames.Count > 0 Then
    Dim cs As ClientScriptManager = Page.ClientScript
    If Not cs.IsStartupScriptRegistered(Me.GetType(), "ModalDialogForTariffRename") Then
        'Page.ClientScript.RegisterStartupScript(Me.GetType(), "ModalDialogForTariffRename", "handleSaveButtonClick();", True)
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "ModalDialogForTariffRename", "$(""Content1"").handleSaveButtonClick();", True)
    End If
    dictionaryChangedTariffNames.Clear()
End If
Session("ChangedTariffNames") = dictionaryChangedTariffNames

我已经在主页面的head标签里引用了对应的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="css/ModalDialogForTariffRename.css" />
<script type="text/javascript" src="js/ModalDialogForTariffRename.js"></script>

在tarifnamen.aspx页面中，我写了模态对话框的HTML结构：

<!-- Modal Dialog für Tarifumbenennung -->
 <div id="tariffRenameModal" class="tariff-name-modaldialog">
    <div class="tariff-name-modaldialog-content">
    <span class="modaldialog-close-btn">&times;</span>
    <h2>Tarif umbenennen – Bitte Ticketnummer und Kommentar angeben</h2>
    
    <label for="ticketNumber">Ticketnummer (Pflichtfeld):</label>
    <input type="text" id="ticketNumber" name="ticketNumber" required />
    <br />

    <label for="comment">Kommentar (optional):</label>
    <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
    <br />

    <button id="saveTicketButton" onclick="saveTariffRenameTicket()">Speichern</button>
    <button onclick="closeTariffRenameModal()">Abbrechen</button>
</div>

对应的CSS文件（ModalDialogForTariffRename.css）内容：

/* Tarifumbenennung Modaldialog */
.tariff-name-modaldialog {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
}

/* Modaldialog-Inhalt */
.tariff-name-modaldialog-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    max-width: 500px;
}

.modaldialog-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .modaldialog-close-btn:hover,
    .modaldialog-close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.tariff-name-modaldialog input[type="text"],
.tariff-name-modaldialog textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.tariff-name-modaldialog textarea {
    resize: vertical;
    min-height: 100px;
}


.tariff-name-modaldialog button {
    background-color: #4CAF50; /* green for saving */
    color: white;
    padding: 10px 20px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

    .tariff-name-modaldialog button:hover {
        background-color: #45a049; /* darker green when hovering */
    }

    /* Abbrechen-Button */
    .tariff-name-modaldialog button:last-child {
        background-color: #f44336; /* red for cancel */
    }

        .tariff-name-modaldialog button:last-child:hover {
            background-color: #e53935; /* darker red when hovering */
        }

JS文件（ModalDialogForTariffRename.js）内容：

function handleSaveButtonClick()
{
    if (window.location.pathname.includes("tarifnamen.aspx")) {
        openModal();
    }
    else
    {
        console.log("Button wird auf einer anderen Seite aufgerufen, Modaldialog wird nicht geöffnet.");
    }
}

function openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = 'block';
}

function showModal()
{
    var modal = document.getElementById("myModal");
    modal.style.display = "block";
}

function closeModal()
{
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}

function saveChanges()
{
    var ticketNumber = document.getElementById("ticketNumber").value;
    var comment = document.getElementById("comment").value;

    if (!ticketNumber)
    {
        alert("Bitte geben Sie eine Ticketnummer ein.");
        return false; // avoids sending when no ticket number is present
    }

    /*alert("Änderungen wurden gespeichert!");*/
    closeModal();
    return true;
}

备注：内容来源于stack exchange，提问作者Daniel