Post
Ask Question

How to Create ModalPopUp Control in ASP.Net AJAX

details

Requirements

  • First we need to create a ModalPopUp control.
  • Perform the Data Validation.
  • Savi the data to the database.
  • Show the saved data in a GridView.

Database Table Structure

  1. create table tbl_ModalPopUp_Sample  
  2. (  
  3.    ID int identity primary key,  
  4.    UserName varchar(50),  
  5.    Mobile_No bigint  
  6. )  
Procedure 
  • Design the Form.
  • For this design I am using the UserControl of ASP.Net.
  • Drag a Modal Popup to the form.
  • Sets its Property.

      1. CancelControlID="btnClose"  
      1. TargetControlID="LinkButton1"  
      1. BackgroundCssClass="modalBackground"  
      1. DropShadow="True"  
      1. PopupControlID="ModalBox" (The ID of the Panel or DIV)  

 

  1. <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"   
  2.     CancelControlID="btnClose" PopupControlID="ModalBox"   
  3.     TargetControlID="LinkButton1" BackgroundCssClass="modalBackground"   
  4.     DropShadow="True">  
  5.     </asp:ModalPopupExtender>  
We must call the ID of the Panel or DIV at the ModalPopUp PopupControlID=" " property that we want to show as the design of the ModalPopUp Control.

CSS Class For ModalPopUp
  1. .modalBackground  
  2.  {         
  3.      background-color: #336699;  
  4.      filter: alpha(opacity=80);  
  5.      opacity: 0.8;  
  6.  }   
  7.   
  8.  .modalBackground:hover    
  9.  {  
  10.      background-color : #CC3300;  
  11.  }  

After adding ModalPopUp

You will find this Page Directive at the page level after adding the ModalPopUp: 

  1. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
Layout of the design

Lay Out Of The Design

Complete Design
  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Modal_Pooup_Control.ascx.cs" Inherits="Ajax_User_Controls_Modal_Pooup_Control" %>  
  2. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  3.      <style type="text/css">  
  4.          
  5.         .Clear  
  6.         {  
  7.             clear:both;  
  8.         }  
  9.           
  10.         .logButton  
  11.         {  
  12.           width: 100px;  
  13.           height: 30px;  
  14.           background-color: #FB5F67;  
  15.           font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;   
  16.             font-variant: normal; text-transform: capitalize; color: #FFFFFF;       
  17.         }  
  18.         a:hover {color:#FF00FF;}  
  19.         a:link    {color:blue;}  
  20.         a:visited {color:green;}  
  21.         a:active  {color:yellow;}  
  22.           
  23.         input[type="submit"]:hover {  
  24.     background:#0000FF;  
  25. }  
  26.   
  27.         .LoginBox  
  28.         {  
  29.             margin: 10px;  
  30.             height: 270px;  
  31.             background-color: #FB5F67;  
  32.         }  
  33.         .Heading  
  34.         {  
  35.             margin: 10px;  
  36.             height: 15px;  
  37.             background-color: #FFFFFF;  
  38.             font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; font-style: normal;   
  39.             font-variant: normal; text-transform: capitalize; color: #6C6B6B;   
  40.             text-align: center;  
  41.             padding: 4px;  
  42.         }  
  43.   
  44.         .InnerLogin  
  45.         {  
  46.             margin: 10px;  
  47.             margin-right: 5px;  
  48.             width: 320px;  
  49.             height: 250px;  
  50.             float: left;  
  51.             background-color: White;  
  52.         }  
  53.         .NewUserBox  
  54.         {  
  55.             margin: 10px;  
  56.             margin-left: 5px;          
  57.             width: 330px;  
  58.             height: 250px;  
  59.             float: left;  
  60.             background-color: White;  
  61.         }  
  62.   
  63.         .ClickButton  
  64.         {  
  65.           width: 100px;  
  66.           height: 30px;  
  67.           background-color: #339933;  
  68.           font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;   
  69.           font-variant: normal; text-transform: capitalize; color: #FFFFFF;       
  70.         }  
  71.                  
  72.          .ContentInside  
  73.          {  
  74.              margin: 10px;  
  75.          }  
  76.           
  77.      .TextBoxSize  
  78.          {  
  79.              width: 200px;  
  80.          }  
  81.   
  82.      .SmallTextBox  
  83.          {  
  84.             width: 100px;    
  85.          }  
  86.            
  87.          .DropDownSize  
  88.          {  
  89.            width: 255px;  
  90.            height: 23px;    
  91.          }  
  92.      .ContentMiddle  
  93.          {  
  94.              margin: 0px auto;  
  95.              height: auto;  
  96.              width: 500px;  
  97.          }  
  98.           
  99.          .LeftHeading  
  100.          {  
  101.              font-family: Arial, Helvetica, sans-serif;  
  102.              font-size: 14px;  
  103.              font-weight: bold;  
  104.              font-style: normal;  
  105.              font-variant: normal;  
  106.              text-transform: capitalize;  
  107.              color: #CC3300;  
  108.              text-align: left;  
  109.          }  
  110.   
  111.      .SubHeadingLeft  
  112.          {  
  113.              margin: 10px;  
  114.              height: 15px;  
  115.              padding: 4px;  
  116.              background-color: #999999;  
  117.              font-family: Arial, Helvetica, sans-serif;  
  118.              font-size: 12px;  
  119.              font-weight: bold;  
  120.              font-style: normal;  
  121.              font-variant: normal;  
  122.              text-transform: capitalize;  
  123.              color: #FFFFFF;  
  124.              text-align: left;  
  125.          }  
  126.   
  127.     .SmallButton  
  128.         {  
  129.           width: 70px;  
  130.           height: 30px;  
  131.           background-color: #666633;  
  132.           font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;   
  133.           font-variant: normal; text-transform: capitalize; color: #FFFFFF;       
  134.         }  
  135.     .modalBackground  
  136.     {         
  137.         background-color: #336699;  
  138.         filter: alpha(opacity=80);  
  139.         opacity: 0.8;  
  140.     }         
  141.   
  142.       .modalBackground:hover    
  143.       {  
  144.           background-color : #CC3300;  
  145.           }  
  146.          .style1  
  147.          {  
  148.              width: 20px;  
  149.          }  
  150.          .style3  
  151.          {  
  152.              width: 4px;  
  153.          }  
  154.          .style4  
  155.          {  
  156.              width: 5px;  
  157.              color: Red;  
  158.          }  
  159.           
  160.           
  161.          .style5  
  162.          {  
  163.              width: 525px;  
  164.          }  
  165.           
  166.           
  167.          .style6  
  168.          {  
  169.              height: 34px;  
  170.          }  
  171.          .style7  
  172.          {  
  173.              width: 525px;  
  174.              height: 34px;  
  175.          }  
  176.          .style8  
  177.          {  
  178.              height: 23px;  
  179.          }  
  180.           
  181.           
  182.          .style9  
  183.          {  
  184.              width: 136px;  
  185.          }  
  186.          .style10  
  187.          {  
  188.              height: 34px;  
  189.              width: 136px;  
  190.          }  
  191.          .style12  
  192.          {  
  193.              height: 34px;  
  194.              width: 20px;  
  195.          }  
  196.          .style14  
  197.          {  
  198.              height: 34px;  
  199.              width: 4px;  
  200.          }  
  201.          .style15  
  202.          {  
  203.              width: 120px;  
  204.          }  
  205.           
  206.           
  207.     </style>  
  208. <div class="Heading">  
  209.     ModalPouUp Control</div>  
  210. <div class="ContentInside">  
  211.     <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">  
  212.     </asp:ScriptManagerProxy>  
  213. </div>  
  214. <div class="ContentInside">  
  215.     <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">  
  216.     <ContentTemplate>  
  217.     <table style="width:100%;">  
  218.         <tr>  
  219.             <td class="style1">  
  220.                  </td>  
  221.             <td class="style9">  
  222.                  </td>  
  223.             <td class="style3">  
  224.                  </td>  
  225.             <td class="style5">  
  226.                  </td>  
  227.             <td>  
  228.                  </td>  
  229.         </tr>  
  230.         <tr>  
  231.             <td class="style12">  
  232.                 </td>  
  233.             <td class="style10">  
  234.                 Insert New Data</td>  
  235.             <td class="style14">  
  236.                 :</td>  
  237.             <td class="style7">  
  238.                 <asp:LinkButton ID="LinkButton1" runat="server">Procede</asp:LinkButton>  
  239.             </td>  
  240.             <td class="style6">  
  241.                 </td>  
  242.         </tr>  
  243.         <tr>  
  244.             <td class="style1">  
  245.                  </td>  
  246.             <td class="style9">  
  247.                  </td>  
  248.             <td class="style3">  
  249.                  </td>  
  250.             <td class="style5">  
  251.                  </td>  
  252.             <td>  
  253.                  </td>  
  254.         </tr>  
  255.     </table>  
  256.     <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"   
  257.         CancelControlID="btnClose" PopupControlID="ModalBox"   
  258.         TargetControlID="LinkButton1" BackgroundCssClass="modalBackground"   
  259.         DropShadow="True">  
  260.         </asp:ModalPopupExtender>  
  261.     </ContentTemplate>  
  262.    </asp:UpdatePanel>  
  263. </div>  
  264. <div class="ContentInside" id="ModalBox" runat="server"    
  265.       
  266.     style="background-color: #0099CC; color: #FFFFFF; font-weight: bold; font-family: Cambria; font-style: normal; text-transform: capitalize">  
  267. <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  268.   <ContentTemplate>   
  269.         <table style="width:100%;">  
  270.             <tr>  
  271.                 <td class="style1">  
  272.                      </td>  
  273.                 <td class="style15">  
  274.                      </td>  
  275.                 <td class="style3">  
  276.                      </td>  
  277.                 <td class="style4">  
  278.                      </td>  
  279.                 <td>  
  280.                      </td>  
  281.                 <td>  
  282.                      </td>  
  283.             </tr>  
  284.             <tr>  
  285.                 <td class="style1">  
  286.                      </td>  
  287.                 <td class="style15">  
  288.                      </td>  
  289.                 <td class="style3">  
  290.                      </td>  
  291.                 <td class="style4">  
  292.                      </td>  
  293.                 <td>  
  294.                      </td>  
  295.                 <td>  
  296.                      </td>  
  297.             </tr>  
  298.             <tr>  
  299.                 <td class="style1">  
  300.                      </td>  
  301.                 <td class="style15">  
  302.                     User name</td>  
  303.                 <td class="style3">  
  304.                     :</td>  
  305.                 <td class="style4">  
  306.                     *</td>  
  307.                 <td>  
  308.                     <asp:TextBox ID="txtUserName" runat="server" CssClass="TextBoxSize"></asp:TextBox>  
  309.                 </td>  
  310.                 <td>  
  311.                      </td>  
  312.             </tr>  
  313.             <tr>  
  314.                 <td class="style1">  
  315.                      </td>  
  316.                 <td class="style15">  
  317.                      </td>  
  318.                 <td class="style3">  
  319.                      </td>  
  320.                 <td class="style4">  
  321.                      </td>  
  322.                 <td>  
  323.                     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"   
  324.                         ControlToValidate="txtUserName" ErrorMessage="* Enter UserName" ForeColor="Red"   
  325.                         ValidationGroup="abc"></asp:RequiredFieldValidator>  
  326.                 </td>  
  327.                 <td>  
  328.                      </td>  
  329.             </tr>  
  330.             <tr>  
  331.                 <td class="style1">  
  332.                      </td>  
  333.                 <td class="style15">  
  334.                     Mobile Number</td>  
  335.                 <td class="style3">  
  336.                     :</td>  
  337.                 <td class="style4">  
  338.                     *</td>  
  339.                 <td>  
  340.                     <asp:TextBox ID="txtMobile" runat="server" CssClass="TextBoxSize"></asp:TextBox>  
  341.                 </td>  
  342.                 <td>  
  343.                      </td>  
  344.             </tr>  
  345.             <tr>  
  346.                 <td class="style1">  
  347.                      </td>  
  348.                 <td class="style15">  
  349.                      </td>  
  350.                 <td class="style3">  
  351.                      </td>  
  352.                 <td class="style4">  
  353.                      </td>  
  354.                 <td>  
  355.                     <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"   
  356.                         ControlToValidate="txtMobile" ErrorMessage="* Enter Mobile No" ForeColor="Red"   
  357.                         ValidationGroup="abc"></asp:RequiredFieldValidator>  
  358.                     <asp:RangeValidator ID="RangeValidator1" runat="server"   
  359.                         ControlToValidate="txtMobile" ErrorMessage="* Minimum 10 Digit Mobile Number"   
  360.                         ForeColor="Red" MaximumValue="9999999999" MinimumValue="1000000000"   
  361.                         Type="Double" ValidationGroup="abc"></asp:RangeValidator>  
  362.                 </td>  
  363.                 <td>  
  364.                      </td>  
  365.             </tr>  
  366.             <tr>  
  367.                 <td class="style1">  
  368.                      </td>  
  369.                 <td class="style15">  
  370.                      </td>  
  371.                 <td class="style3">  
  372.                      </td>  
  373.                 <td class="style4">  
  374.                      </td>  
  375.                 <td>  
  376.                     <asp:Button ID="btnSave" runat="server" CssClass="ClickButton" Text="Save"   
  377.                         onclick="btnSave_Click" ValidationGroup="abc" />  
  378.                     <asp:Button ID="btnReset" runat="server" CssClass="ClickButton"   
  379.                         onclick="btnReset_Click" Text="Reset" />  
  380.                     <asp:Button ID="btnClose" runat="server" CssClass="ClickButton" Text="Close" />  
  381.                 </td>  
  382.                 <td>  
  383.                      </td>  
  384.             </tr>  
  385.             <tr>  
  386.                 <td class="style1">  
  387.                      </td>  
  388.                 <td class="style15">  
  389.                      </td>  
  390.                 <td class="style3">  
  391.                      </td>  
  392.                 <td class="style4">  
  393.                      </td>  
  394.                 <td>  
  395.                     <asp:Label ID="lblMessage1" runat="server" ForeColor="Red"></asp:Label>  
  396.                 </td>  
  397.                 <td>  
  398.                      </td>  
  399.             </tr>  
  400.             <tr>  
  401.                 <td class="style1">  
  402.                      </td>  
  403.                 <td class="style15">  
  404.                      </td>  
  405.                 <td class="style3">  
  406.                      </td>  
  407.                 <td class="style4">  
  408.                      </td>  
  409.                 <td>  
  410.                      </td>  
  411.                 <td>  
  412.                      </td>  
  413.             </tr>  
  414.         </table>  
  415.     </ContentTemplate>  
  416.     </asp:UpdatePanel>    
  417. </div>  
  418. <div class="ContentInside">  
  419.     <asp:UpdatePanel ID="UpdatePanel2" runat="server">  
  420.     <ContentTemplate>  
  421.     <table style="width:100%;">  
  422.         <tr>  
  423.             <td class="style8">  
  424.             </td>  
  425.             <td class="style8">  
  426.                 <asp:GridView ID="GridView1" runat="server" BackColor="White"   
  427.                     BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4"   
  428.                     AllowPaging="True" onpageindexchanging="GridView1_PageIndexChanging"   
  429.                     PageSize="5">  
  430.                     <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />  
  431.                     <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />  
  432.                     <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />  
  433.                     <RowStyle BackColor="White" ForeColor="#330099" />  
  434.                     <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />  
  435.                     <SortedAscendingCellStyle BackColor="#FEFCEB" />  
  436.                     <SortedAscendingHeaderStyle BackColor="#AF0101" />  
  437.                     <SortedDescendingCellStyle BackColor="#F6F0C0" />  
  438.                     <SortedDescendingHeaderStyle BackColor="#7E0000" />  
  439.                 </asp:GridView>  
  440.             </td>  
  441.             <td class="style8">  
  442.             </td>  
  443.         </tr>  
  444.         <tr>  
  445.             <td>  
  446.                  </td>  
  447.             <td>  
  448.                 <asp:Label ID="lblMessage2" runat="server" ForeColor="Red"></asp:Label>  
  449.             </td>  
  450.             <td>  
  451.                  </td>  
  452.         </tr>  
  453.         </table>  
  454.     </ContentTemplate>  
  455.    </asp:UpdatePanel>  
  456. </div>  
I will use LINQ to do the database operations.

add table

Complete C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Drawing;  
  8.   
  9. public partial class Ajax_User_Controls_Modal_Pooup_Control : System.Web.UI.UserControl  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         LoadGridData();  
  14.     }  
  15.   
  16.     private void LoadGridData()  
  17.     {  
  18.         try  
  19.         {  
  20.             using (DataClassesDataContext DbContext = new DataClassesDataContext())  
  21.             {  
  22.                 var Data = DbContext.tbl_ModalPopUp_Samples;  
  23.                 //  
  24.                 GridView1.DataSource = Data;  
  25.                 GridView1.DataBind();  
  26.             }  
  27.         }  
  28.         catch (Exception Exc)  
  29.         {  
  30.             lblMessage2.Visible = true;  
  31.             lblMessage2.ForeColor = Color.Red;  
  32.             lblMessage2.Text = " Application Error :  " + Exc.Message;  
  33.         }  
  34.   
  35.         finally  
  36.         {  
  37.             //  
  38.         }  
  39.     }  
  40.     protected void btnSave_Click(object sender, EventArgs e)  
  41.     {  
  42.         DataSave();  
  43.     }  
  44.   
  45.     private void DataSave()  
  46.     {  
  47.         try  
  48.         {  
  49.             using (DataClassesDataContext DbContext = new DataClassesDataContext())  
  50.             {  
  51.                 tbl_ModalPopUp_Sample tbl = new tbl_ModalPopUp_Sample();  
  52.                 tbl.UserName = txtUserName.Text;  
  53.                 tbl.Mobile_No = Convert.ToInt64(txtMobile.Text);  
  54.                 //  
  55.                 DbContext.tbl_ModalPopUp_Samples.InsertOnSubmit(tbl);  
  56.                 DbContext.SubmitChanges();  
  57.             }  
  58.             //  
  59.             lblMessage1.ForeColor = Color.Blue;  
  60.             lblMessage1.Text = "Data Saverd Successfully.";  
  61.             //  
  62.             ResetAll();  
  63.             LoadGridData();  
  64.         }  
  65.         catch (Exception Exc)  
  66.         {  
  67.             lblMessage1.Visible = true;  
  68.             lblMessage1.ForeColor = Color.Red;  
  69.             lblMessage1.Text = " Application Error :  " + Exc.Message;  
  70.         }  
  71.   
  72.         finally  
  73.         {  
  74.             //  
  75.         }  
  76.     }  
  77.     protected void btnReset_Click(object sender, EventArgs e)  
  78.     {  
  79.         ResetAll();  
  80.         lblMessage1.Text = "";  
  81.         lblMessage2.Text = "";  
  82.     }  
  83.   
  84.     private void ResetAll()  
  85.     {  
  86.         txtUserName.Text = "";  
  87.         txtMobile.Text = "";  
  88.     }  
  89.   
  90.     protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)  
  91.     {  
  92.         GridView1.PageIndex = e.NewPageIndex;  
  93.         LoadGridData();  
  94.     }  
  95. }  
Run the application.
Run The Application

save data

Watch the GridView after saving the data.

gridview 


Similar Articles