One of the many nice things of using ASP.NET MVC Razor is that you have full control over how you segregate your HTML markup when building a page through rendering PartialViews. Since becoming an avid MVC developer, I am increasingly noticing how easy it is to make nice neat reusable code, whether it is used server or client-side.
Just today, I found something really useful that is a truly defines this, where markup within PartialViews can be output to a page as string:
/// <summary>
/// Controller extension class that adds controller methods
/// to render a partial view and return the result as string.
///
/// Based on http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/
/// </summary>
public static class ControllerExtension
{
/// <summary>
/// Renders a (partial) view to string.
/// </summary>
/// <param name="controller">Controller to extend</param>
/// <param name="viewName">(Partial) view to render</param>
/// <returns>Rendered (partial) view as string</returns>
public static string RenderPartialViewToString(this Controller controller, string viewName)
{
return controller.RenderPartialViewToString(viewName, null);
}
/// <summary>
/// Renders a (partial) view to string.
/// </summary>
/// <param name="controller">Controller to extend</param>
/// <param name="viewName">(Partial) view to render</param>
/// <param name="model">Model</param>
/// <returns>Rendered (partial) view as string</returns>
public static string RenderPartialViewToString(this Controller controller, string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
}
I can't take credit for this code. But here is the guy who can: Jan Jonas.
Being able to output PartialViews as a string is actually quite handy, since you could have a paginated news listings page that displays the first page of articles server-side and any additional pages could be loaded in via jQuery Ajax. Each article item would be a PartialView so you could serve the same markup client-side. My code below probably explains things a little better:
Article Listing View
This page will list all my News Articles. As you can see, I am using an "ArticleListItem" as my PartialView.
@model List<Article>
@if (Model.Any())
{
<div class="article-list">
@foreach (var a in Model.Select((value, index) => new { value, index }))
{
Html.RenderPartial("/Views/Article/_ArticleListItem.cshtml", new ArticleListItemView { Article = a.value, CssClass = ArticleHtmlHelper.GetItemCssClass((a.index + 1)), IsFullWidth = false});
}
</div>
}
else
{
<div>
No articles could be returned.
</div>
}
Article List Item PartialView
My PartialView has quite a bit going on to determine how the markup should be rendered and it's definitely something I wouldn't want to have to duplicate elsewhere just to load in client-side. Nice!
@model Site.Web.Models.Views.ArticleListItemView
@{
string fullWidthClass = String.Empty;
if (Model.IsFullWidth)
{
fullWidthClass = "full-width";
}
}
<div class="article-summary @Model.CssClass @fullWidthClass">
<a href="@Model.Article.PageUrl" class="img">
@if (Model.CssClass == "large")
{
<img src="@Model.Article.Images.ImageCollection[1].Url" />
}
else
{
<img src="@Model.Article.Images.ImageCollection[0].Url" />
}
</a>
@if (Model.Article.Category != null)
{
<span class="cat">@Model.Article.Category.Name</span>
}
@if (Model.Article.ReadTime != null)
{
<span class="time">@String.Format("{0} read", Model.Article.ReadTime)</span>
}
<h2 class="@Model.CssClass"><a href="@Model.Article.PageUrl">@Model.Article.Title</a></h2>
@if (Model.Article.Author != null)
{
<a href="@Model.Article.Author.PageUrl.Url" class="author">
<img src="@Model.Article.Author.Images.ImageCollection[0].Url" />
<span>@String.Concat(Model.Article.Author.FirstName, " ", Model.Article.Author.LastName)</span>
</a>
}
</div>
GetArticleItems() Controller
This is where the RenderPartialViewToString() method shines! This controller is called within my jQuery Ajax function to get the next page of news articles. I am then calling my "ArticleListItem" PartialView to return the HTML markup as a string through my client-side call.
[HttpPost]
public JsonResult GetArticleItems(DBContext ctx, int pageNo, int pageSize, string categoryId)
{
ApiDocumentInfo docInfo = DocumentHelper.SearchDocuments(ctx, true, "article", "category", categoryId, pageSize, pageNo, "articles", "date desc");
List<Article> articles = docInfo.Documents.Select(doc => doc.ToArticle(ctx)).ToList();
StringBuilder articleHtml = new StringBuilder();
if (articles.Any())
{
for (int a = 0; a < articles.Count; a++)
articleHtml.Append(this.RenderPartialViewToString("_ArticleListItem", new ArticleListItemView { Article = articles[a], CssClass = ArticleHtmlHelper.GetItemCssClass((a + 1)), IsFullWidth = false } ));
}
return Json(articleHtml.ToString());
}
I've been meddling around with ReactJS over the last week or so, seeing if this is something viable to use for future client projects. I am always constantly on the lookout to whether there are better alternatives on how my fellow developers and I develop our sites.
