locked
GridView without Refresh when m deleting record in gridview RRS feed

  • Question

  • User491718545 posted

    Hi,

    i want to delete record in gridview without using Script Manager..

    want to delete using ajax..

    <asp:GridView ID="GridView1" runat="server" CssClass="table table-hover" AllowPaging = "true" GridLines="None" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging">
    <Columns>
    <asp:TemplateField HeaderText="Order Id">
    <ItemTemplate>
    <asp:Label ID="lbPassport" runat="server" Text='<%# Bind("[Order Id]") %>'></asp:Label>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Status">
    <ItemTemplate>
    <a href="#" id="<%# Eval("[Order Id]") %>" onclick='Check(this.id)' class="popup">Show Details </a>

    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>

    >

    </Columns>
    </asp:GridView>

    <Script>

    function Check(obj)

    {

    here i il get id..passing this id to web Method want to delete that record without Page Refreshing

    }

    </script>

    thanks

    Saturday, December 21, 2013 2:46 AM

Answers

  • User1734617369 posted

    Hi,

    If you don't mind adding some jQuery to your site you could do something like this, the page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.popup').click(function ()
                {
                    var source = this;
                    $.ajax({
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        url: '/WebForm1.aspx/DeleteMethod',
                        data: JSON.stringify({ id: this.id }),
                    }).
                        fail(function (s)
                        {
                            alert(s);
                        })
                        .done(function () {
                        var par = $(source).parents('tr');
                        par.remove();
                    });                
                });
            });
    
            function Check(id)
            {
                var par = $('#' + id).parent().parent();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"  DataKeyNames="OrderId">
                        <Columns>
                         <asp:TemplateField HeaderText="Order Id">
                         <ItemTemplate>
                         <asp:Label ID="lbPassport" runat="server" Text='<%# Eval("OrderId") %>'></asp:Label>
                         </ItemTemplate>
                         <ItemStyle HorizontalAlign="Center" Width="30px" />
                         </asp:TemplateField>
                        <asp:TemplateField HeaderText="Status">
                         <ItemTemplate>
                         <a href="#" id="<%# Eval("OrderId") %>" class="popup">Show Details</a>
                         </ItemTemplate>
                         <ItemStyle HorizontalAlign="Center" Width="30px" />
                         </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>

    and the code behind to show an example web method:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication5
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if(IsPostBack)
                {
                    return;
                }
    
                var orders = new List<Order>();
                for (int i = 0; i < 5; i++)
                {
                    orders.Add(new Order { OrderId = i });
                }
    
                GridView1.DataSource = orders;
                GridView1.DataBind();
            }
    
            [WebMethod]
            public static void DeleteMethod(int id)
            {
                var intId = id;
            }
        }
    
        public class Order
        {
            public int OrderId { get; set; }
        }
    }

    Hope this helps!

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, December 21, 2013 10:49 AM

All replies

  • Saturday, December 21, 2013 3:34 AM
  • User1734617369 posted

    Hi,

    If you don't mind adding some jQuery to your site you could do something like this, the page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.popup').click(function ()
                {
                    var source = this;
                    $.ajax({
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        url: '/WebForm1.aspx/DeleteMethod',
                        data: JSON.stringify({ id: this.id }),
                    }).
                        fail(function (s)
                        {
                            alert(s);
                        })
                        .done(function () {
                        var par = $(source).parents('tr');
                        par.remove();
                    });                
                });
            });
    
            function Check(id)
            {
                var par = $('#' + id).parent().parent();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"  DataKeyNames="OrderId">
                        <Columns>
                         <asp:TemplateField HeaderText="Order Id">
                         <ItemTemplate>
                         <asp:Label ID="lbPassport" runat="server" Text='<%# Eval("OrderId") %>'></asp:Label>
                         </ItemTemplate>
                         <ItemStyle HorizontalAlign="Center" Width="30px" />
                         </asp:TemplateField>
                        <asp:TemplateField HeaderText="Status">
                         <ItemTemplate>
                         <a href="#" id="<%# Eval("OrderId") %>" class="popup">Show Details</a>
                         </ItemTemplate>
                         <ItemStyle HorizontalAlign="Center" Width="30px" />
                         </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>

    and the code behind to show an example web method:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication5
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if(IsPostBack)
                {
                    return;
                }
    
                var orders = new List<Order>();
                for (int i = 0; i < 5; i++)
                {
                    orders.Add(new Order { OrderId = i });
                }
    
                GridView1.DataSource = orders;
                GridView1.DataBind();
            }
    
            [WebMethod]
            public static void DeleteMethod(int id)
            {
                var intId = id;
            }
        }
    
        public class Order
        {
            public int OrderId { get; set; }
        }
    }

    Hope this helps!

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, December 21, 2013 10:49 AM
  • User491718545 posted

    thank u for ur answer..and one more question,i cant send large data using ajax..m not getting any answer to solve this

    this is my coding

    <textarea name="txt_Description" id="txt_address"  runat="server" class="span5 wysihtml5" cols="40" rows="5" ></textarea>

    $.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    url: 'ProductMaster.aspx/InsertMethod',
    data: "{ 'Address':'" + $('#<%=Address.ClientID%>').val() + "'}",--if m give more than 200  characters it doesnot call web method
    async: false,
    success: function (response) {
    $('#btnSubmit').prop('disabled', false);
    $('#btnSubmit').prop('value', 'Add New');

    var result = response.d.split(",");
    $('#txtID').val('');
    $('#txtID').val(result[3]);
    id = result[3];
    if (result[0] == "Saved Sucessfully" || result[0] == "Updated Sucessfully") {

    window.location.href = "ProductMasterView.aspx";

    }
    },
    error: function ()
    { console.log('there is some error'); }
    });

    public static string InsertMethod(string Address)

    {

    //Cant' pass large can't using ajax

    }

    Thanks

    Sunday, December 22, 2013 1:46 AM
  • User1734617369 posted

    Hi,

    If I do a test page looking like this:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductMaster.aspx.cs" Inherits="WebApplication5.ProductMaster" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#ok').click(function() {        
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'ProductMaster.aspx/InsertMethod',
                data: "{ 'Address':'" + $('#<%=Address.ClientID%>').val() + "'}",
                async: false,
                success: function (response) {
                    $('#btnSubmit').prop('disabled', false);
                    $('#btnSubmit').prop('value', 'Add New');
    
                    var result = response.d.split(",");
                    $('#txtID').val('');
                    $('#txtID').val(result[3]);
                    id = result[3];
                    if (result[0] == "Saved Sucessfully" || result[0] == "Updated Sucessfully") {
    
                        window.location.href = "ProductMasterView.aspx";
                    }
                },
                error: function ()
                { console.log('there is some error'); }
                });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="Address" runat="server" TextMode="MultiLine" Columns="40" Rows="5"></asp:TextBox>
            <input type="button" name="ok" id="ok" value="Ok" />
        </div>
        </form>
    </body>
    </html>

    and the code behind:

    using System;
    using System.Web.Services;
    
    namespace WebApplication5
    {
        public partial class ProductMaster : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            [WebMethod]
            public static string InsertMethod(string Address)
            {
                var adress = Address;
    
                return "1,2,3,4";
            }
        }
    }

    this works without any issues. The code for the textarea that you provided doesn't match the control that you are using in the ajax call, is that just a copy paste error?

    /Johan

    Sunday, December 22, 2013 9:07 AM