ASP按钮触发模态框时无法调用后台方法且需保持模态框不消失

问题现状 #

• 点击按钮可正常打开Bootstrap模态框，但无法触发指定的后台btnEditar_Click方法；即便触发，页面回发也会导致模态框消失
• 尝试的两种按钮写法中，第二个存在拼写错误：runar="server"应为runat="server"

修复与解决方案 #

1. 先修正按钮的基础错误 #

将第二个按钮的拼写错误修正，确保服务器端事件能被识别：

<button type="button" class="btn btn-block" data-toggle="modal" Width="200px" runat="server" OnServerClick="btnEditar_Click" data-target="#exampleModal1">EDITAR</button>

修正后点击按钮会触发后台方法，但仍会因页面回发导致模态框消失，需按以下方案处理。

方案一：回发后重新唤起模态框 #

在后台方法执行完成后，注册客户端脚本，让页面加载完成后自动重新打开模态框：

修改后台btnEditar_Click方法，在末尾添加脚本注册代码：

Protected Sub btnEditar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
    ' 原有的数据查询、控件赋值代码保持不变
    txtTempProd.Text = var1
    txtTempCam.Text = var2
    txtVelAgi.Text = var3
    txtIntAgi.Text = var4
    txtTiempoMinutos.Text = var5

    ' 注册脚本，页面加载完成后重新显示模态框
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowModal", "$('#exampleModal1').modal('show');", True)
End Sub

注意：如果页面使用了UpdatePanel，需确保按钮和模态框相关控件在UpdatePanel范围内，上述代码已兼容UpdatePanel场景。

方案二：AJAX无刷新调用后台方法（体验更优） #

通过AJAX异步调用后台方法，避免整页回发，模态框全程保持显示，同时完成数据更新：

步骤1：将后台方法改为WebMethod

修改后台代码，将方法改为静态WebMethod，返回需要的配方数据：

Imports System.Web.Services

<WebMethod()>
Public Shared Function GetRecipeData() As Dictionary(Of String, String)
    Dim result As New Dictionary(Of String, String)()
    Dim var1 = "TemperaturaProducto"
    Dim var2 = "TemperaturaCamisa"
    Dim var3 = "VelocidadAgitacion"
    Dim var4 = "IntensidadAgitacion"
    Dim var5 = "Tiempo"
    Dim var6 = "FindePaso"
    Dim constr As String = ConfigurationManager.ConnectionStrings("RECETAConnectionString").ConnectionString
    Dim query As String = "select * from " & Module1.Rnom.ToString & "_V" & Module1.verc.ToString

    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            Using sda As New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using ds As New DataSet()
                    sda.Fill(ds)
                    result(var1) = ds.Tables(0).Rows(0)(var1).ToString
                    result(var2) = ds.Tables(0).Rows(0)(var2).ToString
                    result(var3) = ds.Tables(0).Rows(0)(var3).ToString
                    result(var4) = ds.Tables(0).Rows(0)(var4).ToString
                    result(var5) = ds.Tables(0).Rows(0)(var5).ToString
                    result(var6) = ds.Tables(0).Rows(0)(var6).ToString
                End Using
            End Using
        End Using
    End Using

    Return result
End Function

步骤2：修改前端按钮并添加AJAX脚本

将按钮改为普通HTML按钮，绑定AJAX调用函数：

<button type="button" class="btn btn-block" data-toggle="modal" data-target="#exampleModal1" onclick="loadRecipeData()">EDITAR</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function loadRecipeData() {
    $.ajax({
        type: "POST",
        url: "你的页面文件名.aspx/GetRecipeData", // 替换为实际页面路径
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            var data = response.d;
            // 更新模态框内的文本框内容
            $('#txtTempProd').val(data.TemperaturaProducto);
            $('#txtTempCam').val(data.TemperaturaCamisa);
            $('#txtVelAgi').val(data.VelocidadAgitacion);
            $('#txtIntAgi').val(data.IntensidadAgitacion);
            $('#txtTiempoMinutos').val(data.Tiempo);
        },
        error: function(xhr, status, error) {
            console.error("配方数据加载失败：" + error);
        }
    });
}
</script>

注意：确保模态框内文本框的ID与脚本中的ID完全一致，且页面已引用jQuery库（若已有引用可跳过重复引入）。

方案对比 #

• 方案一实现简单，适合快速修复，依赖页面回发后重新渲染模态框
• 方案二无刷新，交互体验更好，模态框全程保持显示，推荐用于对体验要求高的场景

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