Nirmal Kumar Ответов: 1

Как привязать данные к gridview display несколько раз проблема с использованием jquery in ASP.NET мастер-страница


Привет,

Данные базы данных привязываются в gridview,но диспалируют данные в несколько раз с помощью поисковой сортировки, подкачка не работает ниже кода мудро
как решить эту проблему

<%@ 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>




Код:
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();
   }


Что я уже пробовал:

Я хочу привязать данные к Gridview с помощью Jquery и Bootsrap Datatable Search,Sorting,Paging-все это вышеописанный код мудро не работает.

Gerry Schmitz

"Не работать".

Кроме того, все "не работают" над вашей проблемой, учитывая только этот бит информации.

1 Ответов

Рейтинг:
1

Vincent Maverick Durano

GridView это серверный элемент управления представлением данных, и рекомендуется привязать его к данным на сервере. Если вы хотите использовать GridView, вам нужно использовать преобразование результата из вашего WebService и превратить его в DataTable или List введите их так, чтобы вы могли связать их в своем GridView Вот пример того, как потреблять WebService в ASP.NET: Потребление веб-сервиса в ASP.Net веб-приложение[^]

Теперь, если вы хотите связать свою GridView у клиента с помощью JavaScript/jQuery затем GridView это не лучший контроль для вас. Хотя это вполне возможно, я почти уверен, что это доставит вам много боли в заднице. Я пытаюсь сказать, что вы должны избегать смешивания серверных соединений с клиентскими манипуляциями. Вместо этого используйте сетку на стороне клиента, чтобы вы могли легко привязать их к клиенту. Одним из замечательных примеров является использование jQuery DataTable плагин: Отображение данных в ASP.NET использование плагина jQuery DataTables[^]