ASP.Net AJAX ModalPopupExtender Control to Create Modal Popup in C# VB.Net

By using the AJAX ModalPopup Extender we can display popup without opening a new browser window. To display deatila data or information even to capture user input we can use AJAX ModalPopup Extender which works in the same window of a web browser. We can disable the parent page content by placing a layer on it using CSS so that the user can not interact with the main page controls without closing the Modal Pop Up Window. Anyone can customize the look and feel of AJAX ModalPopup Extender by using CSS styles, also one can fix the position of Modalpopup according to X or Y axis of the browser window.

Related Article:
GridView Add Edit Delete using AJAX in Asp.Net C# VB.Net

More about ModalPopupExtender Properties:
TargetControlID: The ID of the control that display the Modal Popup.
PopupControlID: The ID of the HTML element code block to display as a Modal Popup.
BackgroundCssClass: The CSS class name to apply to the background when the Modal Popup is displayed.
DropShadow: One can Set to True to automatically add a drop-shadow to the Modal Popup.
OkControlID: The ID of the element that close the Modal Popup.
OnOkScript: Script to run when the Modal Popup is dismissed with the OkControlID.
CancelControlID: The ID of the element that cancels the Modal Popup.
OnCancelScript: Script to run when the Modal Popup is closed with the CancelControlID.
PopupDragHandleControlID: The ID of the embedded element that contains the Popup header/title which will be used as a drag handler.
X: The X coordinate of the top left corner of the Modal Popup.
Y: The Y coordinate of the top left corner of the Modal Popup

Objective/Outcome:
ASP.Net AJAX ModalPopupExtender Control to Create Modal Popup in C# VB.Net

Now a Complete Code example of ASP.Net AJAX ModalPopupExtender Control to Create Modal Popup in C# VB.Net:
Step 1: Add a ToolkitScriptManager in your page. It will automatically register the AJAX Control Toolkit Library by putting a line just below the @PageDirective.
Step 2: Now add a LinkButton like Below:

<asp:LinkButton ID="lnkAdd" runat="server">Insert GridView Record</asp:LinkButton>

Step 3: Now add a Panel (the Modal Popup) like below:

        <asp:Panel ID="ModelPopupPanel" runat="server" CssClass="popup">
            <table>
                <tr>
                    <td>
                        Roll:
                    </td>
                    <td>
                        <asp:TextBox ID="txtRoll" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        Email:
                    </td>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                   
                    </td>
                    <td>
                        <asp:Button ID="btnInsert" runat="server" Text="Save" OnClick="btnInsert_Click" />&nbsp;&nbsp;&nbsp;
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </asp:Panel>

Step 4: Now add a GridView within an UpdatePanel like below:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5" AlternatingRowStyle-BackColor="#66CCFF">
            </asp:GridView>
        </ContentTemplate>
        <Triggers><asp:AsyncPostBackTrigger ControlID="btnInsert" EventName="Click" /></Triggers>
    </asp:UpdatePanel>

Step 5: Now add a ModalPopupExtender like Below:

        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="ModelPopupPanel" 
        TargetControlID="lnkAdd" BackgroundCssClass="modalBackground" CancelControlID="btnCancel">
        </asp:ModalPopupExtender>

Step 6: Now add some style for covering the parent content as well as for Modal Popup.

<style>
        .modalBackground
        {
            background-color: #3399FF;
            filter: alpha(opacity=45);
            opacity: 0.5;
        }
        .popup
        {
            background-color: #6699FF;
            margin: 0px auto;
            width: 300px;
            position: relative;
            border: Gray 2px inset;
        }
</style>

Step 7: Now populate the GridView under Page_Load:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Roll", System.Type.GetType("System.Int64"));
            dt.Columns.Add("Name");
            dt.Columns.Add("Email");

            DataRow oItem = dt.NewRow();
            oItem[0] = "1000";
            oItem[1] = "Shawpnendu";
            oItem[2] = "Shawpnendu@gmail.com";
            dt.Rows.Add(oItem);

            oItem = dt.NewRow();
            oItem[0] = "2000";
            oItem[1] = "Bimalandu";
            oItem[2] = "Bimalandu@gmail.com";
            dt.Rows.Add(oItem);
            
            oItem = dt.NewRow();
            oItem[0] = "3000";
            oItem[1] = "Purnendu";
            oItem[2] = "Purnendu@gmail.com";
            dt.Rows.Add(oItem);

            GridView1.DataSource = dt;
            GridView1.DataBind();
            ViewState["dt"] = dt;
        }
    }

Note: Don’t forget to add “System.Data” namespace.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.Add("Roll", System.Type.[GetType]("System.Int64"))
            dt.Columns.Add("Name")
            dt.Columns.Add("Email")

            Dim oItem As DataRow = dt.NewRow()
            oItem(0) = "1000"
            oItem(1) = "Shawpnendu"
            oItem(2) = "Shawpnendu@gmail.com"
            dt.Rows.Add(oItem)

            oItem = dt.NewRow()
            oItem(0) = "2000"
            oItem(1) = "Bimalandu"
            oItem(2) = "Bimalandu@gmail.com"
            dt.Rows.Add(oItem)

            oItem = dt.NewRow()
            oItem(0) = "3000"
            oItem(1) = "Purnendu"
            oItem(2) = "Purnendu@gmail.com"
            dt.Rows.Add(oItem)

            GridView1.DataSource = dt
            GridView1.DataBind()
            ViewState("dt") = dt
        End If
    End Sub

Refresh Parent Page GridView using ModalPopupExtender Modal Popup by Inserting Data from Modal Popup:
C# Code:

    protected void btnInsert_Click(object sender, EventArgs e)
    {
        DataTable dt = (DataTable)ViewState["dt"];

        DataRow oItem = dt.NewRow();
        oItem[0] = Convert.ToInt64(txtRoll.Text);
        oItem[1] = txtName.Text;
        oItem[2] = txtEmail.Text;
        dt.Rows.Add(oItem);

        GridView1.DataSource = dt;
        GridView1.DataBind();
        
        ViewState["dt"] = dt;
        
        ModalPopupExtender1.Hide();
    }

VB.Net Code:

    Protected Sub btnInsert_Click(sender As Object, e As EventArgs)
        Dim dt As DataTable = DirectCast(ViewState("dt"), DataTable)

        Dim oItem As DataRow = dt.NewRow()
        oItem(0) = Convert.ToInt64(txtRoll.Text)
        oItem(1) = txtName.Text
        oItem(2) = txtEmail.Text
        dt.Rows.Add(oItem)

        GridView1.DataSource = dt
        GridView1.DataBind()

        ViewState("dt") = dt

        ModalPopupExtender1.Hide()
    End Sub

Note: I have assigned a Trigger from UpdatePanel to btnInsert Button. So that when user click on Modal Popup Save Button, corresponding code will refresh parent page UpdatePanel without any flickering.

Hope my complete example regarding Asp.Net AJAX ModalPopupExtender will help you to make a Modal Popup.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Ajax, Asp.net, C#, Gridview, VB.Net
One comment on “ASP.Net AJAX ModalPopupExtender Control to Create Modal Popup in C# VB.Net
  1. Susan B says:

    I have only one question? COULD YOU HAVE MADE THIS EXAMPLE ANY MORE COMPLICATED??? I mean come on! login, database, master page. All I wanted is to learn how to use a ModalPopupExtender Control to Create Modal Popup page!

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*