How can I create a re-usable custom HTML panel in ASP.NET MVC? - asp.net-mvc

Question

I am trying to create a re-usable UI element in ASP.NET MVC that wraps around whatever content I choose to place in it. My first thought was to create a partial view, but that doesn't seem to help me in what I am trying to accomplish.
The Template
For example I would like to create some re-usable markup similar to this (please excuse the pseudo-code):
<div class="panel panel-default">
<div class="panel-body">
#RenderBody()
</div>
</div>
A Simple Example
Then in my views I would like to do something similar to this:
#Render.Partial("MyPanel")
{
<img src="image.jpg" />
}
Assuming that code worked as expected it would generate the following:
<div class="panel panel-default">
<div class="panel-body">
<img src="image.jpg" />
</div>
</div>
Another Example, with more complex markup
Theoretically I would like to be able place any and everything I would like within one of the panels. So even more complex markup would still appear legible.
#Render.Partial("MyPanel")
{
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
}
Just like in the first example, it would wrap everything inside the header and footer of my template:
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
.. truncated ..
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
Known Possibilities
Partial View. A partial view seems to make sense, except I have been unable to figure out a way to create a partial that has flexibility beyond the Model it was designed for. I gave two examples, because the contents within my panel could be significantly different each time I use it. I would like to be able throw anything into the body of this partial view; text, markup, more razor code, etc.
HTML Helper. This works great when I have specific parameters I would be passing in. I don't see this as practical when needing to enter large amounts of markup, as it would become hard to read/maintain. Also since html would be passed in as a string, I'm not sure how this would work with razor tags?
2 Partial Views. Using one as the header and the other as the footer. This works, but it just feels sloppy to me.
I was able to do this in ASP.NET WebForms by creating a custom control. It seems like this is something that should be straight forward in MVC too, but I just haven't quite been able to figure out a good solution yet.

Answer 1

You can use "DynamicInvoke" to create html helpers with dynamic markup, such as:
public static IHtmlString CustomPanel(this HtmlHelper htmlHelper, Func<object, object> panelMarkup = null)
{
return CustomPanel(htmlHelper, (panelMarkup == null ? "" : panelMarkup.DynamicInvoke(htmlHelper.ViewContext).ToString()));
}
public static IHtmlString CustomPanel(this HtmlHelper htmlHelper, string content)
{
TagBuilder div = new TagBuilder("div");
div.AddCssClass("panel panel-default");
TagBuilder innerDiv = new TagBuilder("div");
innerDiv.AddCssClass("panel-body");
innerDiv.InnerHtml = content;
div.InnerHtml = innerDiv.ToString();
return new HtmlString(div.ToString());
}
And then you would use it like this:
#Html.CustomPanel(
#<text>
<div>My Custom Markup</div>
<span>More Stuff</span>
</text>
)
Your final content will look like:
<div class="panel panel-default">
<div class="panel-body">
<div>My Custom Markup</div>
<span>More Stuff</span>
</div>
</div>
You see this used often in some 3rd party widget libraries (kendo-ui is the main one i know of)

Answer 2

There are many ways to create reusable content in MVC, but they all have various pros and cons. For instance, custom Html helpers are a common method, but they require writing a lot more code than you probably want.
You can certainly use partial views, just pass a model containing the content you want to render to the partial... but that can also be a little confusing as well.
I think what you may be looking for are Razor Helpers. These are explained in more detail here:
http://weblogs.asp.net/scottgu/asp-net-mvc-3-and-the-helper-syntax-within-razor
However, the basic structure would look like this:
#helper MyHelper(string content)
{
<div class="panel panel-default">
<div class="panel-body">
#Html.Raw(content)
</div>
</div>
}
Then you use it like this:
#MyHelper("<img src="image.jpg" />")
You don't have to use strings, you could use structured content, models, etc.. you can use other helpers inside. You can re-use them as described later in the article.
You might want to start thinking about your pages as more data-centric, however. If you use EditorTemplates to render your data then you render controls based on the type of your data rather than rendering your pages and trying to adapt your pages to contain your data.