ASP.NET Web Forms点击按钮模态框不显示问题求助

问题核心 #

点击GridView内的服务器端编辑按钮会触发整页回发，页面重新加载，导致服务器端注册的显示模态框脚本因刷新时序问题无法正常执行；若使用UpdatePanel但配置不当，也会引发脚本失效。

解决方案1：无回发AJAX方案（推荐，体验更流畅） #

1. 修改GridView编辑按钮 #

将服务器端按钮改为非提交行为，添加客户端点击事件并阻止回发：

<asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="btn-edit" 
            UseSubmitBehavior="false"
            OnClientClick="openEditModal('<%# Eval("TaskID") %>'); return false;" />

• UseSubmitBehavior="false"：让按钮生成普通<button>标签而非<input type="submit">
• return false：阻止服务器端回发

2. 编写AJAX获取数据并显示模态框的JS函数 #

function openEditModal(taskId) {
    $.ajax({
        url: '<%= ResolveUrl("~/YourPage.aspx/GetTaskDetails") %>',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ taskId: taskId }),
        success: function(response) {
            var task = response.d;
            // 填充模态框控件值
            $('#<%= utxtTitle.ClientID %>').val(task.Title);
            $('#<%= utxtDescription.ClientID %>').val(task.Description);
            $('#<%= uddlCategory.ClientID %>').val(task.CategoryID);
            $('#<%= utxtStartDate.ClientID %>').val(task.StartDate);
            $('#<%= utxtEndDate.ClientID %>').val(task.EndDate);
            $('#<%= uchkIsActive.ClientID %>').prop('checked', task.IsActive);
            
            // 显示模态框
            $('#uupdateTaskModal').modal('show');
        },
        error: function(xhr, status, error) {
            console.error('加载任务数据失败:', error);
        }
    });
}

3. 后端添加WebMethod返回任务数据 #

using System.Web.Services;

[WebMethod]
public static clsTask GetTaskDetails(int taskId)
{
    return clsTasks.Find(taskId);
}

注意：clsTask类需添加[Serializable]特性，确保能序列化为JSON。

解决方案2：修复回发后的模态框显示（保留服务器端回发） #

1. 替换脚本注册方式 #

使用ScriptManager注册脚本（支持UpdatePanel场景）：

protected void gvTasks_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "EditTask")
    {
        EditTask(Convert.ToInt32(e.CommandArgument));
        // 用ScriptManager替代ClientScript，兼容UpdatePanel
        string script = "$('#uupdateTaskModal').modal('show');";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowModal", script, true);
    }
}

2. 正确配置UpdatePanel #

将GridView和模态框放入同一个UpdatePanel，确保异步回发后控件和脚本正常执行：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="table-wrapper">
            <asp:GridView ID="gvTasks" runat="server" AutoGenerateColumns="False" CssClass="custom-table" OnRowCommand="gvTasks_RowCommand">
                <!-- GridView原有列配置 -->
            </asp:GridView>
        </div>

        <!-- 模态框代码 -->
        <div class="modal fade" id="uupdateTaskModal" tabindex="-1" aria-labelledby="uupdateTaskModalLabel" aria-hidden="true">
            <!-- 模态框原有内容 -->
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="gvTasks" EventName="RowCommand" />
    </Triggers>
</asp:UpdatePanel>

3. 确保AJAX回发后Bootstrap模态框正常初始化 #

添加JS监听页面异步回发完成事件，重新触发模态框显示：

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
        // 检查是否有注册的显示模态框脚本并执行
        var modalScript = $('#ShowModal');
        if (modalScript.length > 0) {
            eval(modalScript.text());
        }
    });
});

额外检查点 #

• 确认模态框IDuupdateTaskModal与JS选择器完全一致，无拼写错误
• 页面已正确加载jQuery和Bootstrap JS文件
• 修正EditTask方法中DropDownList赋值逻辑：将uddlCategory.SelectedIndex = TheTask.CategoryID改为uddlCategory.SelectedValue = TheTask.CategoryID.ToString()（SelectedIndex是索引，SelectedValue才是值匹配）

内容的提问来源于stack exchange，提问作者Ahmed Babader