A WebForm View with a Razor Layout in ASP.NET MVC 3
Introduction:
By default, ASP.NET MVC 3 ships with two built-in view engines: WebFormViewEngine and RazorViewEngine. WebFormViewEngine is for web form view and RazorViewEngine is for razor view. You can use a master page to create a consistent layout for your web form views and a razor layout for your razor views. But sometimes you may need to leverage a razor layout for your web form views. In this article, I will show you a trick that allows you to use a razor layout for your web form views.
Description:
First of all, create an ASP.NET MVC 3 application. Next, add a controller, a web form view and a razor layout. Here is the code for controller,
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
}
Here is the web form view,
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ConnectRazorLayoutWithWebFormView.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
A WebForm View with a Razor Layout
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>A WebForm View with a Razor Layout</h2>
</asp:Content>
and here is the razor layout,
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content(" mce_href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Note above that the master page of above web form view is ConnectRazorLayoutWithWebFormView.Master. This master page will be used to leverage a razor layout for above web form view. Here is the ConnectRazorLayoutWithWebFormView.Master file,
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<asp:PlaceHolder runat="server" Visible="false"><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></asp:PlaceHolder>
<asp:PlaceHolder runat="server" Visible="false"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></asp:PlaceHolder>
<%
var buildTitle = new StringBuilder();
var buildMain = new StringBuilder();
TitleContent.RenderControl(new HtmlTextWriter(new System.IO.StringWriter(buildTitle)));
ViewBag.Title = buildTitle.ToString().Trim();
MainContent.RenderControl(new HtmlTextWriter(new System.IO.StringWriter(buildMain)));
ViewBag.MainContent = buildMain.ToString().Trim();
%>
<%= Html.Partial("ConnectRazorLayoutWithWebFormView", viewData: ViewData)%>
The ConnectRazorLayoutWithWebFormView master file contains two ContentPlaceHolder controls and each ContentPlaceHolder control is inside a PlaceHolder control with Visible="false". Setting the Visible property of PlaceHolder control to false means that the control does not render any HTML. Then, inside server tags, I am explicitly rendering Title and Main ContentPlaceHolder controls, and saving them in ViewBag.Title and ViewBag.MainContent. This master file also include a partial view(ConnectRazorLayoutWithWebFormView.cshtml), which will connect the above razor layout with the above web form view. Here is the ConnectRazorLayoutWithWebFormView.cshtml file contents,
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.Raw(ViewBag.MainContent)
This view is simply setting the Layout property, which will connect the above razor layout(_Layout.cshtml) with the above web form view(Index.aspx) and rendering ViewBag.MainContent.
Summary:
In ASP.NET MVC 3, you can use master page to create a layout for web form views and a razor layout for razor views. But sometimes you may need to use a razor layout for your web form views. In this article, I showed you how you can connect a razor layout with a web form view. Hopefully you will enjoy this article too. I am attaching a sample application.