jQuery Datentabellen serverseitige Verarbeitung mit ASP.NET WebForms
-
30-09-2019 - |
Frage
Problem:
- jQuery Tables serverseitige Verarbeitung mit ASP.NET WebForms.
Lösung:
- beantwortet Darin Dimitrov die Frage ein Beispiel welche Seiten und Sorten verwenden, aber jede Suche nicht tun. Hier ist meine ** Grund ** Änderung seiner Arbeit zu Arbeit an seinem Beispiel macht die Suche:
public class Data : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Paging parameters:
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
// Sorting parameters
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
var iSortDir = context.Request["sSortDir_0"];
// Search parameters
var sSearch = context.Request["sSearch"];
// Fetch the data from a repository (in my case in-memory)
var persons = Person.GetPersons();
// Define an order function based on the iSortCol parameter
Func<Person, object> order = person => iSortCol == 0 ? (object) person.Id : person.Name;
// Define the order direction based on the iSortDir parameter
persons = "desc" == iSortDir ? persons.OrderByDescending(order) : persons.OrderBy(order);
// prepare an anonymous object for JSON serialization
var result = new
{
iTotalRecords = persons.Count(),
iTotalDisplayRecords = persons.Count(),
aaData = persons
.Where(p => p.Name.Contains(sSearch)) // Search: Avoid Contains() in production
.Where(p => p.Id.ToString().Contains(sSearch))
.Select(p => new[] {p.Id.ToString(), p.Name})
.Skip(iDisplayStart) // Paging
.Take(iDisplayLength)
};
var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
public bool IsReusable { get { return false; } }
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public static IEnumerable<Person> GetPersons()
{
for (int i = 0; i < 57; i++)
{
yield return new Person { Id = i, Name = "name " + i };
}
}
}
Lösung
Ich schrieb ein einfaches Beispiel, das die Idee veranschaulichen soll.
Starten Sie durch eine generische Behandlungsroutine das Schreiben von Daten auf der Server-Seite Handling (Data.ashx
aber dies könnte eine Web-Seite, Web-Service, alles serverseitige Skript der Lage sein, Rückkehr JSON formated Daten):
public class Data : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Those parameters are sent by the plugin
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
var iSortDir = context.Request["sSortDir_0"];
// Fetch the data from a repository (in my case in-memory)
var persons = Person.GetPersons();
// Define an order function based on the iSortCol parameter
Func<Person, object> order = p =>
{
if (iSortCol == 0)
{
return p.Id;
}
return p.Name;
};
// Define the order direction based on the iSortDir parameter
if ("desc" == iSortDir)
{
persons = persons.OrderByDescending(order);
}
else
{
persons = persons.OrderBy(order);
}
// prepare an anonymous object for JSON serialization
var result = new
{
iTotalRecords = persons.Count(),
iTotalDisplayRecords = persons.Count(),
aaData = persons
.Select(p => new[] { p.Id.ToString(), p.Name })
.Skip(iDisplayStart)
.Take(iDisplayLength)
};
var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public static IEnumerable<Person> GetPersons()
{
for (int i = 0; i < 57; i++)
{
yield return new Person
{
Id = i,
Name = "name " + i
};
}
}
}
Und dann ein Webformular:
<%@ Page Title="Home Page" Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="/styles/demo_table.css" />
<script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="/scripts/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function () {
$('#example').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/data.ashx'
});
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Das Beispiel stark vereinfacht ist, aber ich hoffe, es wird die Grundlagen veranschaulicht, wie starrte werden.
Andere Tipps
Die Beispielseiten Sie tatsächlich sortiert aufgelistet, Paginieren, Filter bei der Initialisierung. Im Grunde genommen, übergeben Sie diese Daten über Query-String.
So etwas wie:
sAjaxSource": "../examples_support/server_processing.ashx?SortBy=FirstName&FilterBy=StackOverFlow"
Having said that, wenn Sie ein bestimmtes Verhalten außer Kraft setzen wollen oder Datatable ist functionaly zu verlängern, Sie haben ein paar Optionen: Erweiterung der Datatable-Funktionalität Customizing Scrolling
Sie können den obigen Beispielen folgen und passen sie zum Filtern, Sortieren und Paginierung
Ich bin asp.Net Entwickler ... Bitte nehmen Sie sich daran, dass .net-Entwickler Web-Build verwendet werden Seiten .net-Steuerelemente verwenden, kein Javascript Kontrollen.
Der Unterschied ist: eine asp.net Kontrolle ist eine serverseitige Steuerung, Sie schaffen es ohne Ihre selbst schreiben JavaScript aktivieren, aber die Programmierung in C # / VB.net. Die asp.net Steuerung erzeugt automatisch die clientseitige JavaScript-Steuerung, wenn die Website ausgeführt wird.
Es Ansatz ist "modern" und wirklich mächtig.
Wenn Sie also ein .net Entwickler sind empfehle ich Ihnen diesen Ansatz zu verwenden. Wenn Sie einen JavaScript-Entwickler sind und Sie bauen nur die clientseitige Schnittstelle Ihrer Anwendung, wahrscheinlich benötigen Sie einen webService, die die serverseitige Daten im XML-Format sieht vor, dass Sie anrufen und HTTP lesen über können. Aber zu „suchen“, bietet „Paginierung“ und „Sortierung“ über AJAX Sie benötigen serverseitige Entwicklung ...
Vielleicht könnte dies helfen? http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx
http://naspinski.net /post/REAL-AJAX-with-AspNet-(not-AspNet-AJAX).aspx
Dieser Typ Ajax Arbeit mit asp.net und Datentabellen gemacht hat.