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.

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 :


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<form id="form1" runat="server">
<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;">
<div style="border:Solid 3px #D55500;background-color:#D55500; text-align:left;">
<table class="style1">
   <tr>
<td class="style6">
      <asp:Label ID="lblProductID" runat="server" Text="Product_ID"></asp:Label>
     </td>
   <td class="style3">
      <asp:TextBox ID="txtProductID" runat="server"></asp:TextBox>
   </td>
   </tr>
     <tr>
       <td class="style6">
       <asp:Label ID="lblProductName" runat="server" Text="Product Name"></asp:Label>
    </td>
        <td class="style3">
       <asp:TextBox ID="txtProductName" runat="server"></asp:TextBox>
        </td>
        </tr>
      <tr>
        <td class="style6">
        <asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>
         </td>
          <td class="style3">
         <asp:TextBox ID="txtAmount" runat="server"></asp:TextBox>
         </td>
        </tr>
          <tr>
         <td class="style6">
         <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
          </td>
         <td class="style3">
          <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">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Product_ID">
<ItemTemplate>
<asp:Label ID="lblProID" runat ="server" Text ='<%#Eval("Product_ID") %> '> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Product_Name">
<ItemTemplate>
<asp:Label ID="lblProName" runat ="server" Text ='<%# Eval("Product_Name") %> '> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:Label ID="lblProAmount" runat ="server" Text ='<%#Eval("Amount")%> '> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton CommandName="cmdBind"  runat="server"  Text='<%#Eval("Product_ID")%> ' ID="hypeno"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton CommandName="cmdDelBind" OnClientClick ="return confirm('Are You Sure Deletion?');"
         runat="server"  Text="Delete" ID="LinkButton1"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</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 :



1 comment:

  1. really nice sir ...
    you can try another example of it here this is also very helpful...
    http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html

    ReplyDelete

CRUD operations using AngularJS in Asp.Net MVC

In this article I will show you how to perform CRUD operations in Asp.Net MVC5 using AngularJS. Add AngularJS using the Manage Nuget Pack...