Nested ModalPopupExtender with insert update delete operation in Asp.Net ~ Asp .Net Solution Kirit Kapupara

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">

</script>

</head>

<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>

<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 />

<asp:GridView ID="GridView1" runat="server" Font-Size="Large" ForeColor="#333333"

ShowFooter="True" GridLines="None" AutoGenerateColumns="False" DataKeyNames="id"

OnRowDeleting="GridView1_RowDeleting">

<asp:TemplateField HeaderText="ID" Visible="false">

<asp:Label ID="Label10" runat="server" Text='<%# Eval("id") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("id") %>'></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="name">

<asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("name") %>'></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="stream">

<asp:Label ID="Label6" runat="server" Text='<%# Eval("stream") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Gender">

<asp:Label ID="Label8" runat="server" Text='<%# Eval("gender") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Hobby">

<asp:Label ID="Label9" runat="server" Text='<%# Eval("hobby") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Image">

<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">

<asp:ImageButton ID="imgbtn" ImageUrl="~/ed.jpeg" runat="server" Width="25" Height="25"

OnClick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Delete">

<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>

<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;">

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"><b style="font-size: large; font-weight: bold; color: #FFFF00; ">Add Record</b></asp:LinkButton>

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">

Stream</label>

            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="txtfield">

</asp:DropDownList>

<br />

<tr>

<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 />

<tr>

<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>

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();

}

Friday 5 April 2013

Nested ModalPopupExtender with insert update delete operation in Asp.Net

What is Nested Popup:-

Description:-

0 comments:

Post a Comment

Like my Page on facebook

Popular Posts

Author

Label