Working with ModalPopupExtender control in ASP.NET

vishalneeraj-24503
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 28301 red flag

Today we will learn about Working with ModalPopupExtender control in ASP.NET.

Introduction

Sometimes it's required to hide some columns in Gridview and show the full details in Detail view.So we can use ModalPopupExtender AJAX control to work as a Popup window.

This ModalPopupExtender control allows a page to display the contents in a popup window in a modal manner.We have to give apply a background color to it,so that it will be shown in transparent color.

It has several properties as

1). TargetControlID - We have to give TargetControlID as Button i.e. Link Button,Image Button,Command Button or any buttons from which the Modal popup will open.

2). PopupControlID - We have to give Panel-Id or Division-Id,this is the Panel or Division which is going to open as a popup.

3). BackgroundCssClass - This is the class,which will be applied to ModalPopupExtender.

Objective

Working with ModalPopupExtender control in ASP.NET.

Using the code

We will understand ModalPopupExtender control with an example:

Our aspx page will look like below:

For working with ModalPopupExtender,we have to note down 2 things.

1st:- We have to register AjaxControlToolkit at the top of the page.
2nd:- We have to take ToolkitScriptManager for working with any AJAX controls.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Employee Master</title>
    <style type="text/css">
    .modal_popup_background_color 
    {
        background-color:#666699;filter:alpha(opacity=70);opacity:0.7;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
    <div>
        <asp:GridView ID="grid_view_employee" runat="server" AllowPaging="true" AutoGenerateColumns="false" PageSize="50"
        OnRowCommand="grid_view_employee_RowCommad">
        <Columns>
        <asp:TemplateField>
          <ItemTemplate>
              <asp:LinkButton ID="lnk_view" runat="server" CommandName="VIEW_DEATILS" CommandArgument = '<%#Eval("employee_id") %>'>View</asp:LinkButton>
          </ItemTemplate>
        </asp:TemplateField>
        
         <asp:TemplateField HeaderText="Id" Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_employee_id" runat="server" Text='<%#Eval("employee_id") %>' Visible="false"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Employee Code">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_employee_code" runat="server" Text='<%#Eval("employee_code") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Employee Name">
                                <ItemTemplate>
                                 <asp:Label ID="lbl_employee_name" runat="server" Text='<%#Eval("employee_name") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Employee Address" Visible="false">
                                <ItemTemplate>
                                <asp:Label ID="lbl_employee_address" runat="server" Text='<%#Eval("address") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>                            
                             <asp:TemplateField HeaderText="Phone No" Visible="false">
                                <ItemTemplate>
                                <asp:Label ID="lbl_employee_phone_no" runat="server" Text='<%#Eval("phone_no") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            
                             <asp:TemplateField HeaderText="LDAP" Visible="false">
                                <ItemTemplate>
                                   <asp:Label ID="lbl_employee_ldap" runat="server" Text='<%#Eval("ldap") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="DOJ">
                                <ItemTemplate>
                                   <asp:Label ID="lbl_employee_doj" runat="server" Text='<%#Eval("doj") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="DOB" Visible="false">
                                <ItemTemplate>
                                   <asp:Label ID="lbl_employee_dob" runat="server" Text='<%#Eval("dob") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Pan Number" Visible="false">
                                <ItemTemplate>
                                   <asp:Label ID="lbl_employee_pan" runat="server" Text='<%#Eval("pan_number") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
        </Columns>
        </asp:GridView>
    </div>
    <div>
    <asp:ModalPopupExtender runat="server" ID="mdl_full_employee_details" TargetControlID="Button1" 
    BackgroundCssClass = "modal_popup_background_color" PopupControlID="pnl_employee_details">
    </asp:ModalPopupExtender>
        <asp:Button ID="Button1" runat="server" Text="Button" style="display:none;" />
        
        <asp:Panel ID="pnl_employee_details" runat="server" Visible="false" BackColor="YellowGreen" BorderColor="Blue">
        <div style="text-align:right;border-width:1px solid;blue;">
            <asp:LinkButton ID="lnk_button_close" runat="server" style="text-decoration:none; text-align:right;">X</asp:LinkButton>
            </div>
            <div>
                <asp:DetailsView ID="dtl_employee_details" runat="server" Width="200px" AutoGenerateRows="false">
                <Fields>
                <asp:BoundField DataField="Employee_Name" HeaderText="Employee Name" HeaderStyle-Width="200px" />
                <asp:BoundField DataField="Employee_Code" HeaderText="Employee Code" />
                <asp:BoundField DataField="Address" HeaderText="Employee Address" />
                <asp:BoundField DataField="LDAP" HeaderText="Employee LDAP" />
                <asp:BoundField DataField="DOJ" HeaderText="Employee DOJ" />
                <asp:BoundField DataField="DOB" HeaderText="Employee DOB" /> 
                <asp:BoundField DataField="Pan_Number" HeaderText="Employee PAN" />
                <asp:BoundField DataField="Phone_No" HeaderText="Employee Phone Number" />
                </Fields>
                </asp:DetailsView>
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

In Code-Behind page,in Page Load,we have to bind Gridview control as shown:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("employee_id");
            dt.Columns.Add("employee_code");
            dt.Columns.Add("employee_name");
            dt.Columns.Add("address");
            dt.Columns.Add("pan_number");
            dt.Columns.Add("doj");
            dt.Columns.Add("dob");
            dt.Columns.Add("phone_no");
            dt.Columns.Add("ldap");

            dt.Rows.Add("1", "abc001", "Vishal", "Pune", "ABCDEV1234F","31/10/2013", "14/10/1985","8787786767","vcuvr");
            dt.Rows.Add("2", "abc002", "Rajesh", "Nagpur", "PQRSTV4567F", "09/06/2013", "30/08/1982", "2312345678", "rcbvf");
            dt.Rows.Add("3", "abc003", "Pooja", "Jabalpur", "ASBCDF9234F", "09/06/2013", "12/12/1986", "5432344567", "pjjhg");
            dt.Rows.Add("4", "abc004", "Prashant", "Pune", "AVFGHN9087F", "09/06/2013", "12/12/1986", "7654345678", "prpol");
            dt.Rows.Add("5", "abc005", "Tushar", "Pune", "LKPOIJ1798F", "09/06/2013", "16/08/1986", "9876545678", "tudfh");

            grid_view_employee.DataSource = dt;
            grid_view_employee.DataBind();

            ViewState["DataTable"] = dt;
        }
    }

In Gridview RowCommand event, we have to pass employee-id to fetch the record and bind into Detail view control and call Show method of ModalPopupExtender control to display with full details of Employees.

    /// <summary>
    /// handles row command event,
    /// fetches data based on employee_id field
    /// and bind to detail view
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void grid_view_employee_RowCommad(object sender, GridViewCommandEventArgs e)
    {
        try
        {
            mdl_full_employee_details.Hide();
            pnl_employee_details.Visible = false;

            if (e.CommandName == "VIEW_DEATILS")
            {
                if (ViewState["DataTable"] != null)
                {
                    DataTable dt = ViewState["DataTable"] as DataTable;

                    if (dt != null)
                    {
                        DataRow[] dr = dt.Select("employee_id = '" + e.CommandArgument + "'");
                        if (dr != null)
                        {
                            dt = dr.CopyToDataTable();
                            dtl_employee_details.DataSource = dt;
                            dtl_employee_details.DataBind();
                            mdl_full_employee_details.Show();
                            pnl_employee_details.Visible = true;
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

Run the application,


Here View is the link button,on click of View button,ModalPopupExtender control will open with the selected row details as shown:



Here,we can see the Detail Employee information as a ModalPopupExtender.

Conclusion

In this article,we learned about Working with ModalPopupExtender control in ASP.NET and its usage.



Page copy protected against web site content infringement by Copyscape

About the Author

vishalneeraj-24503
Full Name: vishal kumar
Member Level: Platinum
Member Status: Member,MVP
Member Since: 11/5/2013 5:58:17 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Posted by: Bhuvanesh6 on: 7/31/2016 | Points: 25
Helpful and good article

Login to post response

Comment using Facebook(Author doesn't get notification)