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());
}
It wasn’t until today I found that the Safari browser used on iPad and iPhone caches page functionality to such an extent that it stops the intended functionality. So much so, it affects the user experience. I think Apple has gone a step too far in making their browser uber efficient to minimise page loading times.
