ASP.NET运行时使用确认对话框并获取结果的实现方案

嗨，这个问题太常见啦——毕竟MessageBox是WinForms/WPF那套桌面程序的玩意儿，ASP.NET是跑在服务器上的网页应用，肯定没法直接弹客户端的对话框呀。咱们得用前端的方案来实现确认功能，下面给你几个实用的办法，按需选就行：

这是最省事的方案，直接用浏览器自带的确认对话框，代码改起来超简单：

给你的ASP.NET删除按钮加上OnClientClick属性，返回confirm()的结果——用户点YES（确定）时返回true，会继续触发服务器端的删除函数；点NO（取消）时返回false，直接终止操作，不会提交到服务器。

示例代码：

<asp:Button ID="btnDelete" runat="server" Text="Delete" 
    OnClientClick="return confirm('确定要删除这条记录吗？此操作不可恢复！');" 
    OnClick="btnDelete_Click" />

服务器端的btnDelete_Click方法该怎么写就怎么写，只有用户确认后才会执行。

如果觉得原生confirm的样式太丑，想自定义YES/NO按钮的样式、对话框内容，用Bootstrap的模态框就很合适：

1. 先在页面里添加模态框的HTML结构：

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalTitle">确认删除</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">NO</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">YES</button>
      </div>
    </div>
  </div>
</div>

2. 修改删除按钮，不让它直接提交，而是触发模态框弹出：

<asp:Button ID="btnDelete" runat="server" Text="Delete" 
    OnClientClick="$('#deleteConfirmModal').modal('show'); return false;" />

3. 加一段JavaScript代码，监听YES按钮的点击事件，确认后手动触发服务器端的删除操作：

$(document).ready(function() {
    $('#confirmDeleteBtn').click(function() {
        $('#deleteConfirmModal').modal('hide');
        // 触发服务器端的删除按钮事件
        __doPostBack('<%= btnDelete.UniqueID %>', '');
    });
});

这样用户点删除按钮会弹出样式好看的自定义对话框，点YES就提交执行删除逻辑，点NO就关闭对话框啥也不做。

如果你的项目是比较老的ASP.NET WebForms，也可以用AJAX Control Toolkit里的ModalPopupExtender来实现服务器端控制的模态框：

1. 先在页面添加ScriptManager和模态框面板：

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

<!-- 确认对话框面板 -->
<asp:Panel ID="pnlDeleteConfirm" runat="server" CssClass="modalPanel" Style="display:none;">
    <h3>确认删除</h3>
    <p>你确定要执行删除操作吗？</p>
    <asp:Button ID="btnConfirmYes" runat="server" Text="YES" OnClick="btnConfirmYes_Click" />
    <asp:Button ID="btnConfirmNo" runat="server" Text="NO" OnClick="btnConfirmNo_Click" />
</asp:Panel>

<!-- 模态框扩展器 -->
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    TargetControlID="btnDelete"
    PopupControlID="pnlDeleteConfirm"
    CancelControlID="btnConfirmNo"
    BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

<!-- 原删除按钮 -->
<asp:Button ID="btnDelete" runat="server" Text="Delete" />

2. 在服务器端写对应的事件处理方法：

protected void btnConfirmYes_Click(object sender, EventArgs e)
{
    // 这里写你的删除逻辑
    // ...
    
    // 删除完成后关闭模态框
    ModalPopupExtender1.Hide();
}

protected void btnConfirmNo_Click(object sender, EventArgs e)
{
    // 取消删除，关闭模态框
    ModalPopupExtender1.Hide();
}

这个方案适合老项目，不需要写太多前端代码，用服务器控件就能搞定。

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