Erstellen Sie benutzerdefinierte Tabellen mit WebGrid

Wenn Sie bei Verwendung von ASP.NET MVC Datentabellen mit Paging und Sortieren von Grund auf neu erstellen, fehlt Ihnen einer der benutzerfreundlichsten Helfer. WebGrid bietet integrierte Unterstützung für anklickbare Kopfzeilen zum Sortieren und Blättern in der Fußzeile. Es gibt jedoch viele Fehlinformationen darüber, was Sie mit dem WebGrid tun können und was nicht.

Dieser Artikel behandelt das Erstellen einer vollständig formatierten Tabelle mit einer stark typisierten Ansicht mithilfe des WebGrid-Hilfsprogramms. Der vollständige Code für dieses Projekt Enthält Ansichten, die das WebGrid ohne Formatierung anzeigen, nur mit Fußzeilen-CSS-Formatierung, mit Tabellenformatierung und unserem Hauptthema - Anpassen der Fußzeile mit Paging und anderen Informationen.

Die Daten für dieses Projekt sind eine Aufzählungsliste, die in der Steuerung erstellt wurde. Normalerweise verwende ich SQL Server und greife mit Entity Framework auf die Daten zu. Ich habe die Daten im Controller erstellt, um sie kurz genug für einen Artikel zu halten. In diesem Beispiel verwenden Sie ein Datenmodell wie bei Entity Framework, aber Sie werden die Daten nicht in einer Datenbank speichern oder darauf zugreifen.

Wenn Sie sehen möchten, was während der Bearbeitung mit Ihrer Seite passiert, können Sie im Internet Explorer F12 drücken und sehen, wie die Stile angewendet werden



Wenn Sie sehen möchten, was während der Bearbeitung mit Ihrer Seite passiert, können Sie im Internet Explorer F12 drücken und sehen, wie die Stile angewendet werden

Das Modell verstehen

Der WebGrid-Helfer gibt eine reguläre HTML-Tabelle zurück. Sie können CSS-Stile anwenden, um sie wie jede andere Tabelle zu formatieren. Zunächst erstellen Sie das Raster und erfahren, wie Sie die Spalten, Zeilen und Fußzeilen formatieren. Als Nächstes erfahren Sie, wie Sie die Paging-Fußzeile mithilfe einer von mir entwickelten Technik mit zusätzlichen Informationen anpassen können. In diesem Beispiel verwenden Sie Daten in einem Modell namens 'Transaktion' - es ist einfach: Transaktion der öffentlichen Klasse

öffentliche Klasse Transaktion
{public int TransactionID {get; einstellen; }}
public DateTime TranDate {get; einstellen; }}
öffentliche Zeichenfolge Beschreibung {get; einstellen; }}
public int Units {get; einstellen; }}
public double UnitPrice {get; einstellen; }}
public double Total {get; einstellen; }}


Dies sollte sich im Ordner Models im befinden unterstützender Download für das Tutorial mit dem Namen Transaction.cs. In der Steuerung füllen Sie dieses Modell mit dem folgenden Code (um Platz zu sparen, ist dies nur ein Beispiel aus drei Datensätzen):

public IEnumerable GetList ()
(var tr = neue Liste () {
neue Transaktion {TransactionID = 1, Description = 'Large Latte',
TranDate = System.DateTime.Parse ('6/1/2012'), Units = 5, UnitPrice = 3.5},
neue Transaktion {TransactionID = 2, Description = 'Skinny Latte',
TranDate = System.DateTime.Parse ('05.06.2012'), Units = 7, UnitPrice = 3.25},
………
neue Transaktion {TransactionID = 14, Description = 'Mittlerer Kaffee des Tages', TranDate = System.DateTime.Parse ('9/13/2012'), Units = 58, UnitPrice = 2.15}};
return tr;}


Im vollständigen Projektcode rufe ich diese Methode aus allen Ansichten auf, um die Daten zu füllen, die an die Ansicht gesendet werden sollen. Möglicherweise haben Sie auch bemerkt, dass das Modell ein Gesamtfeld hat, das nicht ausgefüllt wird. Ich habe beschlossen, dies nicht in den Controller einzufügen, damit ich Ihnen zeigen kann, wie ein berechnetes Feld in einem WebGrid erstellt wird. Im vollständigen Projektcode habe ich zwei, wo es in der Steuerung berechnet wird.

Der Controller-Code für die Ansicht besteht nur aus wenigen Zeilen, da das Paging und Sortieren vom WebGrid-Helfer ausgeführt wird. Da die Ansicht ein Formular zum Filtern der Daten enthält, gibt es in der Steuerung zwei ActionResult-Prozeduren für diese Ansicht.

Das HttpPost ActionResult führt nur eine Umleitung durch und enthält die Parameter für den Datumsbereich. Wenn Sie dies auf diese Weise tun, wird der Datumsbereich vom WebGrid-Helfer automatisch in die anklickbaren Header eingebettet. Wenn Sie gerade die gefilterte Ansicht zurückgegeben haben und den Header angeklickt haben, wird der Filter entfernt.

public ActionResult Grid (DateTime? Begin, DateTime? End)
{var tr = GetList ();
if (Begin! = null && End! = null)
{DateTime begindt = Convert.ToDateTime (Begin);
DateTime enddt = Convert.ToDateTime (End) .AddDays (1);
var tr2 = tr.Where (a => a.TranDate> = Begindt && a.TranDate< enddt);
return View (tr2);}
return View (tr);}
[HttpPost]
öffentliches ActionResult-Raster (FormCollection fc)
{return RedirectToAction ('Grid', neu {Begin = fc ['begin'], End = fc ['end']});}


Das erste ActionResult verfügt über zwei optionale Parameter (gekennzeichnet durch das Fragezeichen nach dem Datentyp) und funktioniert recht einfach. Zunächst wird die Liste mit dem zuvor gezeigten Code abgerufen.

Wenn sowohl der Anfangs- als auch der Endparameter nicht null sind, werden sie konvertiert, um mit der Abfrage zu arbeiten. Da das DateTime-Feld den Zeitanteil enthalten kann, wird dem Enddatum ein Tag hinzugefügt, und der Filter ist auf weniger als den End-Parameter plus einen Tag eingestellt.

Die Filterung erfolgt mit Lambda-Ausdrücken, die beim Arbeiten mit Daten sehr nützlich sind.

Unser unformatiertes WebGrid zeigt den Standardfußzeilenstil. Im Verlauf dieses Tutorials werden wir einen benutzerdefinierten Stil für die Fußzeile einrichten

Unser unformatiertes WebGrid zeigt den Standardfußzeilenstil. Im Verlauf dieses Tutorials werden wir einen benutzerdefinierten Stil für die Fußzeile einrichten

Das nächste ActionResult übernimmt die FormCollection und die Parameter Begin und End werden an die Hauptaktion zurückgegeben. Wenn Sie dies mit dem Versuch vergleichen, das gesamte Paging und Sortieren in den Controller zu integrieren, werden Sie feststellen, dass dies ein sehr kompakter Code ist. Jetzt können Sie an der Ansicht arbeiten. Die erste Codezeile in der Ansicht legt fest, dass es sich um eine stark typisierte Ansicht handelt. Das heißt:

@model IEnumerable

Dies bedeutet, dass die Ansicht erwartet, dass der Controller eine aufzählbare Sammlung der Modelltransaktion an die Ansicht übergibt. Dies sind die Daten, die an den WebGrid-Helfer übergeben werden. Der nächste Codeabschnitt ist der Stilblock, der die CSS-Klassen enthält, die Sie im WebGrid verwenden werden.


.tranlist tr: n-tes Kind (ungerade) {Hintergrundfarbe: # afc1d9; }}
.tranlist tr: n-tes Kind (gerade) {Hintergrundfarbe: weiß; }}
.tranlist th {Hintergrundfarbe: Schwarz; Farbe: Weiß; }}
.tranlist a {Farbe: Weiß; }}
.smallcolumn {min-width: 20px;}
.medcolumn {min-width: 50px;}. bigcolumn {min-width: 100px; }}
.linkcolumn {min-width: 90px; Textausrichtung: Mitte; } .linkcolumn a {Farbe: Schwarz;
} .linkcolumn a: hover {Farbe: Blau; }}
.footstuff {Hintergrundfarbe: Weiß; Farbe: Rot; }}
.footstuff a: besucht {Farbe: Blau; } .footstuff a {color: Blue;}
.footstuff td {Hintergrundfarbe: Weiß; Randfarbe: Weiß; }}
.headerstyle th {text-transform: großschreiben; Textausrichtung: Mitte;}


Diese Stile bewirken Folgendes: Festlegen verschiedener Hintergrundfarben für abwechselnde Zeilen, Festlegen der Tabellenüberschrift schwarz mit weißem Text, Festlegen der Mindestbreiten und -stile für bestimmte Spalten und Festlegen des Stils für die Fußzeile. Die tatsächlichen Stile hier sind nicht so wichtig. Wichtig ist, wie Sie dem WebGrid mitteilen, wie diese Stile verwendet werden sollen. Dies wird in Kürze erläutert.

Erstellen eines WebGrid

Im nächsten Codeabschnitt wird ein WebGrid mit dem Modell erstellt und Seitenvariablen eingerichtet, die die Werte aus der Abfragezeichenfolge enthalten, sofern vorhanden.

@ {var grid = new WebGrid (Modell, defaultSort: 'TransactionID', rowsPerPage: 5);
if (Request.QueryString [grid.SortDirectionFieldName] .IsEmpty ())
{grid.SortDirection = SortDirection.Descending;}
DateTime beg = System.DateTime.Now; DateTime end = System.DateTime.
Jetzt;
if (Model.Count ()! = 0) {beg = Model.Min (a => a.TranDate);
end = Model.Max (b => b.TranDate);}}


Dadurch wird lediglich das Rasterobjekt erstellt, die Daten aus dem Modell übergeben, das Sortierfeld auf TransactionID festgelegt und das Paging für fünf Zeilen pro Seite eingerichtet. Sie müssen eine andere Methode aufrufen, um HTML an den Browser zurückzugeben. Der andere Code legt eine anfängliche Sortierrichtung für den Abstieg fest, um zuerst die neuesten Transaktionen anzuzeigen, und ruft die Daten für die neuesten und ältesten Transaktionen ab. Wenn Sie mehr als ein Raster auf der Seite haben, verwenden Sie grid.SortDirectionFieldName anstelle des Standardwerts sortdir, damit der Feldname geändert werden kann. Im nächsten Codeabschnitt wird das Formular erstellt, damit Sie die Filterung nach Datumsbereich implementieren können.


Start
Ende
type = 'submit' value = 'submit' />


Der Datumsbereich zeigt das aktuelle Datum an, wenn der Datensatz leer ist, und das erste und letzte Datum im Datensatz, wenn Datensätze vorhanden sind. Die Schaltfläche 'Senden' ist nur minimal formatiert. Als nächstes sind wir bereit für den Code, der das Raster erstellt:

@ grid.GetHtml (Modus: WebGridPagerModes.All, tableStyle: 'tranlist',
headerStyle: 'headerstyle', firstText: 'First', lastText: 'Last',
Spalten: grid.Columns (grid.Column ('TranDate', Überschrift: 'Trans Date', Format:
@@ item.TranDate.ToShortDateString ()),
grid.Column ('Beschreibung', Kopfzeile: 'Transaktionsbeschreibung', Stil:
'bigcolumn'), grid.Column ('Units', Überschrift: 'Units', Stil: 'smallcolumn'),
grid.Column ('UnitPrice', Überschrift: 'Unit Price', Format: @@ item.UnitPrice.
ToString ('$ 0.00'), Stil: 'medcolumn'),
grid.Column ('Total', canSort: false, Header: 'Total Price', Format: @@
{double q = (item.Units * item.UnitPrice);} @ q.ToString ('$ 0.00'), Stil:
'medcolumn'),
grid.Column ('TransactionID', Header: 'Action', Stil: 'linkcolumn', canSort:
falsch,
Format: @ @ Html.ActionLink ('Bearbeiten', 'Bearbeiten', neu {id = item.TransactionID})
| @ Html.ActionLink ('Löschen', 'Löschen', neu {id = item.TransactionID})))

Das unformatierte WebGrid erneut, diesmal jedoch mit Werten für die Gesamtspalte, die im Controller berechnet werden

Das unformatierte WebGrid erneut, diesmal jedoch mit Werten für die Gesamtspalte, die im Controller berechnet werden

Der vorhergehende Code gibt Ihnen die Ansicht mit normalem Paging in der Fußzeile. Als Nächstes passen wir die Paging-Fußzeile an, indem wir das Paging in die letzte Spalte und die Gesamtzahl der Datensätze in die zweite Spalte einfügen, indem wir den vom WebGrid-Helfer erstellten HTML-Code bearbeiten. Wenn Sie diese Ansicht im Browser verwenden und auf Quelle anzeigen klicken, sehen Sie, dass sich das Paging innerhalb der Tags befindet. Wir können die Tabelle vom WebGrid-Helfer an eine Zeichenfolge übergeben und die Fußzeile mithilfe der C # Replace-Methode bearbeiten:

.ToString (). Ersetzen ('
Gesamtanzahl der Datensätze '+ grid.TotalRowCount +'


Dies wendet die Footstuff-Klasse auf die Fußzeile an, erstellt sowohl eine leere Spalte als auch eine mit dem Text, den wir hinzufügen möchten, fügt dann drei weitere leere Spalten ein und endet mit dem Finale
@ {int firstRecord = (grid.PageIndex * grid.RowsPerPage) + 1;
int lastRecord = (grid.PageIndex * grid.RowsPerPage) + grid.Rows.Count ();
}}


Dadurch werden zwei Seitenvariablen erstellt, die Werte für den ersten und den letzten auf der aktuellen Seite angezeigten Datensatz enthalten. Die PageIndex-Eigenschaft ist ein auf Null basierender Index der aktuellen Seite. Sie müssen also keinen subtrahieren, bevor Sie mit der RowsPerPage multiplizieren, um den letzten Datensatz auf der vorherigen Seite zu erhalten. Dann fügen Sie eine hinzu, um den ersten Datensatz zu erhalten, und fügen die Anzahl der Zeilen auf der aktuellen Seite hinzu, um den letzten Datensatz auf der Seite zu erhalten. In der Fußzeile verwenden Sie den folgenden Code anstelle des Codes, in dem der aktuelle Code für die Gesamtzahl der Datensätze lautet:

Zeichnet '+ firstRecord +' bis '+ lastRecord +' von '+ grid.TotalRowCount +' auf.

Wenn Sie möchten, dass der Text für die Datensatzanzahl eine andere Farbe hat, können Sie eine andere Klasse anwenden oder einfach ein Stil-Tag wie die folgende Zeile verwenden.

Records '...

Unsere fertig formatierte Tabelle zeigt die benutzerdefinierte Formatierung in der Fußzeile. Dies wird zum Paging und zum Anzeigen der berechneten Werte für die Anzahl der Datensätze verwendet

wie man ein gefälschtes ipad macht
Unsere fertig formatierte Tabelle zeigt die benutzerdefinierte Formatierung in der Fußzeile. Dies wird zum Paging und zum Anzeigen der berechneten Werte für die Anzahl der Datensätze verwendet

Einpacken

Der WebGrid-Helfer erleichtert das Blättern und Sortieren und Sie haben große Flexibilität bei der Verwendung der C # Replace-Methode in der Ergebniszeichenfolge des WebGrid-Helfers. Wenn Sie mit einer Tabelle unter Verwendung von normalem HTML etwas tun können, gibt es keinen Grund, warum Sie mit WebGrid nicht dasselbe tun sollten - und Sie werden von den im Hilfsprogramm integrierten Paging- und Sortierfunktionen profitieren.

Wörter: Michael Schmaltz

Dieser Artikel erschien ursprünglich in .net Magazin Ausgabe 237

Mochte dies? Lese das!

Irgendwelche Fragen? Feuer weg in den Kommentaren unten.