Custom Html helpers generate html via a view .cshtml file - html

Question

I am trying to create my own Html helper that will allow me to reuse some functionality across any web application. If I wanted to reuse this control in a single wep app I could create a .cshtml file and call it via the Html.Partial("") method and pass in a Model.
However as I have a class library project for my custom Html helpers I am creating the html with a string builder like this simplified version
StringBuilder htmlBuilder = new StringBuilder("<div class='myClass'>")
foreach(var item in MyItems)
{
htmlBuilder.Append($"item : {item.Name}");
}
htmlBuilder.append("</div>");
This makes it a pain to maintain especially as my control gets more features.
Is there a recommended way to leverage the razor engine where I can write the html in a .cshtml file with a model and then generate the html instead of using a string builder?

Answer 1

Yes. You can use a templated HTML helper to separate your view (HTML elements) from your model.
However, the downside is that you generally must put the templates either in the /Views/Shared/DisplayTemplates folder or a /DisplayTemplates folder inside of the view folder that represents the current controller. In the latter case, you can only use the template inside of that specific folder. It is possible to make a custom view engine that will pull the default templates as resources of a DLL file - see the MvcSiteMapProvider project for an example view engine implementation.
Example Templated HTML Helper
public class MyHelperModel
{
public string Title { get; set; }
public string Body { get; set; }
}
// Extension Methods for HTML helper
public static class MyHelperExtensions
{
public static MvcHtmlString MyHelper(this HtmlHelper helper, string title, string body)
{
return MyHelper(helper, title, body, null);
}
public static MvcHtmlString MyHelper(this HtmlHelper helper, string title, string body, string templateName)
{
// Build the model
var model = BuildModel(title, body);
// Create the HTML helper for the model
return CreateHtmlHelperForModel(helper, model)
.DisplayFor(m => model, templateName);
}
private static MyHelperModel BuildModel(string title, string body)
{
// Map to model
return new MyHelperModel
{
Title = title,
Body = body
};
}
private static HtmlHelper<TModel> CreateHtmlHelperForModel<TModel>(this HtmlHelper helper, TModel model)
{
return new HtmlHelper<TModel>(helper.ViewContext, new ViewDataContainer<TModel>(model));
}
}
public class ViewDataContainer<TModel>
: IViewDataContainer
{
public ViewDataContainer(TModel model)
{
ViewData = new ViewDataDictionary<TModel>(model);
}
public ViewDataDictionary ViewData { get; set; }
}
MyHelperModel.cshtml
The default conventions use a display template with the same name as the model when no templateName argument is passed (or it is null). Therefore, this will be our default HTML helper format. Note that you could instead just hard-code the HTML elements into the helper in the default case instead of using a template (or going the extra mile of creating a view engine).
As mentioned above, this should be in the /Views/Shared/DisplayTemplates/ folder, but you could make a custom view engine to pull the default template from a DLL.
#model MyHelperModel
<h3>#Model.Title</h3>
<p>#Model.Body</p>
CustomHtmlHelperTemplate.cshtml
Here is a named template that can be used within the application to change the HTML elements applied to the HTML helper.
As mentioned above, this should be in the /Views/Shared/DisplayTemplates/ folder, but you could make a custom view engine to pull the default template from a DLL.
#model MyHelperModel
<h1>#Model.Title</h1>
<p><i>#Model.Body</i></p>
Usage
#Html.MyHelper(
"This is the default template",
"This is what happens when we don't pass a template name to the HTML helper.")
#Html.MyHelper(
"This is a custom template",
"This is a custom template with different HTML elements than the default template.",
"CustomHtmlHelperTemplate")
NOTE: To ensure the helpers are available in the views, you need to add the namespaces in the /Views/Web.config file at <system.web.webPages.razor><pages><namespaces>.
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization" />
<add namespace="System.Web.Routing" />
<!-- Add your namespaces here -->
<add namespace="MyProject.HtmlHelperNamespace" />
<add namespace="MyProject.HtmlHelperNamespace.Models" />
</namespaces>
</pages>
</system.web.webPages.razor>

Answer 2

You can maintain and generate at runtime the output of a Razor View / PartialView (cshtml), using this code:
public static string GetViewPageHtml(Controller controller, object model, string viewName)
{
ViewEngineResult result = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
if (result.View == null)
throw new Exception(string.Format("View Page {0} was not found", viewName));
controller.ViewData.Model = model;
StringBuilder sb = new StringBuilder();
using (StringWriter sw = new StringWriter(sb))
{
using (System.Web.UI.HtmlTextWriter output = new System.Web.UI.HtmlTextWriter(sw))
{
ViewContext viewContext = new ViewContext(controller.ControllerContext, result.View, controller.ViewData, controller.TempData, output);
result.View.Render(viewContext, output);
}
}
return sb.ToString();
}
You call it like this (from a Controller)
string result = GetViewPageHtml(this, viewModel, "~/Views/Home/Index.cshtml");