Post
Ask Question

Change The LayoutPage At Runtime in ASP.Net Web API

Introduction

This article shows how to change the layout page at runtime in the Web API. Here I will use a simple way to change the layout page.

The following is the procedure for creating the application.

Step 1

First create a Web API application as in the following:

  • Start Visual Studio 2012.
  • From the start window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click the "Ok" button.

    lay.jpg

  • From the "MVC4 Project" window select "Web API".

    lay1.jpg

  • Click the "OK" button.

Step 2

Now in the controller we add some code as in the following:

  • In the "Solution Explorer".
  • Expand "Controller" folder.
  • Select the "HomeController".

    lay2.jpg

Add the following code

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace MvcApplication9.Controllers  
  7. {  
  8.     public class HomeController : Controller  
  9.     {  
  10.         public ActionResult Index()  
  11.         {  
  12.             ViewBag.Layout = "~/Views/Shared/_LayoutPage1.cshtml";  
  13.             return View();  
  14.         }  
  15.         [HttpPost]  
  16.         public ActionResult Index(int id = 0)  
  17.         {  
  18.             ViewBag.Layout = "~/Views/Shared/_LayoutPage2.cshtml";  
  19.             return View();  
  20.         }  
  21.     }  
  22. }  

 

" ViewBag.Layout = "~/Views/Shared/_LayoutPage1.cshtml";" It specifies the path of the layout page1.cshtml. This call in the index.cshtml file when we execute the application then the controller accesses the index file. The index file will show the layoutpage1.cshtml.

" ViewBag.Layout = "~/Views/Shared/_LayoutPage2.cshtml";" It tells the path of the layout page2.cshtml.

Step 3

Now add a LayoutPage.cshtml as in the following:

  • In the "Solution Explorer".

  • Expand the "Home" folder .

  • Right-click on the "Shared" -> "NewItem".

  • From new item window select "Installed" -> "VisualC#" -> "Web".

    lay3.jpg

  • Select "MVC4 Layout Page (Razor)" and click the "Add" button.

Add the following code:

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>@ViewBag.Title</title>  
  5.     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
  6.     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>  
  7. </head>  
  8. <body>  
  9.     <h2>This is the Layout page 1 </h2>  
  10.     @RenderBody()  
  11. </body>  
  12. </html>  

 

Step 4

Now add on more Layout Page.cshtml using the Step 3 procedure and add the following code:

  1. <!DOCTYPE html><html>  
  2. <head>  
  3.     <title>@ViewBag.Title</title>  
  4. </head>  
  5. <body>  
  6.     <div>  
  7.     <h2>Now You can see the Layout page 2</h2>  
  8.         @RenderBody()  
  9.     </div>  
  10. </body>  
  11. </html> 

Step 5

In  the View write some code as in the following:

  • In the "Solution Explorer".
  • Expand the "Views" folder.
  • Select "Home" -> "Index.cshtml".

    lay4.jpg

Add the following code:

 

  1. @{  
  2.     ViewBag.Title = "Index";  
  3.     Layout = ViewBag.Layout;  
  4.     }  
  5. <h2>Index</h2>  
  6. @using (Html.BeginForm("Index", "Home"))  
  7. {  
  8. <input type="submit" value="Click to Show LayoutPage2" />  
  9. }  

 

Layout = ViewBag.Layout; it will call the layoutpage1.cshtml. 

Step 6

Execute the application.

lay5.jpg

Click on the button; it then displays layoutpage2.cshtml.

 lay6.jpg


Similar Articles