如何在ASP.NET Web应用中制作弹出窗口并在后台获取其收集的数据

一、弹窗实现（两种常用方案） #

方案1：使用AJAX Control Toolkit 的 ModalPopupExtender 控件 #

适合习惯用原生ASP.NET服务端控件的场景：

• 首先项目安装AJAX Control Toolkit包，页面头部注册控件：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

• 页面中添加弹窗触发按钮、弹窗容器、模态框控件：

<!-- 触发按钮 -->
<asp:Button ID="btnOpenFilter" runat="server" Text="打开筛选" CssClass="btn btn-primary" />

<!-- 弹窗容器，默认隐藏 -->
<asp:Panel ID="pnlFilter" runat="server" CssClass="filter-modal" style="display:none;padding:20px;width:400px;background:#fff;border-radius:8px;">
    <h4>筛选条件</h4>
    <div style="margin:15px 0;">
        <label>食堂区域：</label>
        <asp:DropDownList ID="ddlCanteenArea" runat="server" AppendDataBoundItems="true">
            <asp:ListItem Text="全部" Value="" />
            <asp:ListItem Text="一楼食堂" Value="1" />
            <asp:ListItem Text="二楼食堂" Value="2" />
        </asp:DropDownList>
    </div>
    <div style="margin:15px 0;">
        <label>用餐日期：</label>
        <asp:TextBox ID="txtMealDate" runat="server" TextMode="Date" />
    </div>
    <div style="margin-top:20px;text-align:right;">
        <asp:Button ID="btnConfirmFilter" runat="server" Text="确认筛选" OnClick="btnConfirmFilter_Click" CssClass="btn btn-success" />
        <asp:Button ID="btnCancelFilter" runat="server" Text="取消" CssClass="btn btn-default" />
    </div>
</asp:Panel>

<!-- 模态框控件 -->
<ajaxToolkit:ModalPopupExtender ID="mpeFilter" runat="server"
    TargetControlID="btnOpenFilter"
    PopupControlID="pnlFilter"
    CancelControlID="btnCancelFilter"
    BackgroundCssClass="modal-background" />

方案2：使用Bootstrap模态框（更灵活，无需额外服务端控件） #

适合前端自定义程度高的场景，本地引入Bootstrap的css和js即可使用：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
    打开筛选
</button>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="filterModalLabel">筛选条件</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          <div class="mb-3">
              <label class="form-label">餐次类型：</label>
              <asp:DropDownList ID="ddlMealType" runat="server" CssClass="form-select" AppendDataBoundItems="true">
                  <asp:ListItem Text="全部" Value="" />
                  <asp:ListItem Text="早餐" Value="1" />
                  <asp:ListItem Text="午餐" Value="2" />
                  <asp:ListItem Text="晚餐" Value="3" />
              </asp:DropDownList>
          </div>
          <div class="mb-3">
              <label class="form-label">餐品关键词：</label>
              <asp:TextBox ID="txtFoodKeyword" runat="server" CssClass="form-control" />
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <asp:Button ID="btnConfirmFilter" runat="server" Text="确认筛选" CssClass="btn btn-primary" OnClick="btnConfirmFilter_Click" />
      </div>
    </div>
  </div>
</div>

二、后台Code Behind获取弹窗输入数据 #

两种方案的后台取值逻辑完全一致，直接在确认按钮的点击事件中访问对应服务端控件的属性即可：

protected void btnConfirmFilter_Click(object sender, EventArgs e)
{
    // 取值示例，根据你实际的控件ID调整
    string selectArea = ddlCanteenArea.SelectedValue;
    string mealDate = txtMealDate.Text.Trim();
    string mealType = ddlMealType.SelectedValue;
    string keyword = txtFoodKeyword.Text.Trim();

    // 此处添加你的筛选逻辑，比如绑定食堂餐品列表、消费记录列表等
    // BindCanteenData(selectArea, mealDate, mealType, keyword);

    // 如果是用Bootstrap模态框，筛选完成后可执行前端代码关闭弹窗
    ClientScript.RegisterStartupScript(this.GetType(), "closeModal", "$('#filterModal').modal('hide');", true);
}

三、注意事项 #

• Page_Load事件中给弹窗内的下拉列表绑定数据源时，一定要套if(!IsPostBack)判断，否则回发时会覆盖用户选择的内容
• 如果使用了UpdatePanel做局部刷新，需要将确认按钮注册为异步回发触发器，避免整页刷新导致弹窗自动关闭
• 可以搭配ASP.NET自带的RequiredFieldValidator、RangeValidator等控件做输入校验，避免后台拿到无效的筛选参数
• 多页面需要用到同类型筛选弹窗时，可以把弹窗内容封装为.ascx用户控件，直接复用即可

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