A way to encapsulate multiple view sections (i.e., Tiles, portlets) with arbitrary content?

Question

I still piss with MVC and work on a site that uses a lot of “tiles” (you know, the usual “rectangular section with a standard title and some content”) for visual display. Nothing out of the ordinary, just a way to put content in boxes for easy layout and navigation. Currently, "tiles" (my term) are constructed as follows:

<div class="tile"> <div class="tile-header"> <h2>Title</h2> </div> <div class="tile-body"> (arbitrary content) </div> </div> 

Note: “custom content” means any content, static or dynamic, so there’s not necessarily something that I can connect to the variable and pass to the helper, I need a little more flexibility.

My question is: what is the best method to use to encapsulate this pattern and facilitate / expressive calling from code? I know about partial representations, but how to transfer a part of a body to a partial representation? (It may just be limited knowledge of MVC)

I tried to create Razor helpers as follows:

 @Tile.Begin("Title") (arbitrary content) @Tile.End() 

But Razor is choking because I can't include the tile-body closing div. (If I do this, then I have to pass the contents of the body as a string variable, and this is not always possible)

I could see something like this:

 @using (Tile.Begin("Title")) { (arbitrary content) } 

This seems to me the most elegant, although not as easy to scan as the calls to @ Tile.Begin () and @ Tile.End (). From what I understand, I would need to create a class and implement IDisposable, but when I tried to return a string of raw HTML tags from a helper class, it just wrote the encoded tag syntax to the screen, so I assume I ran into a problem here?

Thanks for any advice. :)

Answer 1

Well, I would suggest using Display / EditorTemplates to create dynamic tiles. You can even combine them with an html helper (not a razor helper).

Your problem with the html user helper was that you did not do it correctly. You must use the HtmlHelper object. The correct way is something like this:

 public static class TileExtension { public static TileHelper Tile(this HtmlHelper helper, string title) { helper.ViewContext.Writer.Write( "<div class=\"tile\"><div class=\"tile-header\"><h2>" + title + "</h2></div>" + "<div class=\"tile-body\">" ); return new TileHelper(helper); } private class TileHelper : IDisposable { private HtmlHelper _helper; public TileHelper(HtmlHelper helper) { _helper = helper; } public void Dispose() { _helper.ViewContext.Writer.Write("</div></div>"); } } } 

Then you would use it as @using(Html.Tile("Title")) { // your content }

Make sure you pay close attention to static keywords and the use of the this in a parameter. They are needed to do the work with the extension.

In addition, you must add the namespace you created by this class to the pages / namespaces web.config element:

 <pages> <namespaces> <add namespace="My.Name.Space" /> </namespaces> <pages>