Click here to Skip to main content
15,888,286 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi,

Database Data Bind in gridview but dispaly the data in multiple times with Searching Sorting,Paging not working below code wise
how to solve this issue

<%@ Page Title="" Language="C#" MasterPageFile="~/Employee/FinalMenu_Master.master" AutoEventWireup="true"
    CodeFile="DW_Tasks.aspx.cs" Inherits="Employee_DW_Tasks" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
      <link type="text/css" href="Design/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link type="text/css" href="Design/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script type="text/jscript" src="Design/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="Design/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="Design/js/dataTables.responsive.min.js"></script>
           <script type="text/javascript" src="Scripts/jquery.min.js"></script>
           <link href="Design/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
   <script type="text/javascript">
        $(function () {
            $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers"
            });
        });
    </script>
<script type="text/javascript">
    $(function () {
 
        GetCustomers();
 
    });
    function GetCustomers() {
        //     debugger;
        $.ajax({
            type: "POST",
            url: "DW_Tasks.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }
 
    function OnSuccess(response) {
        // debugger;
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Customers");
        var row = $("[id*=gvCustomers] tr:last-child").clone(true);
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        $.each(customers, function () {
            //  debugger;
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("CustomerID").text());
            $("td", row).eq(1).html($(this).find("ContactName").text());
            $("td", row).eq(2).html($(this).find("City").text());
            $("[id*=gvCustomers]").append(row);
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });
    };
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
     <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" >
            <Columns>
                <asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
                <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
            </Columns>
        </asp:GridView>
</asp:Content>




Code:
private void BindDummyRow()
   {
       DataTable dummy = new DataTable();
       dummy.Columns.Add("CustomerID");
       dummy.Columns.Add("ContactName");
       dummy.Columns.Add("City");
       dummy.Rows.Add();
       gvCustomers.DataSource = dummy;
       gvCustomers.DataBind();
   }

   [WebMethod]
   public static string GetCustomers()
   {
       DataTable dt = new DataTable();
       dt.TableName = "Customers";
       dt.Columns.Add("CustomerID", typeof(string));
       dt.Columns.Add("ContactName", typeof(string));
       dt.Columns.Add("City", typeof(string));
       DataRow dr1 = dt.NewRow();
       dr1["CustomerID"] = 1;
       dr1["ContactName"] = "Customer1";
       dr1["City"] = "City1";
       dt.Rows.Add(dr1);
       DataRow dr2 = dt.NewRow();
       dr2["CustomerID"] = 2;
       dr2["ContactName"] = "Customer2";
       dr2["City"] = "City2";
       dt.Rows.Add(dr2);
       DataRow dr3 = dt.NewRow();
       dr3["CustomerID"] = 3;
       dr3["ContactName"] = "Customer3";
       dr3["City"] = "City3";
       dt.Rows.Add(dr3);
       DataRow dr4 = dt.NewRow();
       dr4["CustomerID"] = 4;
       dr4["ContactName"] = "Customer4";
       dr4["City"] = "City4";
       dt.Rows.Add(dr4);
       DataRow dr5 = dt.NewRow();
       dr5["CustomerID"] = 5;
       dr5["ContactName"] = "Customer5";
       dr5["City"] = "City5";
       dt.Rows.Add(dr5);
       DataSet ds = new DataSet();
       ds.Tables.Add(dt);
       return ds.GetXml();
   }


What I have tried:

I want Bind Data to Gridview with Jquery and Bootsrap Datatable Search,Sorting,Paging all are this Above code wise not working.
Posted
Updated 4-Apr-19 7:02am
v4
Comments
[no name] 4-Apr-19 10:43am    
"Not working".

Also, everyone is "not working" on your problem given only that bit of information.

1 solution

GridView is a server-side data representation control and it is recommended to bind it with data at the server. If you want to use GridView, you need to use transform the result from your WebService and convert it into a DataTable or a List type so you can bind them in your GridView. Here's an example on how to consume WebService in ASP.NET: Consuming Web Service In an ASP.Net Web Application[^]

Now, if you want to bind your GridView at the client using JavaScript/jQuery then GridView isn't the best control for you. While it could be possible, I'm pretty sure it will give you a lot pain in the butt. What I'm trying to say is you must avoid mixing server side conntrols with client-side manipulation. Instead, use a client-side Grid that you can easily bind them at the client. One great example is using jQuery DataTable plugin: Display Data In ASP.NET Using jQuery DataTables Plugin[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900