What is Nested Popup:-
A ModalPopup
inside other ModalPopup is Called a Nested Popup. In this Example we explain
How to Create a nested Popup and Perform Insert and Delete Operation in this
Popup.
Description:-
The ModalPopupExtender
allows Users to Display Content of Element into the Popup. When Popup is Show
at that popup is Display with HighLight and User are not allowed to do any
other operation even the click on the other Control are not permitted.
You can
provide OnShowing/OnHiding/OnHidden animations which are played when the modalPopupExtender
content is shown and hidden.
Property
of the ModalPopupExtender:-
TargetControlID - The ID of the activates the modal popup.
PopupControlID - The ID of the element to display as a modal
popup like Button etc….
BackgroundCssClass - The CSS class for Popup to apply to
the background when the modal popup is displayed.
DropShadow - True to automatically add a dropshadow to the
modal popup.
OkControlID - The ID of the element that dismisses the
modal popup.
OnOkScript - The script to run
when the modal popup is dismissed using the element specified in OkControlID.
CancelControlID
- The ID of the Control that cancels the modal popup
OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID -
The ID of the embedded element that contains the popup header/title which will
be used as a drag handle
X - The X coordinate of the
top/left corner of the modal popup (the popup will be centered horizontally if
not specified)
Y - The Y coordinate of the
top/left corner of the modal popup (the popup will be centered vertically if
not specified)
RepositionMode
- The setting that determines if the popup needs to be repositioned when the
window is resized or scrolled
Methods
- initialize() - Initializes the ModalPopupExtender behavior.
- dipose() – Disposes or End the ModalPopupExtender behavior.
- show() - Displays the element that is referenced by the PopupControlID property as a modalpopup dialog box.
- disableTab() - Changes the tab indexes so that tabbing moves the focus only through the modal dialog box.
- Remarks - In Internet Explorer 6, the disableTab method also hides the select elements.
- restoreTab() - Restores the tab indexes from the page.
- Remarks - In Internet Explorer 6, the restoreTab method also restores the select elements.
- hide() - Hides the modal popup.
- Returns - Returns a Boolean value that specifies whether the popup was hidden.
MVC Modalpopup For Insert,Update,Delete CRUD Operation in MVC ModalPopup
Bind Image in DataList Control Database Image bind to DataList
Paging in Repeator Control Paging/Custom Paging in Repeator Control
popup1.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="popup1.aspx.cs" Inherits="popup1" %>
<%@ 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">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
</script>
<title></title>
</head>
<body bgcolor="Black" id="bd" runat="server">
<form runat="server" id="bd1">
<br />
<br />
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="panel2" runat="server" Visible="False" CssClass="pos" BackImageUrl="~/white.png">
<div style="position: absolute; width: 500px; left: 200px; height: 30px; top: 175px;
background-color: #00FFFF">
<b style="font-size: large; font-weight: bold; color: #FFFF00;">Add Record</b>
</div>
<div style="position: absolute; left: 670px; top: 175px">
<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/x.png" CausesValidation="False"
OnClick="ImageButton3_Click" />
</div>
<div style="background-position: url('white.png'); width: 500px; height: 350px; overflow: scroll;
background: url('white.png'); background-color: White; position: absolute; left: 200px;
top: 200px; z-index: 3200;"/>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton1_Click" align="center"><b style="font-size: large; font-weight: bold; color: #FFFF00; ">Add Record</b></asp:LinkButton>
<br />
<br />
<asp:GridView ID="GridView1" runat="server" Font-Size="Large" ForeColor="#333333"
ShowFooter="True" GridLines="None" AutoGenerateColumns="False" DataKeyNames="id"
OnRowDeleting="GridView1_RowDeleting">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="ID" Visible="false">
<ItemTemplate>
<asp:Label ID="Label10" runat="server" Text='<%# Eval("id") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("id") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="stream">
<ItemTemplate>
<asp:Label ID="Label6" runat="server" Text='<%# Eval("stream") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Gender">
<ItemTemplate>
<asp:Label ID="Label8" runat="server" Text='<%# Eval("gender") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Hobby">
<ItemTemplate>
<asp:Label ID="Label9" runat="server" Text='<%# Eval("hobby") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("photo") %>' Width="80"
Height="80" />
<asp:Label ID="i1" runat="server" Visible="false" Text='<%# Eval("photo") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:ImageButton ID="imgbtn" ImageUrl="~/ed.jpeg" runat="server" Width="25" Height="25"
OnClick="imgbtn_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:ImageButton ID="imgbtn1" ImageUrl="~/delete.png" runat="server" Width="25" Height="25"
OnClientClick="return
confirm('are you sure to Delete Record ?');" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="modalPopUpExtender1" runat="server" TargetControlID="LinkButton1"
PopupControlID="panel1" X="5" Y="5">
</asp:ModalPopupExtender>
<asp:ModalPopupExtender ID="modalPopUpExtender2" runat="server" TargetControlID="btnShowPopup"
PopupControlID="panel1" X="5" Y="5">
</asp:ModalPopupExtender>
<asp:ModalPopupExtender ID="modalPopUpExtender3" runat="server" TargetControlID="btnfst"
PopupControlID="panel2" X="5" Y="5">
</asp:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server" Visible="False" CssClass="pos" BackImageUrl="~/white.png">
<div style="position: absolute; width: 500px; left: 200px; height: 30px; top: 175px;
background-color: #00FFFF">
<b style="font-size: large; font-weight: bold; color: #FFFF00;">Add Record</b>
</div>
<div style="position: absolute; left: 670px; top: 175px">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/x.png" CausesValidation="False"
OnClick="ImageButton1_Click" />
</div>
<div style="background-position: url('white.png'); width: 500px; height: 350px; overflow: scroll;
background: url('white.png'); background-color: White; position: absolute; left: 200px;
top: 200px; z-index: 3200;">
<center>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"><b style="font-size: large; font-weight: bold; color: #FFFF00; ">Add Record</b></asp:LinkButton>
<label for="password">
Name</label>
<asp:TextBox ID="txtcnm" runat="server" CssClass="txtfield"> </asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtcnm"
ErrorMessage="company
Name can't be left blank" Display="Dynamic"> </asp:RequiredFieldValidator>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<label for="email">
Stream</label>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="txtfield">
</asp:DropDownList>
<br />
<table class="txtfield">
<tr>
<td rowspan="2">
<b>Gender</b>
</td>
<td>
<asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="True" GroupName="abc"
Text="male" />
<br />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="abc" AutoPostBack="True"
Text="female" />
</td>
</tr>
</table>
<br />
<table class="txtfield">
<tr>
<td rowspan="2">
<b>Hobby</b>
</td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Text="Cricket" />
<br />
<asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" Text="Football" />
<br />
<asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" Text="Tennis" />
<br />
<asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="true" Text="Other" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<label for="email">
choose photo</label>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="changeImg(this)" CssClass="btn" />
<asp:Image ID="img" runat="server" Style="position: absolute; left: 650px;" Width="100"
Height="50" />
<br />
<asp:Button ID="btnlogin" runat="server" Text="Add" OnClick="btnlogin_Click" CssClass="btn" />
<asp:Button ID="btnupdate" runat="server" Text="Update" OnClick="btnupdate_Click"
CssClass="btn" />
<asp:Button ID="btncancel" runat="server" Text="Cancel" OnClick="btncancel_Click"
CssClass="btn" CausesValidation="false" />
</center>
</div>
</asp:Panel>
<asp:Button ID="btnfst" runat="server" Text="Button" onclick="btnfst_Click" />
</form>
</body>
</html>
popup1.aspx.cs:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Web.UI.HtmlControls;
public partial class popup1 : System.Web.UI.Page
{
DataTable dt;
DataTable ds;
string no = null;
string connStr = @"Data
Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
grid();
DropDownList1.Items.Add("BCA");
DropDownList1.Items.Add("MCA");
DropDownList1.Items.Add("BBA");
DropDownList1.Items.Add("MBA");
}
}
public string chk()
{
string ch = null;
if (CheckBox1.Checked)
ch += CheckBox1.Text + ",";
if (CheckBox2.Checked)
ch += CheckBox2.Text + ",";
if (CheckBox3.Checked)
ch += CheckBox3.Text + ",";
if (CheckBox4.Checked)
ch += CheckBox4.Text + ",";
if (ch == null)
ch = "Other,";
return ch.TrimEnd(ch[ch.Length - 1]);
}
public string rad()
{
string ch = null;
if (RadioButton1.Checked)
ch = RadioButton1.Text;
else
ch = RadioButton2.Text;
return ch;
}
public void clear()
{
txtcnm.Text = "";
RadioButton1.Checked = false;
RadioButton2.Checked = false;
CheckBox1.Checked = false;
CheckBox2.Checked = false;
CheckBox3.Checked = false;
CheckBox4.Checked = false;
}
public void grid()
{
SqlConnection conn = new SqlConnection(connStr);
SqlDataAdapter dAd = new SqlDataAdapter("dbo.procsel", conn);
dAd.SelectCommand.CommandType =
CommandType.StoredProcedure;
DataSet dSet = new DataSet();
try
{
dAd.Fill(dSet);
GridView1.DataSource = dSet;
GridView1.DataBind();
}
catch
{
throw;
}
finally
{
dSet.Dispose();
dAd.Dispose();
conn.Close();
conn.Dispose();
}
}
protected void Button1_Click1(object sender, CommandEventArgs e)
{
}
protected void btnlogin_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileExtension = Path.GetExtension(FileUpload1.FileName.ToString());
fileExtension.ToLower();
if (fileExtension != ".gif" && fileExtension != ".jpg"
&& fileExtension != ".jpeg" && fileExtension != ".png")
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "ke", "<script>alert('only
jpeg,jpg,png,gif photo is allowed');</script>");
return;
}
string serverPath = Server.MapPath(@"~/" +
FileUpload1.FileName);
FileUpload1.SaveAs(serverPath);
}
else
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "ke", "<script>alert('plz
browse the image');</script>");
FileUpload1.Focus();
return;
}
SqlConnection conn = new SqlConnection(connStr);
conn.Open();
SqlCommand dCmd = new SqlCommand("dbo.procins", conn);
dCmd.CommandType =
CommandType.StoredProcedure;
try
{
string gender, hobby;
gender = rad();
hobby = chk();
dCmd.Parameters.AddWithValue("@name",
txtcnm.Text);
dCmd.Parameters.AddWithValue("@stream",
DropDownList1.SelectedValue);
dCmd.Parameters.AddWithValue("@gender",
gender);
dCmd.Parameters.AddWithValue("@hobby",
hobby);
dCmd.Parameters.AddWithValue("@photo",
FileUpload1.FileName);
int j = dCmd.ExecuteNonQuery();
if (j > 0)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "key", "<script>
alert('record added successfully');</script>");
grid();
clear();
}
}
catch
{
throw;
}
finally
{
dCmd.Dispose();
conn.Close();
conn.Dispose();
}
panel1.Visible = false;
modalPopUpExtender1.Hide();
GridView1.Style.Add("background-color", "white");
GridView1.Style.Add("opacity", "1.0");
GridView1.Style.Add("filter", "alpha(opacity=100)");
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
btncancel.Visible = false;
btnupdate.Visible = false;
Session["BgColor"] = "black";
GridView1.Style.Add("background-color", "black");
GridView1.Style.Add("opacity", "0.2");
GridView1.Style.Add("filter", "alpha(opacity=20)");
bd.Attributes.Add("background-color", "black");
bd.Attributes.Add("opacity", "0.2");
bd.Attributes.Add("filter", "alpha(opacity=20)");
panel1.Visible = true;
modalPopUpExtender1.Show();
//
modalPopUpExtender1.Focus();
panel1.Style.Add("background-position", "url('white.png')");
panel1.Style.Add("opacity", "2.0");
panel1.Style.Add("filter", "alpha(opacity=200)");
btnlogin.Visible = true;
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
panel1.Visible = false;
modalPopUpExtender1.Hide();
GridView1.Style.Add("background-color", "white");
GridView1.Style.Add("opacity", "1.0");
GridView1.Style.Add("filter", "alpha(opacity=100)");
clear();
}
protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
{
panel1.Visible = false;
modalPopUpExtender2.Hide();
GridView1.Style.Add("background-color", "white");
GridView1.Style.Add("opacity", "1.0");
GridView1.Style.Add("filter", "alpha(opacity=100)");
clear();
}
protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
{
panel2.Visible = false;
modalPopUpExtender3.Hide();
}
protected void btnupdate_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileExtension = Path.GetExtension(FileUpload1.FileName.ToString());
fileExtension.ToLower();
if (fileExtension != ".gif" && fileExtension != ".jpg"
&& fileExtension != ".jpeg" && fileExtension != ".png")
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "ke", "<script>alert('only
jpeg,jpg,png,gif photo is allowed');</script>");
return;
}
string serverPath = Server.MapPath(@"~/" +
FileUpload1.FileName);
FileUpload1.SaveAs(serverPath);
}
SqlConnection conn = new SqlConnection(connStr);
conn.Open();
SqlCommand dCmd = new SqlCommand("dbo.procupd", conn);
dCmd.CommandType =
CommandType.StoredProcedure;
try
{
string gender = rad();
string hobby = chk();
string fl = null;
if (FileUpload1.HasFile)
fl = FileUpload1.FileName;
else
fl = Session["fl"].ToString();
dCmd.Parameters.AddWithValue("@id",
Session["id"].ToString());
dCmd.Parameters.AddWithValue("@name",
txtcnm.Text);
dCmd.Parameters.AddWithValue("@stream",
DropDownList1.SelectedValue);
dCmd.Parameters.AddWithValue("@gender",
gender);
dCmd.Parameters.AddWithValue("@hobby",
hobby);
dCmd.Parameters.AddWithValue("@photo", fl);
int j = dCmd.ExecuteNonQuery();
if (j > 0)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "key", "<script>
alert('record updated successfully');</script>");
grid();
clear();
Session["id"] = null;
Session["fl"] = null;
}
}
catch
{
throw;
}
finally
{
dCmd.Dispose();
conn.Close();
conn.Dispose();
}
panel1.Visible = false;
modalPopUpExtender2.Hide();
GridView1.Style.Add("background-color", "white");
GridView1.Style.Add("opacity", "1.0");
GridView1.Style.Add("filter", "alpha(opacity=100)");
}
protected void btncancel_Click(object sender, EventArgs e)
{
panel1.Visible = false;
modalPopUpExtender2.Hide();
GridView1.Style.Add("background-color", "white");
GridView1.Style.Add("opacity", "1.0");
GridView1.Style.Add("filter", "alpha(opacity=100)");
clear();
}
protected void imgbtn_Click(object sender, ImageClickEventArgs e)
{
GridView1.Style.Add("background-color", "black");
GridView1.Style.Add("opacity", "0.4");
GridView1.Style.Add("filter", "alpha(opacity=40)");
panel1.Visible = true;
modalPopUpExtender2.Show();
//
modalPopUpExtender1.Focus();
panel1.Style.Add("background-position", "url('white.png')");
panel1.Style.Add("opacity", "2.0");
panel1.Style.Add("filter", "alpha(opacity=200)");
ImageButton btndetails = sender as ImageButton;
GridViewRow row =
(GridViewRow)btndetails.NamingContainer;
btncancel.Visible = true;
btnupdate.Visible = true;
btnlogin.Visible = false;
clear();
Label l =
(Label)GridView1.Rows[row.RowIndex].FindControl("Label10");
Label l1 = (Label)GridView1.Rows[row.RowIndex].FindControl("Label1");
Label l6 =
(Label)GridView1.Rows[row.RowIndex].FindControl("Label6");
Label l7 =
(Label)GridView1.Rows[row.RowIndex].FindControl("Label7");
Label l8 =
(Label)GridView1.Rows[row.RowIndex].FindControl("Label8");
Label l9 =
(Label)GridView1.Rows[row.RowIndex].FindControl("Label9");
Label l10 =
(Label)GridView1.Rows[row.RowIndex].FindControl("i1");
Session["id"] = l.Text;
Session["fl"] = l10.Text;
txtcnm.Text = l1.Text;
DropDownList1.SelectedValue = l6.Text;
if (l8.Text.Equals("male"))
{
RadioButton1.Checked = true;
}
else
{
RadioButton2.Checked = true;
}
string s = l9.Text;
string[] words = s.Split(',');
foreach (string word in words)
{
switch (word.ToString())
{
case ("Cricket"):
CheckBox1.Checked = true;
break;
case ("Football"):
CheckBox2.Checked = true;
break;
case ("Tennis"):
CheckBox3.Checked = true;
break;
case ("Other"):
CheckBox4.Checked = true;
break;
}
}
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string id = GridView1.DataKeys[e.RowIndex].Value.ToString();
SqlConnection conn = new SqlConnection(connStr);
conn.Open();
SqlCommand dCmd = new SqlCommand("dbo.procdel", conn);
dCmd.CommandType =
CommandType.StoredProcedure;
try
{
dCmd.Parameters.AddWithValue("@id", id);
int j = dCmd.ExecuteNonQuery();
if (j > 0)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), "key", "<script>
alert('deleted successfully');</script>");
grid();
}
}
catch
{
throw;
}
finally
{
dCmd.Dispose();
conn.Close();
conn.Dispose();
}
}
protected void btnfst_Click(object sender, EventArgs e)
{
btnfst.Visible = false;
panel1.Visible = false;
modalPopUpExtender2.Hide();
modalPopUpExtender1.Hide();
panel2.Visible = true;
grid();
panel2.Style.Add("background-position", "url('white.png')");
panel2.Style.Add("opacity", "2.0");
panel2.Style.Add("filter", "alpha(opacity=200)");
modalPopUpExtender3.Show();
}
}
0 comments:
Post a Comment