How to Create Ajax Modal Popup Extender in Asp.Net

Description:-

In this Article we will Explain how to Crate Ajax Model Popup Extender in Webpage without Postback page. We will Use Button Control to Show Model Popup and Without Postback we will Use Model Popup in Webpage when we close it then we have to Postback our page so let’s start how to Achieve this functionality in dot net.

Default.aspx:-

<cc1:toolkitscriptmanager runat="server">
</cc1:toolkitscriptmanager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<!-- ModalPopupExtender -->
<cc1:modalpopupextender id="mp1" runat="server" popupcontrolid="Panel1" targetcontrolid="btnShow"
   cancelcontrolid="btnClose" backgroundcssclass="modalBackground">
</cc1:modalpopupextender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
   <div style="height: 100px">
      Do you like this product?&nbsp;
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
         <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
         <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
         <asp:ListItem Text="No" Value="2"></asp:ListItem>
      </asp:DropDownList>
   </div>
   <asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>

Here we have set OnSelectedIndexChanged Property of DropDownList and Bind ModelPopup Exteder by Close in Model Popup.

Register AjaxControlToolKit in your Webpage.

<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"Tagprefix="cc1"%>

Style:-

<style type="text/css">
   body
   {
   font-family: Arial;
   font-size: 10pt;
   }
   .modalBackground
   {
   background-color: Black;
   filter: alpha(opacity=90);
   opacity: 0.8;
   }
   .modalPopup
   {
   background-color: #fff;
   border: 3px solid #ccc;
   padding: 10px;
   width: 300px;
   }
</style>

On Code behind File we have to Change DropDownList Control Event and bind Popup Extender Controls.

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
   mp1.Show();
}

Now Run your Application and Click on Button to Show Popup a Changed your Selection from DropDownList and Click on Close.

Author : Umesh Patel

Related Posts