How to Create ModalPopUp Control in ASP.Net AJAX

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

create table tbl_ModalPopUp_Sample
(
   ID int identity primary key,
   UserName varchar(50),
   Mobile_No bigint
)

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.
  
  

  • CancelControlID="btnClose"

  • TargetControlID="LinkButton1"

  • BackgroundCssClass="modalBackground"

  • DropShadow="True"

  • PopupControlID="ModalBox" (The ID of the Panel or DIV)

 

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    CancelControlID="btnClose" PopupControlID="ModalBox"
    TargetControlID="LinkButton1" BackgroundCssClass="modalBackground"
    DropShadow="True">
    </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

.modalBackground
 {
     background-color: #336699;
     filter: alpha(opacity=80);
     opacity: 0.8;
 }

 .modalBackground:hover
 {
     background-color : #CC3300;
 }

After adding ModalPopUp

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

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

Layout of the design



Complete Design

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Modal_Pooup_Control.ascx.cs" Inherits="Ajax_User_Controls_Modal_Pooup_Control" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
     <style type="text/css">

        .Clear
        {
            clear:both;
        }

        .logButton
        {
          width: 100px;
          height: 30px;
          background-color: #FB5F67;
          font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
            font-variant: normal; text-transform: capitalize; color: #FFFFFF;
        }
        a:hover {color:#FF00FF;}
        a:link    {color:blue;}
        a:visited {color:green;}
        a:active  {color:yellow;}

        input[type="submit"]:hover {
    background:#0000FF;
}

        .LoginBox
        {
            margin: 10px;
            height: 270px;
            background-color: #FB5F67;
        }
        .Heading
        {
            margin: 10px;
            height: 15px;
            background-color: #FFFFFF;
            font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; font-style: normal;
            font-variant: normal; text-transform: capitalize; color: #6C6B6B;
            text-align: center;
            padding: 4px;
        }

        .InnerLogin
        {
            margin: 10px;
            margin-right: 5px;
            width: 320px;
            height: 250px;
            float: left;
            background-color: White;
        }
        .NewUserBox
        {
            margin: 10px;
            margin-left: 5px;
            width: 330px;
            height: 250px;
            float: left;
            background-color: White;
        }

        .ClickButton
        {
          width: 100px;
          height: 30px;
          background-color: #339933;
          font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
          font-variant: normal; text-transform: capitalize; color: #FFFFFF;
        }

         .ContentInside
         {
             margin: 10px;
         }

     .TextBoxSize
         {
             width: 200px;
         }

     .SmallTextBox
         {
            width: 100px;
         }

         .DropDownSize
         {
           width: 255px;
           height: 23px;
         }
     .ContentMiddle
         {
             margin: 0px auto;
             height: auto;
             width: 500px;
         }

         .LeftHeading
         {
             font-family: Arial, Helvetica, sans-serif;
             font-size: 14px;
             font-weight: bold;
             font-style: normal;
             font-variant: normal;
             text-transform: capitalize;
             color: #CC3300;
             text-align: left;
         }

     .SubHeadingLeft
         {
             margin: 10px;
             height: 15px;
             padding: 4px;
             background-color: #999999;
             font-family: Arial, Helvetica, sans-serif;
             font-size: 12px;
             font-weight: bold;
             font-style: normal;
             font-variant: normal;
             text-transform: capitalize;
             color: #FFFFFF;
             text-align: left;
         }

    .SmallButton
        {
          width: 70px;
          height: 30px;
          background-color: #666633;
          font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
          font-variant: normal; text-transform: capitalize; color: #FFFFFF;
        }
    .modalBackground
    {
        background-color: #336699;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

      .modalBackground:hover
      {
          background-color : #CC3300;
          }
         .style1
         {
             width: 20px;
         }
         .style3
         {
             width: 4px;
         }
         .style4
         {
             width: 5px;
             color: Red;
         }


         .style5
         {
             width: 525px;
         }


         .style6
         {
             height: 34px;
         }
         .style7
         {
             width: 525px;
             height: 34px;
         }
         .style8
         {
             height: 23px;
         }


         .style9
         {
             width: 136px;
         }
         .style10
         {
             height: 34px;
             width: 136px;
         }
         .style12
         {
             height: 34px;
             width: 20px;
         }
         .style14
         {
             height: 34px;
             width: 4px;
         }
         .style15
         {
             width: 120px;
         }


    </style>
<div class="Heading">
    ModalPouUp Control</div>
<div class="ContentInside">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>
</div>
<div class="ContentInside">
    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <table style="width:100%;">
        <tr>
            <td class="style1">
                 </td>
            <td class="style9">
                 </td>
            <td class="style3">
                 </td>
            <td class="style5">
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style12">
                </td>
            <td class="style10">
                Insert New Data</td>
            <td class="style14">
                :</td>
            <td class="style7">
                <asp:LinkButton ID="LinkButton1" runat="server">Procede</asp:LinkButton>
            </td>
            <td class="style6">
                </td>
        </tr>
        <tr>
            <td class="style1">
                 </td>
            <td class="style9">
                 </td>
            <td class="style3">
                 </td>
            <td class="style5">
                 </td>
            <td>
                 </td>
        </tr>
    </table>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
        CancelControlID="btnClose" PopupControlID="ModalBox"
        TargetControlID="LinkButton1" BackgroundCssClass="modalBackground"
        DropShadow="True">
        </asp:ModalPopupExtender>
    </ContentTemplate>
   </asp:UpdatePanel>
</div>
<div class="ContentInside" id="ModalBox" runat="server"

    style="background-color: #0099CC; color: #FFFFFF; font-weight: bold; font-family: Cambria; font-style: normal; text-transform: capitalize">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
        <table style="width:100%;">
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                     </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                     </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                    User name</td>
                <td class="style3">
                    :</td>
                <td class="style4">
                    *</td>
                <td>
                    <asp:TextBox ID="txtUserName" runat="server" CssClass="TextBoxSize"></asp:TextBox>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                        ControlToValidate="txtUserName" ErrorMessage="* Enter UserName" ForeColor="Red"
                        ValidationGroup="abc"></asp:RequiredFieldValidator>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                    Mobile Number</td>
                <td class="style3">
                    :</td>
                <td class="style4">
                    *</td>
                <td>
                    <asp:TextBox ID="txtMobile" runat="server" CssClass="TextBoxSize"></asp:TextBox>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                        ControlToValidate="txtMobile" ErrorMessage="* Enter Mobile No" ForeColor="Red"
                        ValidationGroup="abc"></asp:RequiredFieldValidator>
                    <asp:RangeValidator ID="RangeValidator1" runat="server"
                        ControlToValidate="txtMobile" ErrorMessage="* Minimum 10 Digit Mobile Number"
                        ForeColor="Red" MaximumValue="9999999999" MinimumValue="1000000000"
                        Type="Double" ValidationGroup="abc"></asp:RangeValidator>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                    <asp:Button ID="btnSave" runat="server" CssClass="ClickButton" Text="Save"
                        onclick="btnSave_Click" ValidationGroup="abc" />
                    <asp:Button ID="btnReset" runat="server" CssClass="ClickButton"
                        onclick="btnReset_Click" Text="Reset" />
                    <asp:Button ID="btnClose" runat="server" CssClass="ClickButton" Text="Close" />
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                    <asp:Label ID="lblMessage1" runat="server" ForeColor="Red"></asp:Label>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td class="style1">
                     </td>
                <td class="style15">
                     </td>
                <td class="style3">
                     </td>
                <td class="style4">
                     </td>
                <td>
                     </td>
                <td>
                     </td>
            </tr>
        </table>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="ContentInside">
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    <table style="width:100%;">
        <tr>
            <td class="style8">
            </td>
            <td class="style8">
                <asp:GridView ID="GridView1" runat="server" BackColor="White"
                    BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4"
                    AllowPaging="True" onpageindexchanging="GridView1_PageIndexChanging"
                    PageSize="5">
                    <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                    <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                    <RowStyle BackColor="White" ForeColor="#330099" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                    <SortedAscendingCellStyle BackColor="#FEFCEB" />
                    <SortedAscendingHeaderStyle BackColor="#AF0101" />
                    <SortedDescendingCellStyle BackColor="#F6F0C0" />
                    <SortedDescendingHeaderStyle BackColor="#7E0000" />
                </asp:GridView>
            </td>
            <td class="style8">
            </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                <asp:Label ID="lblMessage2" runat="server" ForeColor="Red"></asp:Label>
            </td>
            <td>
                 </td>
        </tr>
        </table>
    </ContentTemplate>
   </asp:UpdatePanel>
</div>

I will use LINQ to do the database operations.



Complete C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

public partial class Ajax_User_Controls_Modal_Pooup_Control : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        LoadGridData();
    }

    private void LoadGridData()
    {
        try
        {
            using (DataClassesDataContext DbContext = new DataClassesDataContext())
            {
                var Data = DbContext.tbl_ModalPopUp_Samples;
                //
                GridView1.DataSource = Data;
                GridView1.DataBind();
            }
        }
        catch (Exception Exc)
        {
            lblMessage2.Visible = true;
            lblMessage2.ForeColor = Color.Red;
            lblMessage2.Text = " Application Error :  " + Exc.Message;
        }

        finally
        {
            //
        }
    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
        DataSave();
    }

    private void DataSave()
    {
        try
        {
            using (DataClassesDataContext DbContext = new DataClassesDataContext())
            {
                tbl_ModalPopUp_Sample tbl = new tbl_ModalPopUp_Sample();
                tbl.UserName = txtUserName.Text;
                tbl.Mobile_No = Convert.ToInt64(txtMobile.Text);
                //
                DbContext.tbl_ModalPopUp_Samples.InsertOnSubmit(tbl);
                DbContext.SubmitChanges();
            }
            //
            lblMessage1.ForeColor = Color.Blue;
            lblMessage1.Text = "Data Saverd Successfully.";
            //
            ResetAll();
            LoadGridData();
        }
        catch (Exception Exc)
        {
            lblMessage1.Visible = true;
            lblMessage1.ForeColor = Color.Red;
            lblMessage1.Text = " Application Error :  " + Exc.Message;
        }

        finally
        {
            //
        }
    }
    protected void btnReset_Click(object sender, EventArgs e)
    {
        ResetAll();
        lblMessage1.Text = "";
        lblMessage2.Text = "";
    }

    private void ResetAll()
    {
        txtUserName.Text = "";
        txtMobile.Text = "";
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        LoadGridData();
    }
}

Run the application.




Watch the GridView after saving the data.