DotNet World: How to use Modap Popup Extender in Asp.net Ajax || How to Insert, Edit, Update, Delete data in Gridview using ModalPopup Extender.

The ModalPopup extender is used to display content.When it is displayed, only the content can be interacted and clicking on the rest of the page does nothing. When the user is done interacting with the modal content, the control dismisses the modal content and optionally runs custom script.

To implement this concept you need to follow the below steps

Step1 :
First you need to design a table in Sql Database to to save the records in database.

Step2:
Create a new Asp.net website in Visual Studio and write the following html code in the design part of the Default.aspx page.

Design Code :

</head>

<body>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<div>

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="Modlpop" runat ="server" TargetControlID ="btnShowPopup"

PopupControlID ="pnlShow" CancelControlID="btnClose"

BackgroundCssClass="modalBackground" DropShadow="True" PopupDragHandleControlID="pnlShow">

</asp:ModalPopupExtender>

<asp:Panel ID="pnlShow" runat ="server" style="display:block;">

<tr>

<asp:Label ID="lblProductID" runat="server" Text="Product_ID"></asp:Label>

</td>

<asp:TextBox ID="txtProductID" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Label ID="lblProductName" runat="server" Text="Product Name"></asp:Label>

</td>

<asp:TextBox ID="txtProductName" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>

</td>

<asp:TextBox ID="txtAmount" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />

</td>

<asp:Button ID="btnClose" runat="server" Text="close" />

</td>

</tr>

</table>

</div>

</asp:Panel>

<asp:GridView ID="grd1" runat="server" AutoGenerateColumns="False"

onrowcommand="grd1_RowCommand" CellPadding="4" ForeColor="#333333" GridLines="None">

<asp:TemplateField HeaderText="Product_ID">

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

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Product_Name">

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

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Amount">

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

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Edit">

<asp:LinkButton CommandName="cmdBind" runat="server" Text='<%#Eval("Product_ID")%> ' ID="hypeno"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField

<asp:TemplateField HeaderText="Delete">

<asp:LinkButton CommandName="cmdDelBind" OnClientClick ="return confirm('Are You Sure Deletion?');"

runat="server" Text="Delete" ID="LinkButton1"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

Step3:
Now open the Default.aspx.cs page and write the following source code.

Default.aspx.cs Page :

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;

public partial class _Default : System.Web.UI.Page

{

SqlConnection con = new SqlConnection("Data Source=sridhar;Initial Catalog=Register;User ID=sa;Password=123");

protected void Page_Load(object sender, EventArgs e)

{

BindList();

Modlpop.Show();

}

protected void btnSave_Click(object sender, EventArgs e)

{

if (btnSave.Text != "Update")

{

con.Open();

SqlCommand cmd =new SqlCommand("Insert into Product values ('" + txtProductID.Text + "','" + txtProductName.Text + "','" + txtAmount.Text + "')", con);

int result = cmd.ExecuteNonQuery();

con.Close();

}

else

{

con.Open();

SqlCommand cmd =

new SqlCommand("Update Product set Product_ID='" + txtProductID.Text + "',Product_Name='" + txtProductName.Text + "',Amount='" + txtAmount.Text + "' where Product_ID='" + Session["EditId"] + "'", con);

int result = cmd.ExecuteNonQuery();

con.Close();

}

BindList();

}

private void BindList()

{

con.Open();

SqlCommand cmd = new SqlCommand("Select * from Product", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataSet ds = new DataSet();

da.Fill(ds);

con.Close();

grd1.DataSource = ds;

grd1.DataBind();

}

protected void grd1_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "cmdBind")

{

LinkButton lb = (LinkButton)e.CommandSource;

Session["EditId"] = lb.Text;

DataTable dt = new DataTable();

SqlDataAdapter sqlda = new SqlDataAdapter("SELECT * FROM Product WHERE Product_ID ='" + Session["EditId"] + "'", con);

sqlda.Fill(dt);

txtProductID.Text = dt.DefaultView[0][0].ToString();

txtProductName.Text= dt.DefaultView[0][1].ToString();

txtAmount.Text = dt.DefaultView[0][2].ToString();

btnSave.Text = "Update";

BindList();

}

if (e.CommandName == "cmdDelBind")

{

LinkButton lb = (LinkButton)e.CommandSource;

Session["DelitId"] = lb.Text;

con.Open();

SqlCommand cmd = new SqlCommand("Delete From Product where Product_ID='" + Session["DelitId"] + "'", con);

int result = cmd.ExecuteNonQuery();

con.Close();

txtProductID.Text = "";

txtProductName.Text= "";

txtAmount.Text= "";

BindList();

}

Step4:
Now build the Solution and Debug it for the output.

Output Page :

DotNet World

Wednesday 4 April 2012

How to use Modap Popup Extender in Asp.net Ajax || How to Insert, Edit, Update, Delete data in Gridview using ModalPopup Extender.

1 comment:

Popular Posts