Von
Andreas Aschauer 
10. August 2009 15:00
Die wohlbekannte MvcContrib Assembly beinhaltet das den Html.Grid() Html Helper. Wer noch, so wie in vielen Tutorials zu ASP.NET MVC gezeigt, mit <% foreach …. %> arbeitet sollte sich unbedingt das MvcContrib Grid ansehen. Es bietet ein eine schöne Fluent API und ermöglicht es beliebige HTML Tables (fast) komplett typisiert zu erzeugen. Das folgende Snippet zeigt wie elegant und einfach ein Grid aus einem vorhandenem ViewModel vom Typ IEnumerable<T> erzeugt werden kann.
1: <%= Html.Grid(Model.Employee).Columns(column => {
2: column.For(x => x.Id).Named("Employee ID");
3: column.For(x => x.Fullname);
4: column.For(x => x.DateOfBirth).Format("{0:d}");
5: })
6: %>
Weiters können beliebige Attribute jedem Element übegeben werden, zB zum festlegen einer CSS Klasse
1: <%= Html.Grid(Model.Employee).Columns(column => {
2: column.For(x => x.Id).Named("Employee ID").Attributes(@class => "GridViewBaseField") } ) %>
Das Grid mittels AJAX asynchron sortierbar machen ist auch keine Hexerei. Dazu wird eine kleine Javascript Function verwendet die das Grid asynchron nachlädt in dem es die entsprechnde Action im Controller aufruft und in diesem Beispiel einfach den Inhalt des <div> Tags in dem sich das Grid befindet austauscht.
Der Aufruf von Sort() liefert in diesem Fall die View EmployeeGrid zurück, welche das obige HtmlGrid() enthält.
1: function Sort(col, sortOrder) {
2:
3: $.ajax({
4: type: "POST",
5: url: "/Employees/Sort",
6: data: "columnName=" + col + "&sortDirection=" + sortOrder,
7: success: function(msg) {
8: $("#employeesGrid").html(msg);
9: },
10: error: function(msg) {
11: alert("Data Failed to Sort: " + Error().message);
12:
13: }
14: });
15: }
Der Aufruf wird mittels eines Links in die jeweiligen Spalten Header eingebaut
1: Column.For(x => x.Name).Attributes(@class => "GridViewBaseField")
2: .Named(String.Format("<a id=\"col{0}\" href=\"javascript:Sort('{0}',{1})\">Name</a>", "Name", SortDirection));
Um die Erstellung des Grids noch modularer zu gestalten ist es auch möglich das GridModel in eine eigene Klasse auszulagern.
1: <%= Html.Grid(Model).WithModel(new EmployeeList.GridModels.EmployeeListModel((int)ViewData["sortOrder"]))%>
Die Klasse EmployeeGridModel enthält dann den Code, der das Table Layout erzeugt.
1: using MvcContrib.UI.Grid;
2:
3: namespace EmployeeList.GridModels
4: {
5: public class EmployeeGridModel: GridModel<Employee>
6: {
7: public int SortDirection { get; set; }
8:
9: public EmployeeGridModel(int sortdirection)
10: {
11: SortDirection = sortdirection;
12: Column.For(x => x.Name).Attributes(@class => "GridViewBaseField")
13: .Named(String.Format("<a id=\"col{0}\" href=\"javascript:Sort('{0}',{1})\">Name</a>", "Name", SortDirection));
14: Column.For(x => x.Phone).Attributes(@class => "GridViewBaseField")
15: .Named(String.Format("<a id=\"col{0}\" href=\"javascript:Sort('{0}',{1})\">Phone</a>", "Phone", SortDirection));
16: Column.For(x => x.Email).Attributes(@class => "GridViewBaseField")
17: .Named(String.Format("<a id=\"col{0}\" href=\"javascript:Sort('{0}',{1})\">Email</a>", "Email", SortDirection));
18:
19: Attributes(@class => "GridView", border => 1, cellspacing => 0, rules => "all", style => "border-collapse:collapse;"));
20:
21: }
22:
23: }
24: }
Eine ausführliche Einführung ist unter http://www.jeremyskinner.co.uk/2009/02/08/rewriting-the-mvccontrib-grid/zu finden.