ASP.NET WebForms Modal Popup window

Question

I want to know what is the best way to show modal popup windows in ASP.NET WebForms application. I need to display modal window with 2 buttons (OK/Cancel) and get pressed bu

Answer 1

Hey check this code using modalpopupextender. But first, you'll need to install AjaxControlToolKit from the Nuget Package Manager and add it as an assembly reference at the top of your .aspx page as a directive, like this:

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

Then here is the code from the 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>

then from Code behind On Click event of the button Open PopUp :

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

then on click of Ok Button :

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

    mpePopUp.Hide(); }

On Cancel click button :

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

    mpePopUp.Hide();
}

Tip: If you don't have the ajax toolkit it can be installed with Nuget.