ViewStart in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals

ViewStart in ASP.NET Core MVC Application

In this article, I am going to discuss the ViewStart in ASP.NET Core MVC Application. Please read our previous article before proceeding to this article as it is a continuation part of our previous article. In our previous article, we discussed the Sections in the Layout Page in ASP.NET Core MVC Application. As part of this article, we are going to discuss the following pointers.

1. Why do we need _ViewStart.cshtml file in ASP.NET Core MVC Application?
2. What is _ViewStart.cshtml file in ASP.NET Core MVC Application?
3. How to create _ViewStart.cshtml file in ASP.NET Core MVC Application?
4. How to set the Layout Property in ViewStart.cshtml file?
5. Understanding the hierarchical of _ViewStart.cshtml file.
6. How to select a layout conditionally in ViewStart file?

Why do we need _ViewStart.cshtml file in ASP.NET Core MVC Application?

As of now, we have used the Layout Property to associate a view with a layout view as shown below.

Layout = “~/Views/Shared/_Layout.cshtml”;

Suppose, we have 100 views in our application and all the 100 views want to use the same layout file. Then we need to set the Layout Property as shown in the above image in all the 100 views. This violates the DRY (Don’t Repeat Yourself) Principle and has the following disadvantages.

1. Redundant Code
2. Maintenance Overhead

Suppose tomorrow you want to use a different Layout, then you need to update the Layout Property in each and every individual view. This process is tedious, time-consuming as well as error-prone because you may miss updating the Property in some of the views. To solve the above problems we need to use the _ViewStart.cshtml file.

What is _ViewStart.cshtml file in ASP.NET Core MVC Application?

In ASP.NET Core MVC Application, the _ViewStart.cshtml file is a special file and the code present in this file is going to be executed before the code in an individual view is executed. So, you can set the Layout Property in this file as shown in the below image instead of setting the Layout Property in each individual view which is going to be executed before the actual view is executed.

Once you set the Layout Property in _ViewStart.cshtml file as shown in the above image, then maintaining the application becomes much easier. So, in the future, if you want to change the layout file, then you just need to change the code at one place only i.e. in the _ViewStart.cshtml file.

How to create _ViewStart.cshtml file in ASP.NET Core MVC Application?

In general, the _ViewStart.cshtml files are created within the Views or within the subfolder of the Views folder. To create “_ViewStart.cshtml” file right click on the Views folder and then select “Add – New Item” option from the context menu, this will opens the “New Item” window. From the “New Item” window search for “Razor” and then select the “Razor View Start” and click on the “Add” button as shown in the below image which should create the “_ViewStart.cshtml” within the “Views” folder.

How to set the Layout Property in ViewStart.cshtml file?

Once the ViewStart.cshtml file is created then modify the file as shown below to set the Layout property.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Then we need to remove the Layout property on individual views. So, modify the Index view as shown below.

@{
    ViewBag.Title = "Home Page";
}

<h1>Home Page</h1>
@section Scripts {
    <script src="~/js/CustomJavascript.js"></script>
}

With the above changes in place, now run the application and it should display the output as expected.

Understanding the hierarchical of _ViewStart.cshtml file:

As we already discussed we can place the ViewStart file Views folder and its subfolder. So, we need to understand the hierarchical order of the ViewStart file. Let us understand this with an example.

Let us first create another layout file with the name _MyLayout.cshtml within the shared folder. Once you create the _MyLayout.cshtml file, then copy and paste the following code.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", false)
    }
</body>
</html>

With this Layout, now we have two layouts (_Layout.cshtml and _MyLayout.cshtml) for our application.

Creating ViewStart File within the Home Folder:

Let add another ViewStart file within the Home Folder which is present within the Views folder. Once you create the ViewStart file then modify the file as shown below. Here, we are setting the newly created _MyLayout.cshtml in the Layout property.

@{
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

With the above changes, the Views folder of your application should looks as shown below.

As you can see in the above image, we have placed one ViewStart file in the Views folder and another ViewStart file in the Home sub-folder. Now run the application and see the output.

The above Index view uses MyLayout.cshtml view which we specified within the ViewStart File which is present inside the Home Folder. So, here the layout page which is specified in the ViewStart file in the Home sub-folder overwrites the layout page specified in the ViewStart file in the Views folder.

This means, all the views which are present within the Views folder will use the layout page which is specified in the ViewStart file in the Views folder, but the views which are present in the Home folder will use the layout page which is specified in the ViewStart file in the Home folder.

Note: If you don’t want to use the layout file which is specified in the ViewStart file, rather you want to use a different layout file then you need to use the Layout property in individual view to set the layout. If you don’t want to use any layout or if you want to render a view without layout then need to set the Layout property to null.

How to select a layout conditionally in ViewStart file?

In an ASP.NET Core MVC application, you may have multiple layout views. Let’s say you have two Layouts such as _NonAdminLayout and _AdminLayout. If you want to select the Layout based on the user role i.e. if the user role is Admin then use _AdminLayout else use the _NonAdminLayout. Then you need to write the following logic within the _ViewStart.cshtml file which will select the layout based on the role of the logged-in user.

@{
    if (User.IsInRole("Admin"))
    {
        Layout = "_AdminLayout";
    }
    else
    {
        Layout = "_NonAdminLayout";
    }
}

In the next article, I am going to discuss the _ViewImports.cshtml in ASP.NET Core MVC Application. Here, in this article, I try to explain the ViewStart in ASP.NET Core MVC Application.