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.