如何在ASP.Net中通过ClientClick触发模态对话框并执行后台代码？

核心思路：由于自定义模态框是异步交互，无法像原生confirm()那样直接返回布尔值控制按钮提交，因此需要先阻止按钮默认的OnClick提交，等用户在模态框确认操作后，再手动触发后台代码执行。

方案1：原生JS自定义模态框实现 #

ASPX页面代码 #

<asp:Button ID="btnSubmit" runat="server" Text="执行操作" OnClick="btnSubmit_Click" OnClientClick="showConfirmModal(); return false;" />

<!-- 自定义模态框 -->
<div id="confirmModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:2rem; background:#fff; border:1px solid #ddd; box-shadow:0 0 10px rgba(0,0,0,0.1);">
    <h4>确认操作</h4>
    <p>是否继续执行后续操作？</p>
    <div style="margin-top:1rem; text-align:right;">
        <button id="modalCancel" style="margin-right:0.5rem; padding:0.3rem 1rem;">取消</button>
        <button id="modalConfirm" style="padding:0.3rem 1rem; background:#007bff; color:#fff; border:none;">确认</button>
    </div>
</div>

JavaScript代码 #

// 显示模态框
function showConfirmModal() {
    document.getElementById('confirmModal').style.display = 'block';
}

// 确认按钮点击事件：关闭模态框并触发后台代码
document.getElementById('modalConfirm').addEventListener('click', function() {
    document.getElementById('confirmModal').style.display = 'none';
    // 调用ASP.NET内置方法触发按钮后台事件
    __doPostBack('<%= btnSubmit.UniqueID %>', '');
});

// 取消按钮点击事件：仅关闭模态框
document.getElementById('modalCancel').addEventListener('click', function() {
    document.getElementById('confirmModal').style.display = 'none';
});

C#后台代码 #

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 这里编写你的后台业务逻辑
    Response.Write("后台代码已执行");
}

方案2：Bootstrap模态框实现（若项目使用Bootstrap） #

ASPX页面代码 #

<asp:Button ID="btnBootstrapSubmit" runat="server" Text="Bootstrap执行" OnClick="btnBootstrapSubmit_Click" OnClientClick="$('#bootstrapModal').modal('show'); return false;" />

<!-- Bootstrap模态框 -->
<div class="modal fade" id="bootstrapModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                是否继续执行后续操作？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="bootstrapConfirm">确认</button>
            </div>
        </div>
    </div>
</div>

JavaScript代码 #

$('#bootstrapConfirm').click(function() {
    $('#bootstrapModal').modal('hide');
    // 触发后台代码
    __doPostBack('<%= btnBootstrapSubmit.UniqueID %>', '');
});

关键说明 #

1. 按钮的OnClientClick必须返回false，阻止默认的后台提交触发，因为模态框交互是异步的，无法即时返回布尔值。
2. __doPostBack是ASP.NET内置函数，第一个参数为目标控件的UniqueID，用于精准触发对应按钮的后台事件。
3. 若使用UpdatePanel局部刷新，需确保__doPostBack能正确触发局部更新，或通过ScriptManager.RegisterPostBackControl方法注册目标按钮。

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