A WebForm View with a Razor Layout in ASP.NET MVC 3


          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. 




          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 ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>A WebForm View with a Razor Layout</h2>



          and here is the razor layout,


    <!DOCTYPE html>
        <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>
        <div class="page">
            <div id="header">
                <div id="title">
                    <h1>My MVC Application</h1>
                <div id="logindisplay">
                <div id="menucontainer">
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
            <div id="main">
            <div id="footer">


          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";



          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.  



          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. 



  • That's neat. I've been looking into a way to do that across different view engines, specifically spark and razor where spark is the layout page.

  • Hello,

    How I Can put an ReportViewer in my WebForms?

  • @Diego Naujalis
    see these links,


  • I can run a ReportViewer outside the Razor layout and your sample works fine but I had this problem when I use the ReportView in my Razor's Master Page:

    "Script control 'ReportViewer1' is not a registered script control. Script controls must be registered using RegisterScriptControl() before calling RegisterScriptDescriptors()."

    What can be happening?

  • It is much better to create a webform page with reportviewer and then insert this webform in mvc using iframe.

  • Has anyone realized that WebForm events don't work under this model? Has anyone found a solution to that? Other than that, great hack!

  • Anyone gotten this to work with winforms containing code-behind? MVC basically "moves" this functionality into Controllers.
    When I add a .aspx file (with code-behind) to the Home View folder, it will give a compilation error when web page comes up (yellow screen of death).
    I was hoping to utilize Imran's master page set up and just drop web forms files in, make some minor modifications, and fire it up.

  • @Jeff, Actuall here I have talk about MVC WebForm view, not WebForm page.

Comments have been disabled for this content.