Change Layout Page Dynamically In ASP.NET MVC 5

Background

In an MVC application time, you need to change the Layout page according to the user role or any other purpose that needs to differentiate between two pages such as for Login page and the Admin page. Let's learn about the layout pages step by step.

What Is layout page?

The layout page shares the common design across all pages. It is similar to the 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 the View Page, Assign the Layout Page.
• Using View Start Page

I hope you understand the Layout page from the preceding 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 the MVC empty application option and click on OK

Step 2. Add user and admin controller controller. Right-click on the Controller folder in the created MVC application and add the controller class as.

Now after selecting the controller template, click on the add button then the following window appears.

Now specify the controller name and click on the add button then the UserController class will be added to the application, now follow the same steps and add the AdminController class.

After adding the two controllers the solution explorer will be like the following.

The preceding two controller classes are added into the project which is User and Admin and create the following action methods in the respective controller classes.

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 the preceding two controllers we will use two different layout pages.

Step 3. Add Views and Layout pages.

We can decide which layout page to use while adding the view. It is the same as deciding master page while adding an ASP.NET web page. Let us follow the following steps to add a layout page with a view.

Click on the View folder of the created MVC application.

As shown in the preceding image, specify the view name check on the use layout page option, and click on the add button then the following default layout page will be added to the solution explorer.

The above is the default layout page and will be added to the solution explorer. Now let's add another layout page named admin as in the following. Click on Solution Explorer and add the layout page.

Now click on the add button, The added layout pages will look like as follows.

In the preceding image, two layout pages are added under the 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 a layout page to the view which are listed in the following.

• Using wizard
• Using ViewStart page
• Using view method

Using wizard

You can use the wizard to set the layout page while adding the view, the steps are as follows.

Right-click on the view folder and select view template.

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

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

Now click on the add button then the layout page reference is added to the view page.

So whenever you will add through wizard or manually the layout page reference needs to be set in every view page where the layout page is needed.

Using ViewStart page

Adding references to the layout page on every page is very difficult and repetitive of code. Let us consider I have one controller with a twenty-plus action method then each twenty views we need to add a reference to the layout page. Assume another requirement we need to set the layout page according to condition basic or controller basic then we need to use the viewstart page.

So let's 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 as follows we have used the Layout page.

Now run AddRole view, Then the output will look like the following.

I hope from all the preceding examples, you have learned how to set a layout page dynamically 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 them in the comment section.