ASP.NET MVC 3 Reusable Table Display Template with Razor

Question

Is there a good way to create a table mapping template in ASP.NET MVC3 with the new Razor syntax?

In ASP.NET MVC 2, Phil Haack blogged on table mapping templates . Is there a better approach in ASP.NET MVC3?

EDIT:

Can I also display a grid based on model metadata? Therefore, I do not want to manually define columns using the WebGrid API, but with model metadata . The problem I see is that you have to define the table manually each time using the WebGrid API. I want to be able to have one kind of table again !

Edit: So, is there any good practice for creating meshes using model metadata?

Answer 1

You can use the new WebGrid in MVC3:

@{ var grid = new WebGrid(Model); @grid.GetHtml(); } 

And you can use jQuery tabs: http://jqueryui.com/demos/tabs to create tabs.

Sorry if I misunderstood your question.

Answer 2

I have not used it much, but from my understanding you should first install MVC 3 WebGrid before using it. And you do not want to customize the table in the view, but instead use it using the model attributes.

If I do this, I will do the following:

• Create my custom attributes with which I would decorate my model to determine which properties are columns, which labels will be used for the column heading and everything you want to customize.

• I will create a static class with a static method that takes an instance of the model, uses reflection to read the properties and your user attributes, and from there it spits out a WebGrid for you so you can use it in your view.

That’s how, but I’ll tell you why I won’t do it: in MVC you decorate your model for things like validation, and it’s wonderful and declarative. But when you define a grid, this is a very specific thing. Of course, you can use ViewModels, which are specific to the view, but I do not think that the layout layout configuration belongs to the model. The path of WebGrid or Telerik Grid to its work is already well declarative.

I short WebGrid and Telerik Grid already use best practices, offering declarative, smooth interfaces to determine the structure and behavior of tables. Each table is different, so it makes sense to define each table. You say “manually”, but this is far from the case, since grids do all the dirty work for you, you just tell her what you want (declarative programming).

Answer 3

You can take a look at the new WebGrid helper .

Answer 4

You can also consider using the telerik grid and the tabs of MVC components, check your demos .

Answer 5

I like jQuery templates . You just need to pass the JSON object, and it does all the work. good for sorting, pagination, etc.

Answer 6

Phil Haack wrote a really cool blog post about Templated Razor delegates. The html helper he writes is simple and lightweight.

http://haacked.com/archive/2011/02/27/templated-razor-delegates.aspx

Answer 7

Just found this answer looking for a similar solution. I also hoped for something reusable, so I created a simple template based on Kalman's answer, it looks like this:

View /DisplayTemplates/Table.cshtml

 @model IEnumerable<object> @{WebGrid grid = new WebGrid(Model);} @grid.GetHtml() 

Using

 @Html.DisplayForModel("Table") 

This should also work with the model metadata for the collection by adding [DataType("Table")] to the property.