AJAX Modal Popup Extender for Gridview Edit Update Delete


Code in ASPX page:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="EmpNo" ReadOnly="true"
HeaderText="EmpId"/>
<asp:BoundField DataField="EmpName" HeaderText="Empname" />
<asp:BoundField DataField="EmpJob" HeaderText="EmpJob" />
<asp:BoundField DataField="EmpSal" HeaderText="EmpSal" />
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server"
OnClick="ShowPopup">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333"
HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True"
ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<br />
<asp:Button ID="Button1" runat="server" Text="Button"
style="display:none" />
<asp:ModalPopupExtender ID="Button1_ModalPopupExtender"
runat="server" DynamicServicePath="" Enabled="True"
PopupControlID="Panel1" TargetControlID="Button1"
CancelControlID="Button3" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server"
BorderColor="#990033" BorderWidth="2px">
<table class="style1" bgcolor="#FFFFCC">
<tr>
<td align="center" bgcolor="#FFFF99" colspan="2"
style="color: #FFFFFF; font-weight: 700;
font-size: large; background-color: #990033;">
Edit Details</td>
</tr>
<tr>
<td class="style5">
EmpId:</td>
<td class="style5">
<asp:Label ID="Id" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
EmpName:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
EmpJob:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
EmpSal:</td>
<td>
<asp:TextBox ID="TextBox4" runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
<asp:Button ID="Button2" runat="server"
onclick="Button2_Click" Text="Update" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #990033">
&nbsp;</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>

Code Behind:

DatabaseModel.DatabaseEntities obj = new DatabaseModel.DatabaseEntities();
    Class1 obj3 = new Class1();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetData();
        }
    }
    public void GetData()
    {
        var x = (from n in obj.Emps
                 select n);
        GridView1.DataSource = x;
        GridView1.DataBind();
    }
    public void ShowPopup(object sender, EventArgs e)
    {
        LinkButton lnk = sender as LinkButton;
        GridViewRow Row = (GridViewRow)lnk.NamingContainer;
        Id.Text = Row.Cells[0].Text;
        TextBox2.Text = Row.Cells[1].Text;
        TextBox3.Text = Row.Cells[2].Text;
        TextBox4.Text = Row.Cells[3].Text;
        this.Button1_ModalPopupExtender.Show();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        DatabaseModel.Emp emp = new DatabaseModel.Emp();
        int id = Convert.ToInt32(Id.Text);
        DatabaseModel.DatabaseEntities Model = new DatabaseModel.DatabaseEntities();
        var x = (from n in Model.Emps
                 where n.EmpNo == id
                 select n).FirstOrDefault();
        if (x != null)
        {
            x.EmpName = TextBox2.Text;
            x.EmpJob = TextBox3.Text;
            x.EmpSal = Convert.ToDecimal(TextBox4.Text);
            Model.SaveChanges();
            GetData();
        }
    }

DownloadSampleCode

if you are getting the following error:

A potentially dangerous Request.Path value was detected from the client(&).

Please click on following link

https://chikkanti.wordpress.com/2011/11/22/a-potentially-dangerous-request-path-value-was-detected-from-the-client/

Advertisements

One thought on “AJAX Modal Popup Extender for Gridview Edit Update Delete

  1. This is awesome!! really helpful for me. Thanks for sharing with us. Following links also helped me to complete my task.

    codeproject.com/Articles/439688/Creating-ASP-NET-application-with-n-tier-architect

    mindstick.com/Articles/eef68c81-0927-4317-8387-d8d98e876f7c/?FileUpload%20in%20GridView%20with%20Ajax%20Modal%20Popup

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s