Introduction:-
We all have used the ModalPopupExtender and know how it works. It displays a detail part as a model, which means we cannot interact with rest of the part of page except the detail part. But there is a problem in ModalPopupExtender.When you try to display another ModalPopupExtender on the first one, it does not hide the first ModalPopupExtender. We can interact with the first ModalPopupExtender. Sometimes it spoils the application logic.
That’s why I am solving this problem by a User Control named UpdatePanel . It sets the child model popup on the parent model popup. You can add multiple UpdatePanel controls to set multiple relations between model pops. We can nest many model pop controls to any level.
Here In this Example I used the Nested ModelPopupExtender. In first popup Gridview is opened and for Insert and Update Operation Nested popup will open which has simple textboxes and buttons.
Note:
- When you use ModelPopupExtender you have to put one button in ModelPopupExtender to close that model popup.
- I am using Linq for Insert, Update, Delete operations on Database.
click The Button First Popup Will Open
When you click on Edit Link Button or Insert Button then next Popup will open
Source Code(in asp.net):-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup" %>
<%@ 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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.ModalPopupBG
{
background-color: #C0C0C0;
filter: alpha(opacity=50);
opacity: 0.7;
}
.DetailPopup
{
min-width: 200px;
min-height: 150px;
background: white;
}
.detailpopup1
{
font-size: larger;
font-weight: bold;
font-style: normal;
color: #000000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Button ID="btnMain" runat="server" Text="Click me to View" />
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="btnMain"
PopupControlID="Mainpan" CancelControlID="btnMainCancle" Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="Mainpan" runat="server">
<asp:UpdatePanel ID="updateParent" runat="Server">
<ContentTemplate>
<asp:HiddenField ID="hid" runat="server" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderText="Pid">
<ItemTemplate>
<asp:Label ID="lpid" runat="server" Text='<% #Eval("pid")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lpname" runat="server" Text='<% #Eval("pname")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="ldes" runat="server" Text='<% #Eval("des")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lbedit" runat="server" OnClick="lbedit_Click">Edit</asp:LinkButton>
<asp:LinkButton ID="lbdel" runat="server" OnClick="lbdel_Click">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
<asp:Button ID="bntinsert" runat="server" Text="Insert" OnClick="bntinsert_Click" />
<asp:Button ID="btnMainCancle" runat="server" Text="Cancle" OnClick="btnMainCancle_Click" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hid"
PopupControlID="pan" BehaviorID="bntinsert_Click" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="pan">
<table class="DetailPopup">
<tr>
<td colspan="2">
<h1>
<asp:Label ID="lpopuphead" runat="server" Text=""></asp:Label></h1>
</td>
</tr>
<tr>
<td>
Product Name:-
</td>
<td>
<asp:TextBox ID="txtpnm" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Plz Enter Product Name"
ControlToValidate="txtpnm" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Product Description:-
</td>
<td>
<asp:TextBox ID="txtpdes" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Plz Enter Description"
ControlToValidate="txtpdes" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnOkay" runat="server" Text="OK" OnClick="btnOkay_Click" ValidationGroup="vpopup" />
<asp:Button ID="btnCncle" runat="server" Text="CANCLE" OnClick="btnCncle_Click" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</body>
</html>
Code Behind(in C#):-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Popup : System.Web.UI.Page
{
DataClassesDataContext dc = new DataClassesDataContext();
SqlFun.SqlFun sqlobj = new SqlFun.SqlFun();
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
grbind();
}
}
protected void grbind()
{
GridView1.DataSource = dc.aby_Productnews;
GridView1.DataBind();
}
protected void lbedit_Click(object sender, EventArgs e)
{
LinkButton lb=(LinkButton)sender;
GridViewRow gr = (GridViewRow)lb.NamingContainer;
Label lpid1 = (Label)gr.FindControl("lpid");
hid.Value=lpid1.Text;
Label lpname1 = (Label)gr.FindControl("lpname");
txtpnm.Text = lpname1.Text;
Label ldes1 = (Label)gr.FindControl("ldes");
txtpdes.Text = ldes1.Text;
lpopuphead.Text = "Edit Record";
ModalPopupExtender1.Show();
}
protected void lbdel_Click(object sender, EventArgs e)
{
LinkButton lb = (LinkButton)sender;
GridViewRow gr = (GridViewRow)lb.NamingContainer;
Label lpid1 = (Label)gr.FindControl("lpid");
//sqlobj.Cmd_Non_Query("delete from aby_Productnew where pid=" + lpid1.Text);
grbind();
}
protected void btnOkay_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
if (lpopuphead.Text.Equals("Edit Record"))
{
aby_Productnew urec = dc.aby_Productnews.Single(u=>u.pid==Convert.ToInt32(hid.Value));
urec.pname = txtpnm.Text;
urec.des = txtpdes.Text;
dc.SubmitChanges();
//sqlobj.Cmd_Non_Query("update aby_Productnew set pname='" + txtpnm.Text + "', des='" + txtpdes.Text + "' where pid=" + hid.Value);
}
else
{
aby_Productnew abrec = new aby_Productnew();
abrec.pname = txtpnm.Text;
abrec.des = txtpdes.Text;
dc.aby_Productnews.InsertOnSubmit(abrec);
dc.SubmitChanges();
//sqlobj.Cmd_Non_Query("insert into aby_Productnew values('" + txtpnm.Text + "','" + txtpdes.Text + "')");
}
grbind();
}
clr();
}
private void clr()
{
lpopuphead.Text = "";
txtpdes.Text = "";
txtpnm.Text = "";
}
protected void bntinsert_Click(object sender, EventArgs e)
{
lpopuphead.Text = "Insert Record";
ModalPopupExtender1.Show();
}
protected void btnCncle_Click(object sender, EventArgs e)
{
clr();
ModalPopupExtender1.Hide();
}
protected void btnMainCancle_Click(object sender, EventArgs e)
{
ModalPopupExtender2.Hide();
}
}
Post a Comment