Loading

ASP.NET Core

What is ViewStart in ASP.NET Core MVC?. The Complete ASP.NET Core Developer Course 2023 [Videos].

It's a special file in ASP.NET Core MVC. The code in this file is executed before the code in an individual view is executed. Instead of setting the Layout property in each individual view, we can move that code into the _ViewStart.

ViewStart in ASP.NET Core MVC Application

In this Video, I am going to discuss the ViewStart in ASP.NET Core MVC Application. Please read our previous Video before proceeding to this Video as it is a continuation part of our previous Video. In our previous Video, we discussed the Application. As part of this Video, 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.

_ViewStart.cshtml file in ASP.NET Core MVC Application

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 create _ViewStart.cshtml file in ASP.NET Core MVC Application?

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";
}
<h2>Home Page</h2>
@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.

Creating ViewStart File within the Home Folder

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.

ViewStart.cshtml file in ASP.NET Core MVC Application

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";
}
}


See All

Comments (251 Comments)

Submit Your Comment

See All Posts

Related Posts

ASP.NET Core / Blog

What is ASP.NET Core?

ASP.NET Core is the new version of the ASP.NET web framework mainly targeted to run on .NET Core platform.
27-jan-2022 /16 /251

ASP.NET Core / Blog

What is ASP.NET Core Framework?

ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With ASP.NET Core, you can: Build web apps and services, Internet of Things (IoT) apps, and mobile backends. Use your favorite development tools on Windows, macOS, and Linux.
27-jan-2022 /16 /251

ASP.NET Core / Blog

How to Setup ASP.NET Core Environment ?

ASP.NET Core is a cross-platform, high-performance, open-source framework for building modern, cloud-enabled, Internet-connected apps. With ASP.NET Core, you can: Build web apps and services, Internet of Things (IoT) apps, and mobile backends. Use your favorite development tools on Windows, macOS, and Linux.
27-jan-2022 /16 /251