MENU

Layout Page In ASP.NET MVC

Filed Under: , , on
Layout page shares the common design across all pages. It is similar to master page in ASP.NET. There are many methods which are listed below to change the layout page dynamically in ASP.NET MVC  
  • While Adding View Page, Assign Layout Page .
  • Using View Start Page
I hope you have understand about the Layout page from preceding brief summary. Now let's implement it practically.
Step 1 : Create an MVC application.
  1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
  2. "File", then "New" and click "Project" then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK.
  3. Choose MVC empty application option and click on OK
Step 2: Add user and admin controller controller. Right click on Controller folder in the created MVC application and add the controller class as.

 Now after selecting controller template, click on add button then the following window appears,
 
Now specify the controller name and click on add button then the UserController class will be added into the application , now follow the same steps and add the AdminController class,
After adding the two controller the solution explorer will be like the following,
 
The preceding two controller classes are added into the project which are User and Admin and create the following action methods in respective controller class.
UserController.cs
public class UserController : Controller  
    {  
        public ActionResult Login()  
        {  
            //write logic here  
            return View();  
        }  
    }
AdminController.cs
public class AdminController : Controller  
   {  
       [HttpPost]  
       public ActionResult AddRole()  
       {  
           //write logic here  
           return View();  
       }  
   }
For preceding two controllers we will use two different layout pages.
Step 3: Add Views and Layout pages
We can decide which layout page to be used while adding the view. IIt is same as deciding master page while adding ASP.NET web page. Let us follow the following steps to add layout page with view.
Click on View folder of created MVC application as,

As shown in preceding image, specify view name and check on use layout page option and click on add button then the following default layout page will be added into the solution explorer as,
The above is default layout page and will be added into the solution explorer. Now lets add another layout page named admin as in the following. Click on solution explorer and add layout page as,
Now click on add button, then added layout pages will look like as follows,

In the preceding image, two layout pages are added under shared folder which are AdminLayoutPage and Layout.
Step 4: Set layout pages to view
We have created view and layout pages. Now let us assign layout pages to the views. There are many ways to assign layout page to the view which are listed as in the following:
  • Using wizard
  • Using ViewStart page
  • Using view method
Using wizard
You can use wizard to set the layout page while adding the view, steps are as follows:
  • Right click on view folder and select view template as,

Specify the view name and check on Use a layout page and click on browse button. The following window will appear,

Now choose layout page from preceding available Layout pages and click on ok button. The layout page will  look like as follows,

Now click on add button then layout page reference added into the view page as,
 
So whenever you will add through wizard or manually the layout page reference need to be set in every view page where the layout page is needed.
Using ViewStart page
Adding reference of layout page in every page is very difficult and repetitive of code. Let us consider I have one controller which as twenty plus action method then each twenty views we need to add reference of layout page. Assume another requirement we need to set layout page according to condition basic or controller basic then we need to use viewstart page .
So lets open the ViewStart.cshtm page and write the following code,
@{  
    string CurrentName = Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Controller"]);  
    dynamic Layout;  
    switch (CurrentName)  
    {  
        case "User":  
            Layout = "~/Views/Shared/_Layout.cshtml";  
            break;  
        default:  
            //Admin layout  
            Layout = "~/Views/Shared/_AdminLayoutPage.cshtml";  
            break;  
    }  
}
Now run the application, the Login view will  look like as follows in which we have used Layout page,
Now run AddRole view, Then the output will look like the following,
 
I hope from all the preceding examples, you have learned about layout pages in ASP.NET MVC.
Note:
  • Download the Zip file of the sample application for a better understanding.
  • Apply proper validation before using it in your project.
Summary
I hope this article is useful for all readers. If you have any suggestions, then please mention it in the comment section.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode