ASP.NET WebForms模态弹出窗口

时间:2014-10-03 06:51:04

标签: c# jquery asp.net twitter-bootstrap webforms

我想知道在ASP.NET WebForms应用程序中显示模式弹出窗口的最佳方法是什么。我需要显示带有2个按钮的模态窗口(确定/取消)并在我的代码中按下按钮。我应该用它来实现它 - 来自AjaxControlToolkit,bootstrap模式弹出窗口或jQuery UI的ModalPopupExtender? 我是ASP.NET WebForms中的新手,所以源代码或教程的示例会派上用场。谢谢!

1 个答案:

答案 0 :(得分:14)

嘿,请使用modalpopupextender检查此代码。但首先,您需要从Nuget包管理器安装AjaxControlToolKit,并将其作为指令添加到.aspx页面顶部作为指令,如下所示:

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

然后这是来自modalpopupextender的代码:

     <asp:Button ID="btnOpenPopUp" runat="server" text="Open PopUp" />
     <asp:Label ID="lblHidden" runat="server" Text=""></asp:Label>
        <ajaxToolkit:ModalPopupExtender ID="mpePopUp" runat="server" TargetControlID="lblHidden" PopupControlID="divPopUp" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

<div id="divPopUp" class="pnlBackGround">
     <div id="Header" class="header" >MyHeader</div>
     <div id="main" class="main">Main PopUp </div>
     <div id="buttons">
          <div id="DivbtnOK" class="buttonOK"><asp:Button id="btnOk" runat="server" text="Ok" /></div>
          <div id="Divbtncancel" class="buttonOK"><asp:Button id="btnCancel" runat="server" text="Cancel" /></div>
     </div>
</div>

然后从按钮打开PopUp的On Click事件后面的Code:

protected void btnOpenPopUp_Click(object sender, ImageClickEventArgs e)
{
     mpePopUp.Show();
}

然后点击Ok Button:

protected void btnOk_Click(object sender, ImageClickEventArgs e) {
      //Do Work

      mpePopUp.Hide(); }

点击取消点击按钮:

protected void btnCancel_Click(object sender, ImageClickEventArgs e)
{
      //Do Work

      mpePopUp.Hide();
}

提示:如果您没有ajax工具包,可以使用Nuget进行安装。