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,

 

view sourceprint?
01public class HomeController : Controller
02{
03    public ActionResult Index()
04    {
05        ViewBag.Message = "Welcome to ASP.NET MVC!";
06 
07        return View();
08    }
09 
10    public ActionResult About()
11    {
12        return View();
13    }
14 
15}

 

          Here is the web form view,

 

view sourceprint?
01<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ConnectRazorLayoutWithWebFormView.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
02 
03<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
04    A WebForm View with a Razor Layout
05</asp:Content>
06 
07<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
08 
09<h2>A WebForm View with a Razor Layout</h2>
10 
11</asp:Content>

 

          and here is the razor layout,

 

view sourceprint?
01<!DOCTYPE html>
02<html>
03<head>
04    <title>@ViewBag.Title</title>
05    <link href="@Url.Content(" mce_href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
06    <script src="@Url.Content(" mce_src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
07</head>
08<body>
09    <div class="page">
10        <div id="header">
11            <div id="title">
12                <h1>My MVC Application</h1>
13            </div>
14            <div id="logindisplay">
15                @Html.Partial("_LogOnPartial")
16            </div>
17            <div id="menucontainer">
18                <ul id="menu">
19                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
20                    <li>@Html.ActionLink("About", "About", "Home")</li>
21                </ul>
22            </div>
23        </div>
24        <div id="main">
25            @RenderBody()
26        </div>
27        <div id="footer">
28        </div>
29    </div>
30</body>
31</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,  

 

view sourceprint?
01<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
02 
03<asp:PlaceHolder runat="server" Visible="false"><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></asp:PlaceHolder>
04<asp:PlaceHolder runat="server" Visible="false"><asp:ContentPlaceHolder ID="MainContent" runat="server"  /></asp:PlaceHolder>
05<%   
06    var buildTitle = new StringBuilder();
07    var buildMain = new StringBuilder();
08    TitleContent.RenderControl(new HtmlTextWriter(new System.IO.StringWriter(buildTitle)));
09    ViewBag.Title = buildTitle.ToString().Trim();
10    MainContent.RenderControl(new HtmlTextWriter(new System.IO.StringWriter(buildMain)));
11    ViewBag.MainContent = buildMain.ToString().Trim();
12 %>
13<%= 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,   

 

view sourceprint?
1@{
2    Layout = "~/Views/Shared/_Layout.cshtml";
3}
4 
5@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. 

 

8 Comments

  • 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,
    http://stackoverflow.com/questions/2453426/how-can-i-use-the-ssrs-reportviewer-from-vs-2008-in-a-vs2010-project

    http://blogs.msdn.com/b/sajoshi/archive/2010/06/16/asp-net-mvc-handling-ssrs-reports-with-reportviewer-part-i.aspx

  • 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.