1

Introduction to ASP.NET Core MVC Framework

In this article, I will briefly introduce the Model View Controller Pattern and ASP.NET
Core MVC Framework. The ASP.NET Core framework is growing in popularity among
developers and is also anticipated to continue to do so. On the .NET platform, ASP.NET is
a well-known web development framework for constructing web applications. As part of this
article, we will discuss the following pointers.
1. What is MVC?
2. How Does MVC Design Pattern Work in ASP.NET Core?
3. What is ASP.NET Core MVC?
4. Features of ASP.NET Core MVC
5. When to Choose ASP.NET MVC and When to Choose ASP.NET Core
MVC?
What is MVC?
MVC stands for Model View and Controller. It is an Architectural Design Pattern, which
means it is used at the application’s architecture level. So, MVC is not a programming
language. MVC is not a Framework. It is a Design Pattern. When we design an application,
we first create the architecture of that application, and MVC plays an important role in the
architecture of that particular application.
The MVC Design Pattern is used to develop interactive applications. An interactive
application involves user interaction, and based on the user interaction, some event
handling occurs. The most important point you need to remember is that it is not only used
for developing Web-Based Applications; we can also use this MVC Design Pattern to
develop Desktop or Mobile-Based applications.
The MVC (Model-View-Controller) Design Pattern was introduced in the 1970s. It divides an
application into three major components: Model, View, and Controller. The main objective of
the MVC Design Pattern is the separation of concerns. This means the Domain Model and
Business Logic are separated from the User Interface (i.e., View). As a result, maintaining
and testing the application become simpler and easier.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:11 / 03:1110 Sec
How Does MVC Design Pattern Work in ASP.NET Core?
Let’s look at an example to understand how the MVC Design Pattern works in an ASP.NET
Core MVC application. For example, we want to design an application that displays the
student details on a web page, as shown below.

So, when we request something like https://localhost:7132/Student/Details/2 from a web

browser, the following things happen to handle the request.
 2

The Controller is the Component in the MVC design pattern that handles the incoming
request. The controller components do several things to handle the request. The controller
component creates the model that is required by a view. The model is the component in the
MVC design pattern, which basically contains classes that are used to store the domain
data or, you can say, business data. In the MVC design pattern, the Model component also
contains the required logic to retrieve data from a database.
Once the controller creates the model, it selects a view to render the domain or model data.
While selecting a view, it is also the controller’s responsibility to pass the model data. In the
MVC design pattern, the view’s only responsibility is rendering the model data. So, in MVC,
the view is the component responsible for generating the necessary HTML to render the
model data. Once the view generates the HTML, that HTML is sent to the client over the
network who initially made the request.
The three major components of an ASP.NET Core MVC Application are the Model, View,
and Controller. Let’s discuss each component of the MVC design pattern in detail.
Role of Model in MVC Design Pattern:
The Model in an MVC application represents the application’s state and business logic. That
means the Model is the component in the MVC Design pattern used to manage the data,
i.e., the application’s state in memory. The Model represents a set of classes used to
describe the application’s validation, business, and data access logic. So, in our example,
the model consists of Student and StudentBusinessLayer classes.
Student.cs
namespace ASPNETCoreMVCApplication.Models
{
public class Student
{
public int StudentID { get; set; }
public string? Name { get; set; }
public string? Gender { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
}
 3

}
StudentBusinessLayer.cs
namespace ASPNETCoreMVCApplication.Models
{
public class StudentBusinessLayer
{
public IEnumerable<Student> GetAll()
{
//logic to return all employees
return new List<Student>();
}
public Student GetById(int StudentID)
{
//logic to return an employee by employeeId
Student student = new Student()
{
StudentID = StudentID,
Name = "James",
Gender = "Male",
Branch = "CSE",
Section = "A2",
};
return student;
}
public void Insert(Student student)
{
//logic to insert a student
}
public void Update(Student student)
{
//logic to Update a student
}
public void Delete(int StudentID)
 4

{
//logic to Delete a student
}
}
}
In our example, we use the Student class to hold the student data in memory. The
StudentBusinessLayer class manages the student data, performing the CRUD operation,
Validating the Student data, etc.
So, in short, we can say that a Model in the MVC Design Pattern contains a set of classes
used to represent the data and the logic to manage those data. In our example, the Student
class represents the data. The StudentBusinessLayer class manages the student data, i.e.,
validating the data and storing it in the database.
Role of View in MVC Design Pattern:
The View is the Component in the MVC Design pattern that contains the logic to represent
the model data as a user interface with which the end-user can interact. Basically, the view
renders the domain data (i.e., business data) provided to it by the controller. There should
be minimal logic (you should not write any business logic, calculation logic, etc.) within
views, and any logic in them should only be related to presenting the content.
For example, we want to display Student data on a web page. In the following example, the
student model carried the student data to the view. As already discussed, the view’s one
and only responsibility is to render the model data, in this case, student model data. The
following code does the same thing.
@model ASPNETCoreMVCApplication.Models.Student
<html>
<head>
<title>Student Details</title>
</head>
<body>
<br />
<br />
<table>
<tr>
<td>Student ID: </td>
<td>@Model.StudentID</td>
</tr>
<tr>
<td>Name: </td>
<td>@Model.Name</td>
 5

</tr>
<tr>
<td>Gender: </td>
<td>@Model.Gender </td>
</tr>
<tr>
<td>Branch: </td>
<td>@Model.Branch</td>
</tr>
<tr>
<td>Section: </td>
<td>@Model.Section </td>
</tr>
</table>
</body>
</html>
Role of Controller in MVC Design Pattern:
The Controller is the component in an MVC application that handles the incoming HTTP
Request. Based on the user action, the respective controller might work with the model,
select a view to render the information, and then send the response back to the user who
initially made the request. So, the Controller is the component that will interact with both the
models and views to control the application execution flow.
In ASP.NET Core MVC Application, a Controller is a .cs (for C# language) file with some
methods called Action Methods. When a request comes on the controller, the controller’s
action method handles those requests. In our example, when the user issued a request, the
following URL
https://localhost:7132/Student/Details/2
Then, that request is mapped to the Details action method of the Student Controller. How
will it map to the Details Action Method of the Student Controller that will be discussed in
our upcoming articles. For now just look at the following Controller code:
using ASPNETCoreMVCApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace ASPNETCoreMVCApplication.Controllers
{
public class StudentController : Controller
{
public ActionResult Details(int studentId)
 6

{
StudentBusinessLayer studentBL = new StudentBusinessLayer();
Student studentDetail = studentBL.GetById(studentId);
return View(studentDetail);
}
}
}
As you can see in the example, the Student Controller creates the Student object within the
Details action method. So, here, the Student is the Model. The controller uses the
StudentBusinessLayer class to fetch the Student data from the database.
Once the controller creates the Student model with the necessary student data, it passes
the Student model to the Details view. The Details view then generates the necessary
HTML to present the Student data. Once the HTML is generated, it is sent to the client over
the network who initially made the request.
Note: The Controller and View depend on the Model in the MVC Design Pattern, but the
Model never depends on either View or Controller. This is one of the main reasons for the
separation of concerns, which allows us to build and test the model independently of the
visual presentation.
What is ASP.NET Core MVC?
ASP.NET Core MVC is a Web Application Development Framework provided by Microsoft
as part of the ASP.NET Core platform. ASP.NET Core MVC framework is used for building
Web Apps using the Model-View-Controller (MVC) Design Pattern. So, you need to make it
clear that MVC is a Design Pattern, and ASP.NET Core MVC is the Framework based
on MVC Design Pattern.
Features of ASP.NET Core MVC:
The ASP.NET Core MVC Framework is comes with some of the amazing features. They
are as follows:
It is Open Source:
The ASP.NET Core MVC Framework is open source, which is the main reason for its
popularity. The Entire Source Code of ASP.NET Core MVC Framework is available
at https://github.com/aspnet, and you are free to download the source code; even if you
want, you can also modify and compile your own version.
Cross-Platform:
The ASP.NET Core MVC Framework is designed from scratch to be cross-platform for
development and deployment. You can develop Web Applications using ASP.NET Core
MVC Framework and Visual Studio Editor using Windows, Linux, and macOS. Visual Studio
works only on Windows and macOS. For Linux, you can use Visual Studio Code editor.
Similarly, you can deploy the ASP.NET Core MVC application in different server such as
IIS, Apacha, etc.
Extensible Framework:
ASP.NET Core MVC is highly extensible. You can make applications that can be extended
to any level in the future. Key features of this framework that give it the extensible power
are:
1. View Components
 7

2. Tag Helpers
3. Routing
Testing Made Maintainability:
The ASP.NET Core MVC Framework is an excellent choice for a maintainable and testable
application. It allows you to divide various parts of your application into separate and
independent components, which can be tested individually. You can easily integrate testing
frameworks like xUnit, MSTest, and MOQ to test different scenarios.
When to Choose ASP.NET MVC and When to Choose ASP.NET Core
MVC?
ASP.NET MVC:
1. If you are currently working on an existing application with ASP.NET MVC
and would like to expand the functionalities by adding new features.
2. If your team is familiar with ASP.NET MVC Framework but has yet to gain
experience with ASP.NET Core MVC.
3. If you want, your application will only be compatible with devices and servers
that run on the Windows operating system.
ASP.NET Core MVC:
1. If you have a preference for utilizing a framework that is completely open
source.
2. If you want your application to be able to be developed and hosted on any
operating system.
3. If your team members have knowledge of ASP.NET Core MVC.
4. If you are looking for an application development framework with a long
development roadmap ahead of it. If you look at the road map of .NET,
Microsoft has already provided it for the next five years.
AddController vs AddMvc vs
AddControllersWithViews vs AddRazorPages
Different MVC Services Methods Available in ASP.NET Core:
Let us understand the differences between AddController, AddMvc,
AddControllersWithViews, and AddRazorPages in ASP.NET Core Application.
Go to the definition of the AddMvc() Extension Method. You will see that along with
the AddMvc() method, AddController(), AddControllersWithViews(), and
AddRazorPages() methods are also available, as shown in the below image. All these
methods are implemented as an extension method on the IServiceCollection interface.
And further, each method has two overloaded versions available. One overloaded version
does not take any parameter, while the other overloaded version takes the Options object
as the parameter using which you can customize the service.
 8

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:06 / 03:1110 Sec
Let us discuss each of these methods and the features they provide in detail. For a better
understanding, please have a look at the following image.

Features of All the Above Methods:

Controller: Support for the Controller is available for all the Methods. So, you can use any
of the four methods if you need only a controller. Controllers are responsible for controlling
the flow of the application execution. When you make a request to an MVC or Web API
application, it is the controller action method that will handle the request and return the
response.
Model Binding: The Model Binding feature is available for all four methods. Model binding
maps the incoming HTTP Request data (Route Data, Query String Data, Request Body
Data, Posted form Data, etc.) to the controller action method parameters. The model binder
is a middleman that maps the incoming HTTP request data with the Controller action
method parameter.
API Explorer: Except for the AddRazorPages method, all other methods support the API
Explorer feature. API Explorer contains functionality for exposing metadata about your
applications. We can use it to provide details such as a list of controllers and actions, their
URLs, allowed HTTP methods, parameters, response types, etc.
Authorization: Authorization is available for all four methods. Authorization is basically
used to provide security features. Authorization is a process used to determine whether the
user has access to a particular resource. In ASP.NET Core MVC and Web API
Applications, we can use Authorize Attribute to implement Authorization.
CORS: Again, except for the AddRazorPages method, all other methods support CORS.
CORS stands for Cross-Origin Resource Sharing. CORS is basically a feature that allows
CROS domain calls. That means they can access your method from other domains using
 9

jQuery AJAX. In simple words, we can say that it is a mechanism to bypass the Same-
Origin Policy of a Web browser.
Validation: All four methods support the validation feature, which is used to validate the
HTTP Request Data. We can implement validation using DataAnnotations attributes and
Fluent API. DataAnnotations includes built-in validation attributes for different validation
rules, which can be applied to the properties of the model class. Simultaneously, we need to
use Fluent AP for condition-based validation.
Formatter Mapping: Except for the AddRazorPages method, all other methods support the
Formatter Mapping feature. This feature is used to format the output of your action method,
such as JSON or XML.
Antiforgery: This feature is unavailable in the AddControllers method and is available for
the other three methods. To prevent CSRF (Cross-Site Request Forgery) attacks, ASP.NET
Core MVC uses anti-forgery tokens, also called request verification tokens.
TempData: This feature is unavailable in the AddControllers method and is available for the
other three methods. TempData in ASP.NET Core MVC can be used to store temporary
data, which can be used in the subsequent request.
Views: This feature is unavailable in the AddControllers method but available for the other
three methods. A view is a user interface that displays data from the model to the user,
enabling the user to modify the data.
Pages: The Pages are available only with AddMVC and AddRazorPages methods.
Razor Pages are designed for page-focused scenarios; each page can handle its own
model and actions.
Tag Helpers: Tag Helpers are not available in the AddControllers method and are available
for the other three methods. Tag Helper is a new feature in ASP.NET Core MVC that
enables the server-side code to create and render HTML elements.
Memory Cache: The Memory Cache feature is also not available in the AddControllers
method but is available with the other three methods. Memory Cache is used to cache data
within the web server’s memory where your application is running. This in-memory cache
can significantly improve the performance and scalability of your application by temporarily
storing frequently accessed data, such as data from a database or web service.
Which Method to Use in Our Application?
This depends on which type of application you want to create.
1. If you want to create a Web API Application, i.e., Restful Services, without
views, you must use the AddControllers() extension method.
2. If you want to work with the Razor Pages Application, you need to use
the AddRazorPages() extension method in your Main method of the Program
class.
3. If you want to develop a Web Application using the Model View Controller
Design Pattern, you need to use the AddControllersWithViews() extension
method. Further, if you want Razor Pages features in your MVC application,
you must use the AddMVC method.
Note: The AddMvc method has all the features. You can use this AddMVC method with any
application (Web API, MVC, and Razor Pages). Adding the AddMvc() method will add extra
features even though they are not required for your application, which might impact the
performance of your application. So, depending on the requirement, you must choose the
appropriate method.
 10

What is a Controller in ASP.NET Core?

A Controller is a special class in ASP.NET Core Application with .cs (for C# language)
extension. By default, you can see the Controllers reside in the Controllers folder when you
create a new ASP.NET Core Application using the Model View Controller (MVC) Project
Template. In the ASP.NET Core MVC Application, the controller class should and must be
inherited from the Controller base class.
Controllers in the MVC Design Pattern are the components that handle the incoming HTTP
Request, work with the model, and select a view to render. The controller is the initial entry
point and is responsible for selecting which model types to work with and which view to
render (i.e., it controls how the app responds to a given HTTP request).
When the client (browser) sends a request to the server, that request first goes through the
request processing pipeline. Once the request passes the request processing pipeline, it will
hit the controller. Inside the controller, there are lots of methods (called action methods) that
actually handle the incoming HTTP Requests. The action method inside the controller
executes the business logic and prepares the response, which is then sent back to the
client who initially made the request. For a better understanding, please have a look at the
following diagram.

Conquering the clouds on a journey to Ta Xua with the team - Road Trip Vietnam Team
- Nếm TV00:19 / 02:5410 Sec

Role of Controller in MVC:

1. Group Related Actions: A Controller groups related actions, i.e., Action
Methods.
2. Request Handling: Controllers receive HTTP requests and decide how to
process them.
3. Features Applied: The controller can be equipped with many important
features, such as Caching, Routing, Security, etc.
4. Model Interaction: They often interact with models to retrieve data or save
changes.
5. View Selection: Controllers select a view and provide it with any necessary
data for rendering.
 11

How do you add Controllers to the ASP.NET Core Application?

If you create the ASP.NET Core Application using the MVC Project Template, it will create
HomeController within the Controllers folder by default. But if you create the ASP.NET Core
Application with the Empty Project template, then by default, you will not find the Controllers
folder in your project. As we discuss everything from scratch, we will create the ASP.NET
Core Application with Empty Template and manually add the Controllers folder and the
Controllers.
Step 1: Creating ASP.NET Core Empty Web Application
To create a new Empty ASP.NET Core Web Application, open Visual Studio 2022 and click
the Create a new project tab, as shown in the image below.

Once you click on the Create a new project tab, it will open the Create a new project
window. You need to select the ASP.NET Core Empty project template from this window
and click the Next button, as shown in the image below.
 12

Once you click on the Next button, it will open the Configure Your New Project window.
Here, you must provide the necessary information to create a new project. First, give an
appropriate name for your project (FirstCoreMVCWebApplication), set the location where
you want to create this project, and the solution name for the ASP.NET Core Web
application. And finally, click on the Create button, as shown in the image below.

Once you click on the Next button, the Additional Information window will open. Here, you
need to select .NET 6.0 as the Framework, check the Configure for HTTPS and do not use
top-level statements check boxes, and finally click the Create button, as shown in the image
below.
 13

That’s it. Once you click the Create Button, the project will be created with the Empty
template with the following folder and file structure.

Step 2: Adding Controllers Folder

Once you create the ASP.NET Core Empty Project, we need to add the Controllers folder to
create our Controllers. To do so, right-click on the project and then select the add => new
folder option from the context menu, which will add a new folder to your project. Just
rename the folder as Controllers.
Step 3: Adding Controller in ASP.NET Core
Once you create the Controllers folder, we need to add a controller (StudentController)
inside this Controllers folder. To do so, right-click on the Controller folder and select
the Add => Controller option from the context menu, which will open the Add Controller
window, as shown in the below image. Here, we will create the MVC Controller with the
Empty template. So, select the MVC Controller – Empty option and click the Add button,
as shown in the image below.
 14

As you can see in the above image, we have three templates for creating an MVC
controller. So you can use any of the following three templates:
1. MVC Controller – Empty: It will create an Empty Controller.
2. MVC Controller with read/write actions: This template will create the
controller with five action methods to create, read, update, delete, and list
entities.
3. MVC Controller with views, using Entity Framework: This template will
create an MVC Controller with actions and Razor views to create, read,
update, delete, and list entities using Entity Framework.
Once you click on the Add button, it will open the below window where you need to select
the Controller Class – Empty option and give a meaningful name to your controller. Here, I
give the name as StudentController and click on the Add button. The Controller name
should be suffixed with the word Controller.
 15

Once you click on the Add button, StudentController will be Added to the Controllers folder,
as shown in the image below.

Understanding StudentController:
Now, let us understand the StudentController class and its different components. Open
the StudnetController.cs class, and you should get the following default code in it.
 16

As you can see in the above image, the StudentController class is inherited from the
Controller base class. This controller base class is present in Microsoft.AspNetCore.Mvc
namespace, which is why it imports that Microsoft.AspNetCore.Mvc namespace. Now
right-click on the Controller base class and select Go to the definition, and you will see the
following definition of the Controller class.

As you can see in the above image, the Controller is an abstract class having many
methods (Json, View, PartialView, OnActionExecuting, ViewComponent, etc.) and
properties (TempData, ViewBag, ViewData, etc.). The point that you need to remember is
that these methods and properties will be used when we are working with ASP.NET Core
MVC Application. Again, if you look, this Controller class is inherited from the
ControllerBase class.
Let us see the ControllerBase class definition as well. Right-click on the ControllerBase
class and select Go to definition, and you will see the following definition. Here, you will see
 17

the RequestData, Response, Request, ModelState, Routing, Model Binder, HttpContext,

and many more properties and methods, which we will use as part of our ASP.NET Core
MVC Application.

Rules for Controller:

1. Naming Convention: Controllers are typically named with the suffix
Controller, like HomeController or ProductController.
2. Inheriting from ControllerBase: Controllers usually inherit from the
ControllerBase or Controller class, which provides many methods and
properties for handling requests and responses.
I hope you now have clarity on ASP.NET Core MVC Controllers. Let’s move forward and
understand the next topic, which is Action Methods.
What are Action Methods?
All the public methods of a controller class are known as Action Methods. They are created
for a specific action or operation in the application. The Controller class can have many
related action methods. For example, adding a Student is an action. Modifying the student
data is another action. Deleting a student is another action. So, all the related actions
should be created inside a particular controller.
An action method can return several types. Let us modify the HomeController as shown
below, where one method returns all the student details. Intentionally, we returned a string
from this method, but as we progress in this course, we will discuss the real implementation
of this method. But for now, we return a string just for learning purposes.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class StudentController : Controller
{
 18

public string GetAllStudents()

{
return "Return All Students";
}
}
}
How Do We Call an Action Method of a Controller?
When our application receives an HTTP Request, the controller action method handles it.
So, when we say we are hitting a controller, we are hitting its action method. The default
structure is http:domain.com/ControllerName/ActionMethodName.
As we are working with the development environment using Visual Studio, the domain
name will be our local host with some available port numbers. So, if we want to access the
GetAllStudents action method of the HomeController, then the
URL: http://localhost:<portnumber>/student/GetAllStudents
Let us prove this. If you run the application and navigate to the above URL, you will not get
the output. This is because we created this project using the ASP.NET Core Empty Project
template. By default, the Empty Project template will not add the required MVC Service and
Middleware Components to the application processing pipeline.
Modifying the Program Class:
Open the Program.cs class file and then copy and paste the code below into it, adding the
required MVC service to the dependency injection and the MVC middleware to the request
processing pipeline.
namespace FirstCoreMVCWebApplication
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add Framework MVC Services to the container.
builder.Services.AddMvc();
var app = builder.Build();
//Adding MVC Middleware
app.UseRouting();
app.UseEndpoints(endpoints =>
{
//Configuring the MVC middleware to the request processing pipeline
endpoints.MapDefaultControllerRoute();
 19

});
app.Run();
}
}
}
With the above change in place, now run the application and navigate to the
URL http://localhost:<portnumber>/student/GetAllStudents, and you should get the
output as expected, as shown in the image below.

Please have a look at the following image to better understand how the above URL mapped
to the GetAllStudents action method of the Student controller.

How to Pass Parameters in Action Methods?

Let us understand this with an example. Now, we want to search for students based on their
names. To do so, add the following action method inside the Student Controller.
public string GetStudentsByName(string name)
{
return $"Return All Students with Name : {name}";
}
Now run the application, navigate to the
URL http://localhost:<portnumber>/student/GetStudentsByName?name=james, and
see the output shown in the image below.
 20

In this case, the query string parameter name is mapped with the GetStudentsByName
action method name parameter. In our upcoming articles, we will discuss parameter
mapping, default mapping, and more.
When should we create a new controller?
Whenever we need to define a new group of actions or operations in our applications, we
need to create a new controller. For example, to do operations of students, we can create a
Student Controller. To manage the security of your application, like login, logout, etc., you
can create a Security Controller.
How Many Controllers can we have in a Single Application?
It depends on the application. At least one controller is required to perform operations.
Maximum n number of Controllers we can have into one application.
How is Controller Instance Created in ASP.NET Core MVC?
We have discussed how to Create and use Controllers in ASP.NET Core MVC Applications.
We also understand that the Controller Action Method will handle the incoming HTTP
Request. But if you look at the controller, you will see that Controller is a class inherited
from the Controller Base class, and this class has a method called Action Method.
We also know that if we want to invoke a method (non-static), then we need an instance of
that class. Now, the question is, who, when, and how created the Controller class instance,
and how is the action method called using that instance? Let us proceed and understand
this with an example.
Creating Controller Instance in ASP.NET Core MVC:
To create an ASP.NET Core MVC Application, we need to add the required MVC Services
and Middleware Components into the Request Processing Pipeline. For example, you can
add the MVC services using the following statement within your Main method of the
Program.cs class file in .NET 6 Application.

Then, we need to configure the MVC Middleware into the Request Processing Pipeline
using either conventional or attribute routing. For example, the following code will add the
MVC Middleware Component to the Application Processing Pipeline.
 21

So, in the ASP.NET Core MVC Web Application, when the client sends an HTTP Request,
the MVC Middleware Component receives it. Once the MVC Middleware Component
receives the request, based on conventional or attribute routing, it selects the controller and
action method to execute.
However, in order to execute the action method, the MVC Middleware must create an
instance of the selected controller. This makes sense, as we know that if we want to invoke
a non-static method, we need an instance of the class. This is not different from executing a
controller action method.
The MVC Middleware uses Reflection to create an instance of the Controller class. This will
use the following IControllerActivator class. As you can see, this interface provides three
methods: Create, Release, and ReleaseAsync.

The meaning of each method is as follows:

1. object Create(ControllerContext context): This method is used to Create a
controller. Here, the parameter context is used to execute the action method.
2. void Release(ControllerContext context, object controller): This method
is used to Release a controller. Here, the parameter context is used to
execute the action method. The parameter controller specifies the controller
to release.
3. ValueTask ReleaseAsync(ControllerContext context, object
controller): This is the same as the Release method, but it Releases a
controller asynchronously.
 22

Now, the above interface is implemented by the DefaultControllerActivator class, which

implements the IControllerActivator interface methods and provides the logic to create and
release the controller. If you go to the definition of DefaultControllerActivator class, then
you will see the following.

As you can see, this class provides implementations for the IControllerActivator interface
methods. Further, the ASP.NET Core Framework uses
the DefaultControllerActivator constructor, which takes
the ITypeActivatorCache instance to create the controller. This is how the controller
instance is created in the ASP.NET Core MVC Application.

What is a Model in ASP.NET Core MVC?

A model is a class with .cs (for C#) extension with Properties and Methods. Models are
used to set or get the data. If your application does not have data, then there is no need for
a model. If your application has data, then you need a model.
The Models in an ASP.NET Core MVC Application contain a set of classes representing the
domain data (you can also say the business data) and logic to manage the
domain/business data. So, in simple words, the Model is the component in the MVC Design
pattern used to manage the data, i.e., the state of the application in memory. The Model
represents a set of classes used to describe the application’s validation, business, and data
access logic.
Where Will We Create the Models in the MVC Application?
It is not mandatory, but creating all the Model classes within the Models folder is a good
programming practice. Even though you can also create a separate class library project, put
all the model classes in that class library project, and refer to that class library project in
your MVC application. We will discuss this as we progress in this course.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:11 / 03:1110 Sec
When you create a new ASP.NET Core Web Application using the Model-View-Controller
Template, all the model classes are created inside the Models folder by default. We are also
 23

going to follow this naming convention. Let us see how to create and work with models in an
ASP.NET Core MVC Application.
Adding Models Folder in ASP.NET Core Application:
Right-click on your project, then select add => new folder option from the context menu to
add a new folder. Then, rename the folder name as Models. Here, we want to create a
model for displaying student data. So, create a class file named Student.cs within
the Models folder. Once you create the Student model, then the folder structure of your
application should look as shown below.

Now open the Student.cs class file and then copy and paste the following code. As you can
see, this is a very simple class having only 5 properties to hold the students’ information.
namespace FirstCoreMVCWebApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
This is our student model, which will store the student data in memory. As we already
discussed, the ASP.NET Core MVC Application model also contains business logic to
manage the data. So, in our example, to manage the student data, i.e., to perform the
CRUD operation on the student data, we will use the following IStudentRepository interface.
Creating IStudentRepository interface:
 24

Right-click on the Models folder and add an interface named IStudentRepository.cs. Once
you create the interface, copy and paste the following code.
namespace FirstCoreMVCWebApplication.Models
{
public interface IStudentRepository
{
Student GetStudentById(int StudentId);
}
}
As you can see, we created the above interface with one method, the GetStudentById()
method, which retrieves the student details by the student ID.
Creating StudentRepository class:
Let us create an implementation class for the above IStudentRepository interface. In our
upcoming article, we will discuss retrieving student details from a database. But for this
demo, let’s hardcode the student details. So, create a class file with the
name StudentRepository.cs within the Models folder and then copy and paste the
following code into it.
using System.Collections.Generic;
using System.Linq;
namespace FirstCoreMVCWebApplication.Models
{
public class StudentRepository : IStudentRepository
{
public List<Student> DataSource()
{
return new List<Student>()
{
new Student() { StudentId = 101, Name = "James", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 102, Name = "Smith", Branch = "ETC", Section = "B", Gender
= "Male" },
new Student() { StudentId = 103, Name = "David", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 104, Name = "Sara", Branch = "CSE", Section = "A", Gender =
"Female" },
 25

new Student() { StudentId = 105, Name = "Pam", Branch = "ETC", Section = "B", Gender =
"Female" }
};
}
public Student GetStudentById(int StudentId)
{
return DataSource().FirstOrDefault(e => e.StudentId == StudentId) ?? new Student();
}
}
}
Modify StudentController:
We already created a Controller named StudentController within the Controllers Folders. If
you have not created it, add a class file with the StudentController within the Controllers
folder. Then, modify the StudentController as shown below to use the StudentRepository to
retrieve the student details. The Student and StudentRepository are in a separate
namespace, so you must also include the namespaces.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class StudentController : Controller
{
public JsonResult GetStudentDetails(int Id)
{
StudentRepository repository = new StudentRepository();
Student studentDetails = repository.GetStudentById(Id);
return Json(studentDetails);
}
}
}
If you are directly coming to this article without reading our previous article, please modify
the Main method of the Program class as shown below. This registers the MVC Services
and Middlewares to the application request processing pipeline.
namespace FirstCoreMVCWebApplication
{
 26

public class Program

{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add MVC services to the container.
builder.Services.AddMvc();
var app = builder.Build();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
//Configuring the MVC middleware to the request processing pipeline
endpoints.MapDefaultControllerRoute();
});
app.Run();
}
}
}
Now run the application and navigate to https://localhost:<Port
Numbet>/Student/GetStudentDetails/102 URL, and you will see the student data in JSON
format, as expected in the browser, as shown in the image below.

What is a View in ASP.NET Core MVC Application?

In the Model-View-Controller (MVC) pattern, the View is the component that contains logic
to represent the model data (the model data provided to it by a controller) as a user
interface with which the end-user can interact.
A view in ASP.NET Core MVC Application is a file with a “.cshtml” (for C# language)
extension. The meaning of cshtml = CS (C Sharp) + HTML. That means the view
combines programming language (C#) and HTML (Hypertext Mark-up Language). The
Views in the ASP.NET Core MVC Application are generally returned from the Controller
Action Method.
What is the Role of View in the ASP.NET Core MVC Application?
 27

A view in ASP.NET Core MVC Application is responsible for UI, i.e., application data
presentation. That means we display information about the website on the browser using
the views only. A user generally performs all the actions on a view, such as a button click,
form, list, and other UI elements.
The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People Know
Where are Views Placed in ASP.NET Core MVC Application?
By default, Views are available inside the Views folder at the root. Usually, views are
grouped into folder names with the application controller. Each controller will have its own
folder in which the controller-specific view files will be stored. The controller-specific folders
will be created within the Views folder only.
Let’s say we have an ASP.NET Core MVC application with two controllers, i.e.,
HomeController and StudentController. The HomeController is created with the following
three action methods.
1. AboutUs()
2. ContactUs()
3. Index()
On the other hand, StudentController is created with the following four action methods.
1. Index()
2. Details()
3. Edit()
4. Delete()
Then, the following is the folder and file structure of the Views.

As you can see in the above image, a separate folder is created for each controller within
the Views Folder. The Home folder represents the HomeController and the Student folder
inside the Views folder represents the Student Controller.
 The Home folder contains the views for the Index, AboutUs, and ContactUs
webpages. Whenever a user requests one of these web pages, the Home
Controller action method determines which of the above three views to use to
build the webpage and return it to the user.
 28

 Similarly, the Student folder contains the Index, Details, Edit, and Delete web
page views. So, whenever a user requests any of these web pages, the
Student Controller action method determines which of the above views to use
to build the webpage and return to the user.
Note: In addition to action-specific views, we have also provided partial views, layouts, and
view components that can reduce repetition and allow for reuse within the application’s
views. We will discuss each of these in our upcoming articles.
Example to Understand Views in ASP.NET Core MVC Application:
We will work with the same example we created in our ASP.NET Core Controllers article
and continue in Models in the ASP.NET Core article.
Adding Home Controller
We have already created one controller called Student Controller within the Controllers
folder. Let us add a new Controller named HomeController within the Controllers folder.
At this time, your project folder structure should look like the one below.

Open HomeController and then copy and paste the following code into it.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
}
}
 29

As you can see in the above HomeController class, we have only one action method, Index.
The return type of the Index() action method is ViewResult, which means it will return a
view. To return a view, we use the View() extension method, which belongs to the
Controller Base Class.
Note: Views are typically returned from the Action method as a ViewResult, which is a type
of ActionResult. Your action method can create and return a ViewResult directly, but that
isn’t commonly done. Since most ASP.NET Core MVC Controllers are inherited from the
Controller base class, we can use the View helper method to return the ViewResult.
Now run the application and navigate to the “/Home/Index” URL or the default URL, and
you will see the following error.

Why Did We Get the Above Invalid Operation Exception?

Let us understand why we got the above exception. As we return a view from the Index
action method of Home Controller, by default, the ASP.NET Core MVC Framework will look
for a file with the name Index.cshtml in the following three locations.
1. First, it will look for the “Index.cshtml” file within the “/Views/Home” folder,
as the action method belongs to the Home Controller.
2. Then it will look for the “Index.cshtml” file in the “/Views/Shared/” folder.
3. Then it will look for the “Index.cshtml” file in the “/Pages/Shared/” folder.
If the requested “.cshtml” file is found in any of the above folders, the View generates the
HTML and sends it back to the client who initially made the request. On the other hand, if
the requested file is not found in any of the above locations, we will get the above error.
Creating Index View
As we already discussed, views will be created in a special folder called Views. So, let us
first add a folder to the project root level with the name Views. To do so, right-click on the
Project and then select Add => New Folder from the context menu. This will add a new
folder, which we will then rename Views.
As we already discussed, the Action Views will be created inside the folder whose name is
the same as the Controller’s. We want to create a view for the Index action method of the
Home Controller. So, let us first add the Home folder inside the View folder. To do so, right-
click on the Views folder and then select the Add => New Folder option, which will add a
new folder. Then, rename the folder Home.
Once you have created the Home folder, then we need to create a view within
this Home folder. In ASP.NET Core MVC, we can add views in many different ways, and
we will discuss them one by one.
 30

So, right-click on the Home folder and then select the Add => View option, which will open
the Add View window, as shown in the image below. You need to select the Razor View
and click the Add button, as shown in the image below.

Once you click the Add button, it will open the Add Razor View window. Here, you need to
give the View name as Index, select the Empty (without model) template, uncheck the
creation of a partial view, use a layout page checkbox, and then click on the Add button as
shown below.

Once you click the Add button, the Index.cshtml view should be created within the Home
folder, as shown in the image below.
 31

Now open Index.cshtml file and then copy and paste the following code into it.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h1>Index view belongs to Views/Home folder</h1>
</body>
</html>
With the above changes in place, run the application, and you should get the expected
output, as shown in the image below.
 32

Understanding View() Method in ASP.NET Core MVC Application:

If you go to the definition of the Controller base class, you will find four overload versions of
the View() method available, as shown in the image below.

Let us understand the use and significance of each of the above-overloaded versions of the
View Extension method.
View() vs View(object model) Extension Methods:
If you use the View() or View(object model) extension method to return a view, it will look for
the view file with the same name as the action method name. If you want to pass model
data, you need to use the overloaded version of the View method, which takes the object
model as an input parameter; otherwise, you can use the View() extension method, which
does not take any parameter.
For example, in the code below, we are using the View() extension method, which does not
take any parameter to return a view from the Index action method of the Home Controller.
So, in this case, by default, the ASP.NET Core MVC framework will look for a view with the
name Index.cshtml within the “Views/Home” folder.

View(string viewName) vs View(string viewName, object model)

Extension Methods:
If you want to return a view from an action method whose name is different than the action
method name, then you need to use either View(string viewName) or View(string
viewName, object model) Extension Methods. If you want to pass model data to the view,
you need to use the View(string viewName, object model) method; otherwise, you can use
the View(string viewName) method, which takes the view name as a parameter.
To understand this concept, let’s create a view with the name Test.cshtml within
the Home folder. Please follow the same steps we follow to create the index.cshtml view.
 33

Once you created the Test.cshtml view, then open the Test.cshtml file and copy-paste the
below code in it.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
</head>
<body>
<h1>Test view coming from Views/Home Folder</h1>
</body>
</html>
Now, modify the Index action method of the HomeController class as shown below to use
the View extension method, which takes the view name as a parameter.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View("Test");
}
}
}
Now run the application and navigate to the “/Home/Index” URL. As shown in the image
below, the response is coming from the Test view.
 34

How do you specify the Absolute View File Path?

Let us modify the Index action method of the Home controller, as shown below, to specify
the Absolute path of the view file. So here, the ASP.NET Core MVC framework will look for
a view file with the name “Test.cshtml” within the “Views/Home” folder.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View("Views/Home/Test.cshtml");
}
}
}
Note: When using the absolute path, the .cshtml extension is mandatory.
When you are using an absolute path to get to the project’s root directory, you can use / or
~/. You can also use any of the following, and all will do the same thing.

Absolute Path vs Relative Path in ASP.NET Core While Specifying the

View Name
In ASP.NET Core, when specifying the view name in a controller, you can use either an
absolute path or a relative path. Understanding the difference between these two types of
paths and when to use each is important for efficient and error-free coding.
Absolute Path:
 An absolute path is a complete path from the application’s root to the view
file. It usually starts with a forward slash (/) or a tilde and forward slash (~/),
which represents the web application’s root.
 Example: return View(“~/Views/Home/Index.cshtml”);
 35

Relative Path
 A relative path is relative to the location of the calling controller. In ASP.NET
Core, the default convention is to look for views in a folder that matches the
controller name within the Views folder.
 Example: If you have a HomeController, calling return View(“Index”); will by
default look for the view in Views/Home/Index.cshtml.
When to Use:
 Use relative paths when the views are located in the conventional locations
(e.g., Views/[ControllerName]/[ViewName].cshtml).
 Use absolute paths when you need to reference a view outside of the
conventional locations or when you want to ensure the path remains valid
regardless of controller location.
Another way of Creating Views:
Let us add a new action to the HomeController with the name About. So, please modify the
HomeController as shown below.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
public ViewResult About()
{
return View();
}
}
}
Now, right-click anywhere within the About action method and click on the Add View from
the context menu, as shown in the image below.
 36

Once you click on the Add View, it will open the Add New Scaffolded Item window, as
shown below. In this window, you need to select the Razor View and click on the Add
button, as shown in the image below.
 37

Once you click on the Add button, the Add Razor View window will open. By default, the
View will be named About (action method name). Finally, click the Add button, as shown in
the image below.

Once you click the Add button, it will add the About.cshtml file within the View/Home
folder, as shown in the below image.

Understanding the Need for ASP.NET Core Dependency Injection

Let us understand the need for Dependency Injection Design Patterns in ASP.NET Core
Applications with an example. First, create a new ASP.NET Core Application
named FirstCoreMVCWebApplication with an Empty Project Template. To create a new
Empty ASP.NET Core Web Application, open Visual Studio 2022 and click the Create a
new project tab, as shown in the image below.
 38

Once you click on the Create a new project tab, it will open the Create a new project
window. You need to select the ASP.NET Core Empty project template from this window
and click the Next button, as shown in the image below.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:17 / 03:1110 Sec

Once you click on the Next button, it will open the Configure Your New Project window.
Here, you must provide the necessary information to create a new project. First, give an
appropriate name for your project (FirstCoreMVCWebApplication), set the location where
 39

you want to create this project, and the solution name for the ASP.NET Core Web
application. And finally, click on the Create button, as shown in the image below.

Once you click on the Next button, the Additional Information window will open. You must
select .NET 6.0 as the Framework, check the Configure for HTTPS and do not use top-level
statements check boxes, and finally click on the Create button, as shown in the image
below.

That’s it. Once you click the Create Button, the project will be created with the Empty
template with the following folder and file structure.
 40

Adding Models:
Once you created the ASP.NET Core Empty Project, let’s add our models. To do so, first,
create a folder with the name Models. Within the Models folder, let us add a class file with
the name Student.cs, and this Student class will be our model for this application. Then
open the Student.cs class file and copy and paste the following code into it.
namespace FirstCoreMVCWebApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Creating Service Interface:
Next, create an interface named IStudentRepository.cs within the Models folder. This
interface will declare the list of methods or operations we can perform on the student data.
So, open IStudentRepository.cs and copy and paste the following code. Here, you can
see we have created the interface with two methods.
using System.Collections.Generic;
namespace FirstCoreMVCWebApplication.Models
{
public interface IStudentRepository
{
Student GetStudentById(int StudentId);
List<Student> GetAllStudent();
}
 41

}
Creating Service Implementation:
Next, create a class file named StudentRepository.cs within the same Models folder.
Then open the StudentRepository.cs class file and copy-paste the following code. This
class implements the IStudentRepository interface by implementing the two methods
declared in the IStudentRepository interface. Here, we have hard-coded the student data,
but you will get the student data from a database in real-time applications.
using System.Collections.Generic;
using System.Linq;
namespace FirstCoreMVCWebApplication.Models
{
public class StudentRepository : IStudentRepository
{
public List<Student> DataSource()
{
return new List<Student>()
{
new Student() { StudentId = 101, Name = "James", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 102, Name = "Smith", Branch = "ETC", Section = "B", Gender
= "Male" },
new Student() { StudentId = 103, Name = "David", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 104, Name = "Sara", Branch = "CSE", Section = "A", Gender =
"Female" },
new Student() { StudentId = 105, Name = "Pam", Branch = "ETC", Section = "B", Gender =
"Female" }
};
}
public Student GetStudentById(int StudentId)
{
return DataSource().FirstOrDefault(e => e.StudentId == StudentId) ?? new Student();
}
public List<Student> GetAllStudent()
{
 42

return DataSource();
}
}
}
Program.cs:
In the Program class, we need to do two things. First, we need to configure the required
MVC service to the IoC Container, and then we need to add the MVC Middleware to the
request processing pipeline. So, modify the Program class as shown below.
namespace FirstCoreMVCWebApplication
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add MVC services to the container.
builder.Services.AddMvc();
var app = builder.Build();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
//Configuring the MVC middleware to the request processing pipeline
endpoints.MapDefaultControllerRoute();
});
app.Run();
}
}
}
Without Dependency Injection:
Create a folder named Controllers in your project. Then, add a class file
named HomeController.cs within the Controllers folder. Then open the HomeController.cs
file and copy-paste the following code into it. Here, you can see that within the Index and
GetStudentDetails action methods, we are creating an instance of the StudentRepository
class and calling the respective methods.
using FirstCoreMVCWebApplication.Models;
 43

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
StudentRepository repository = new StudentRepository();
List<Student> allStudentDetails = repository.GetAllStudent();
return Json(allStudentDetails);
}
public JsonResult GetStudentDetails(int Id)
{
StudentRepository repository = new StudentRepository();
Student studentDetails = repository.GetStudentById(Id);
return Json(studentDetails);
}
}
}
With the above changes in place, now run the application and check the above two
methods. it should work as expected, as shown in the image below.
 44

Let us first understand the problem in the above implementation. Then, we will discuss how
we can overcome it by using the Dependency Injection Design Pattern in the ASP.NET
Core application.
What is the Problem with the above implementation?
As you can see in the above HomeController class, the HomeController class depends on
an instance of the StudentRepository class to get student data. Here, within the
HomeController class, we create an instance of the StudentRepository class and then
invoke the GetStudentById() and GetAllStudent methods as per our requirement. This is
tight coupling because the HomeController class is now tightly coupled with the
StudentRepository concrete class.
Tomorrow, if the implementation class of the IStudentRepository is changed
from StudentRepository to TestStudentRepository, then we also need to make the
changes to the code in the HomeController class, as they are both tightly coupled. We can
overcome this problem by implementing the Dependency Injection Design Pattern.
What is the Dependency Injection (DI) Design Pattern?
Dependency Injection is the process of injecting the dependency object into a class that
depends on it. It is the most commonly used design pattern nowadays to remove the
dependencies between objects, allowing us to develop loosely coupled software
components. Let us discuss the step-by-step procedure of how to implement dependency
injection in the ASP.NET Core MVC application.
The ASP.NET Core Framework is designed from scratch to provide inbuilt support for
Dependency Injection Design Patterns. The ASP.NET Core Framework injects the
dependency objects to a class through a constructor or method using the built-in IoC
(Inversion of Control) container.
 45

The built-in IoC (Inversion of Control) container is represented

by IServiceProvider implementation, which supports default constructor injection. The
types (i.e., classes) managed by built-in IoC containers are called services.
Types of Services in ASP.NET Core:
There are two types of services in ASP.NET Core. They are as follows:
1. Framework Services: Services that are a part of the ASP.NET Core
Framework, such as IApplicationBuilder, IHostingEnvironment,
ILoggerFactory, etc.
2. Application Services: The services (custom types or classes) you create as
a programmer for your application.
To let the IoC container automatically inject our application services, we must first register
them with the IoC container.
How do you Register a Service with ASP.NET Core Dependency
Injection Container?
We need to register a service with the ASP.NET Core Dependency Injection Container
within the Main method of the Program class. Before we discuss how to Register a service
with the Dependency Injection Container, it is important to understand the service’s lifetime.
Setting the lifetime of the dependency object determines how many times it needs to be
created.
What are the Different Methods ASP.NET Core Provides to Register a
Service with the Dependency Injection Container?
ASP.NET Core provides 3 methods for registering a service with the ASP.NET Core
Dependency Injection container. The method we use to register a service will determine its
lifetime.
Singleton:
A Singleton service is created only once per application lifetime. The same instance is used
throughout the application. It is ideal for stateless services or maintaining a consistent state
throughout the application’s lifetime. Common uses include configuration services, logging,
or other services where a single instance is sufficient and desirable. This can be achieved
by adding the service as a singleton through the AddSingleton method of the
IServiceCollection.
Transient:
A Transient service is created each time it is requested from the service container. This
means a new instance is provided to every class or method that requires it. This is ideal for
lightweight, stateless services. Since a new instance is always created, you don’t need to
worry about thread safety related to the internal state. This can be achieved by adding the
service through the AddTransient method of the IServiceCollection.
Scoped:
A Scoped service is created once per client request (in a web application, this typically
means per HTTP request). This is ideal for services that need to maintain state within a
single request but should not be shared across different requests. Common examples
include data access operations within a single transaction. This can be achieved by adding
the service through the AddScoped method of the IServiceCollection.
Registering the StudentRepository with ASP.NET Core Dependency
Injection
 46

We need to register the service to the built-in dependency injection container with the
program class. The following code shows how to register a service with different lifetimes:

What is the ServiceDescriptor class in .NET Core?

The ServiceDescriptor class is part of the Dependency Injection (DI) framework provided by
Microsoft in the ASP.NET Core framework. It essentially describes how a service should be
instantiated and managed by the container. So, it describes a service, including its lifetime
(singleton, scoped, or transient), the service type, and the implementation type.
Extension Methods for Registration
ASP.NET Core framework includes extension methods for each type of
lifetime: AddSingleton(), AddTransient(), and AddScoped() methods for singleton,
transient, and scoped lifetime, respectively. The following example shows how to register
types (services) using extension methods.

Let us use the service’s Singleton Instance in this example. Modify the Main method of the
Program class as shown below. Which approach do you want to use to register the service?
It is your preference.
using FirstCoreMVCWebApplication.Models;
 47

namespace FirstCoreMVCWebApplication
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add Framework MVC services to the Container.
builder.Services.AddMvc();
//Application Service
builder.Services.AddSingleton<IStudentRepository, StudentRepository>();
//builder.Services.AddSingleton(typeof(IStudentRepository), typeof(StudentRepository));
//builder.Services.AddTransient<IStudentRepository, StudentRepository>();
//builder.Services.AddTransient(typeof(IStudentRepository), typeof(StudentRepository));
//builder.Services.AddScoped<IStudentRepository, StudentRepository>();
//builder.Services.AddScoped(typeof(IStudentRepository), typeof(StudentRepository));
//Add Application Service to the Container.
//builder.Services.Add(new ServiceDescriptor(typeof(IStudentRepository),
// new StudentRepository())); // by default singleton
//builder.Services.Add(new ServiceDescriptor(typeof(IStudentRepository),
// typeof(StudentRepository), ServiceLifetime.Singleton)); // singleton
//builder.Services.Add(new ServiceDescriptor(typeof(IStudentRepository),
// typeof(StudentRepository), ServiceLifetime.Transient)); // Transient
//builder.Services.Add(new ServiceDescriptor(typeof(IStudentRepository),
// typeof(StudentRepository), ServiceLifetime.Scoped)); // Scoped
var app = builder.Build();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
//Configuring the MVC middleware to the request processing pipeline
endpoints.MapDefaultControllerRoute();
});
app.Run();
 48

}
}
}
Constructor Injection in ASP.NET Core MVC Application
Once we register the service, the IoC container automatically performs constructor injection
if a service type is included as a parameter in a constructor. Let us modify the
HomeController, as shown below, to use Constructor Dependency Injection in the ASP.NET
Core MVC Application.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
//Create a reference variable of IStudentRepository
private readonly IStudentRepository? _repository = null;
//Initialize the variable through constructor
public HomeController(IStudentRepository repository)
{
_repository = repository;
}
public JsonResult Index()
{
List<Student>? allStudentDetails = _repository?.GetAllStudent();
return Json(allStudentDetails);
}
public JsonResult GetStudentDetails(int Id)
{
Student? studentDetails = _repository?.GetStudentById(Id);
return Json(studentDetails);
}
}
}
 49

Code Explanation:
In the above example, the IoC container will automatically inject an instance of
the StudentRepository into the constructor of HomeController. We don’t need to do
anything else. An IoC container will create and dispose of an instance of the
IStudentRepository based on the registered lifetime. Injecting the dependency object
through a constructor is called a constructor dependency injection.
We created the _ repository variable as read-only, ensuring that once we inject the
dependency object, that value can never be changed. At this point, run the application, and
you should get the output as expected, as shown in the below image.

Action Method Injection in ASP.NET Core Application

Sometimes, we only need a dependency object in a single action method. In that case, we
need to use the [FromServices] attribute. For a better understanding, please modify the
HomeController class as follows. Here, you can see we are using
the [FromServices] attribute within the Index action method. So, at runtime, the IoC
Container will inject the dependency object into the IStudentRepository repository reference
variable. Injecting the dependency object through a method is called method dependency
injection.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
 50

{
public JsonResult Index([FromServices] IStudentRepository repository)
{
List<Student> allStudentDetails = repository.GetAllStudent();
return Json(allStudentDetails);
}
}
}
Run the application, and you will get the expected output, as shown below.

What is FromServices Attribute in ASP.NET Core?

The FromServices Attribute in ASP.NET Core is a way to perform dependency injection
directly into controllers’ action methods. Instead of injecting dependencies through the
controller’s constructor, you can use this attribute to inject them directly into an action
method. This is useful when a specific service is needed only in a single action method and
not throughout the controller.
Property Dependency Injection in ASP.NET Core
The Built-in IoC container does not support property injection. You will have to use a third-
party IoC container.
Get Services Manually in ASP.NET Core
We can also manually access the services configured with built-in IoC containers using
the RequestServices property of HttpContext. So, modify the HomeController class as
shown below to access the dependent service manually.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
 51

{
public JsonResult Index()
{
var services = this.HttpContext.RequestServices;
IStudentRepository? _repository =
(IStudentRepository?)services.GetService(typeof(IStudentRepository));
List<Student>? allStudentDetails = _repository?.GetAllStudent();
return Json(allStudentDetails);
}
public JsonResult GetStudentDetails(int Id)
{
var services = this.HttpContext.RequestServices;
IStudentRepository? _repository =
(IStudentRepository?)services.GetService(typeof(IStudentRepository));
Student? studentDetails = _repository?.GetStudentById(Id);
return Json(studentDetails);
}
}
}
With the above changes in place, run the application, and you should get the output as
expected as in the previous examples. It is recommended to use constructor injection
instead of getting it using RequestServices.
What is the GetService Method in ASP.NET Core?
The GetService method in ASP.NET Core is a part of the dependency injection (DI) system
provided by the framework. It is used to retrieve a service instance from the DI
container. You need to pass the type of service you want to retrieve as a parameter to this
method.
What are the Advantages of using ASP.NET Core Dependency Injection?
The ASP.NET Core Dependency Injection allows us to develop loosely coupled software
components. Here are some of the advantages of using dependency injection in ASP.NET
Core:
1. Loose Coupling: By using dependency injection, we can separate our
classes from their dependencies, resulting in code that is simpler to maintain
and test.
2. Testability: By using dependency injection, we can increase the testability of
our code by easily replacing dependencies with mock objects during unit
testing.
 52

3. Extensibility: Using Dependency injection enhances the extensibility of our

code by offering the flexibility to switch out dependencies conveniently.
4. Reusability: Using dependency injection makes our code more reusable
since we can conveniently share dependencies among various classes.
Creating ASP.NET Core Application using MVC
Template
In this article, I will discuss How to Create ASP.NET Core Web Applications using MVC
(Model-View-Controller) Project Template and understand the Folder and File
Structure. Please read our previous article before proceeding to this article, where we
discussed ASP.NET Core Dependency Injection with Examples.
Creating an ASP.NET Core MVC Application:
As of now, we have discussed everything using the ASP.NET Core Empty Project Template
and understand the different parts of an ASP.NET Core MVC Application. We also
discussed Setting up the MVC Request pipeline in the ASP.NET Core Web Application.
But the question is, do we need to manually set up everything to create an ASP.NET Core
MVC Application? The answer is NO. The ASP.NET Core Framework provides one built-in
Project Template called ASP.NET Core Web App (Model-View-Controller), which will create
an ASP.NET Core MVC Application for us with the required MVC setup. From now
onwards, in this ASP.NET Core MVC course, we will create the applications using the
ASP.NET Core Web App (Model-View-Controller) Project template.
Creating an ASP.NET Core Application using the MVC Project Template:
To create an ASP.NET Core Web Application with the MVC Project template. First, open
Visual Studio 2022 and click the Create a new project tab, as shown in the image below.
The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People Know

Once you click on the Create a new Project tab, the following Create a new Project
window will open. From this window, select C#, All Platforms, and Web from the respective
 53

dropdowns, as highlighted below. Select “ASP.NET Core Web App (Model-View-

Controller),” as highlighted below, and click on the “Next” button, as shown in the image
below.

Once you click on the Next button, it will open the Configure Your New Project window.
You must provide the necessary information to create a new ASP.NET Core project here.
First, give an appropriate name for your project (SampleMVCWeb), set the location where
you want to create this project, and the solution name for the ASP.NET Core Web
application. And finally, click on the Create button, as shown in the image below.

Once you click the Create button, the following Additional Information window will
open: You must select Framework – .NET 6.0 (Long-term support), Authentication type
– None. You must also check the Configure for HTTPS and do not use top-level statements
check boxes. Finally, click the Create button, as shown in the image below.
 54

Once you click on the Create Button, the project will be created with the Web Application
(Model-View-Controller) template, i.e., the MVC template, with the following folder and file
structure.
 55

Understanding the ASP.NET Core MVC Project File and Folder

Structure:
Several key components work together in an ASP.NET Core MVC application to ensure the
application runs smoothly. Let’s discuss the roles and characteristics of each folder and file
structure of the ASP.NET Core MVC application:
Dependencies Folder:
The Dependencies folder in ASP.NET Core stores the libraries, frameworks, and packages
that your application relies on to function properly. These are managed through the csproj
file or via the NuGet package manager. Common dependencies include ASP.NET Core
libraries, Entity Framework Core, and third-party libraries for features like logging,
authentication, etc. If we add new packages as per our requirement, those packages will be
added inside this Dependencies folder (the Packages folder, which is a subfolder of
Dependencies).
Properties Folder:
The Properties folder typically contains the launchSettings.json file. This file configures the
settings used by Visual Studio to launch your application. It includes environment variables,
application URL, and other settings related to how the application is run during
 56

development. You can specify different settings for different environments (like
Development, Staging, and Production) in this file.
wwwroot Folder:
The wwwroot folder is the root of the web server or project’s web root directory and contains
all the static files your application serves directly to clients, such as HTML, CSS, JavaScript,
and image files. Files in this folder are accessible via a URL, unlike other parts of your
application. It is the default static file location, but you can configure ASP.NET Core to use
different or additional directories.
Controllers Folder:
The Controllers folder contains classes that handle client requests and return a response.
Each controller class is typically responsible for a specific area of the application.
Controllers process incoming requests, perform operations on the data through the models,
and select a view to render a response. The methods inside controller classes are called
actions and mapped to different routes defined in the application.
Models Folder:
The Models folder contains classes representing the application’s data and the logic to
manage that data. Models transfer data between the controllers and the views or represent
the data that needs to be persisted in a database. They often correspond to database tables
in applications that use Entity Framework Core. For instance, a Product model might
represent a product table in a database.
Views Folder:
The Views folder contains files that are used to generate the HTML content returned to the
client. These files are typically Razor view files (.cshtml), which mix HTML markup with C#
code for dynamic content generation. Views are organized into subfolders, usually with a
folder for each controller, and the view files correspond to actions in the controller.
Shared Folder:
The Shared folder in ASP.NET Core MVC stores shared resources like Razor layout pages
(_Layout.cshtml), partial views, or other common components used across different views in
your application. It helps maintain a consistent look and feel across your site and promotes
the reusability of views and components. The Shared folder is typically located under the
Views directory.
_ViewStart.cshtml File:
The _ViewStart.cshtml file defines common settings applied to all Razor views in the
application (or in a specific folder if multiple _ViewStart.cshtml files are used). It’s executed
before the rendering of each view. This makes it ideal for setting layout pages and other
common settings.
ViewImports.cshtml File:
The _ViewImports.cshtml file includes common Razor directives that you want to be
available in your views. It helps in reducing code duplication. Common uses of
_ViewImports.cshtml include:
 Importing namespaces so you don’t have to add @using directives to every
view.
 Adding Tag Helpers, a feature in ASP.NET Core that enables server-side
code to create and render HTML elements in Razor files.
appsettings.json file
 57

 The appsettings.json file is used for configuration purposes. It stores

configuration data in a JSON format, including database connection strings,
application settings, logging configuration, and more.
 The settings in appsettings.json can be environment-specific. For instance,
you can use appsettings.Development.json, appsettings.Staging.json, and
appsettings.Production.json to hold configurations for different environments.
The appropriate file is selected based on the application’s runtime
environment.
Program.cs File:
 In ASP.NET Core MVC, Program.cs is the entry point of the application and is
responsible for configuring and running the web application.
 This file contains the Main method, which creates a host for the web
application using a builder. The host configures the app’s services, logging,
configuration sources, and more.
 With .NET 6 and later, Program.cs has been simplified to use top-level
statements, eliminating the need for a separate Startup.cs file. This results in
more concise and readable code.
 Services (like MVC, Entity Framework Core, and Identity) are configured
here, and middleware is set up in the request processing pipeline.
ASP.NET Core MVC Setup:
The ASP.NET Core Web APP (Model-View-Controller) Project template includes the
required MVC setup by default. To confirm this, open the Program.cs class file, and you will
see the framework has added the required MVC Services and MVC Request processing
pipeline, as shown in the image below.
namespace SampleMVCWeb

public class Program

public static void Main(string[] args)

var builder = WebApplication.CreateBuilder(args);

// Add MVC Services to the container.

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())
 58

app.UseExceptionHandler("/Home/Error");

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.

app.UseHsts();

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

//MVC Request Processing Pipeline

app.MapControllerRoute(

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

}
Running the MVC Application:
The ASP.NET Core Web APP (Model-View-Controller) Project template creates the Home
Controller with some views. Let’s run the application and see the output, as shown below.
 59

ViewData in ASP.NET Core MVC Application

In this article, I will discuss ASP.NET Core MVC ViewData with Examples. Please read our
previous article discussing How to Create an ASP.NET Core Web Application using
MVC (Model-View-Controller) Project Template.
How do you Pass Data to Views in ASP.NET Core MVC?
In ASP.NET Core MVC Applications, we can pass the data from a controller action method
to a view in many different ways, such as by using ViewBag, ViewData, TempData, and
a Strongly Typed Model. In this article, I will show you how to use ViewData to pass the
data from the controller action method to a view. The other three techniques, i.e., ViewBag,
Tempdate, and Strongly Typed View Model, will be discussed in our upcoming articles.
What is ViewData in ASP.NET Core MVC Application?
In ASP.NET Core MVC, ViewData is a dictionary object that allows us to pass data from our
controller to our view. It’s useful for transferring lightweight data between the controller and
the view. If you go to the definition of ViewData, you will see that It is a property in the
Controller abstract class, and its type is ViewDataDictionary. This property is also
decorated with the ViewDataDictionary attribute, as shown in the image below.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:16 / 03:1110 Sec
As you can see in the above image, the data type of ViewData Property is
ViewDataDictionary. Let’s have a look at the definition of the ViewDataDictionary by right-
clicking on it and selecting go to definition, and you will see the following definition.
 60

As you can see in the above image, the ViewDataDictionary class implements the
IDictionary. So, ViewData in ASP.NET Core MVC is a dictionary object. As it is a dictionary
object, it will store the data in the form of Key-Value Pairs where each key must be a string,
and the value that we pass to the dictionary will be stored as an object type. Here, the key
is of type String, and the value is of type object, i.e., we can store any data, including null.
How do you use ViewData in the ASP.NET Core MVC Application?
To use ViewData in the ASP.NET Core MVC Application, we first need to create a new key
in ViewData and then assign some data to it. The key should be in string format, and you
can give any name to the key. Then, you can assign any data to this key, such as the
following.
ViewData[“KeyName”] = “Some Data”;
Since ViewData is a server-side code, hence to use it on a view, we need to use the razor
syntax, i.e., @ something as follows.
@ViewData[“KeyName”]
You can access the string data from the ViewData dictionary without casting the data to
string type. But if you are accessing data other than the string type, you must explicitly cast
the data to the type you expect.
How to Access String Data using ViewData in ASP.NET Core MVC

How to Access Student Data using ViewData in ASP.NET Core MVC

 61

Example to Understand ViewData in ASP.NET Core MVC Application:

Let us see an example of using ViewData to pass data from a controller action method to a
view. In our example, we want to pass three pieces of information from the controller action
method to the view. One is the Page’s title, the second is the page’s Header, and the third is
the Student data.
So, first, create an ASP.NET Core Web Application (with the
name FirstCoreMVCWebApplication) with MVC (Model-View-Controller) Project
Template, i.e., Creating ASP.NET Core Application using ASP.NET Core Web APP (Model-
View-Controller) Template. Once you create the project, add a class file
named Student.cs in the Models folder. Then, please copy and paste the code below into
it.
namespace FirstCoreMVCWebApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Modifying HomeController:
Next, modify the Home Controller class as shown below. Here, we remove the existing code
and add one action method, i.e., Details. As part of this method, we create three ViewData
objects to store the Title, Header, and Student data. Here, Title, Header, and Student are
the keys of the ViewData Dictionary Object.
using Microsoft.AspNetCore.Mvc;
using FirstCoreMVCWebApplication.Models;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Details()
{
//String string Data
ViewData["Title"] = "Student Details Page";
ViewData["Header"] = "Student Details";
 62

Student student = new Student()

{
StudentId = 101,
Name = "James",
Branch = "CSE",
Section = "A",
Gender = "Male"
};
//storing Student Data
ViewData["Student"] = student;
return View();
}
}
}
Creating Details.cshtml View:
Our previous article discussed the different ways to create Views in ASP.NET Core MVC
Applications. Let us add a view with the name Details.cshtml within the Home folder,
which is present inside the Views folder, as shown below. Once you add the Details view,
your Views folder structure should look as shown below.

Now open the Details.cshtml view and copy and paste the following code into it. As you
can see in the code below, we directly access the string data from the ViewData without
type casting. However, while accessing the Student data from the ViewData, we typecast it
to the appropriate Student type.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewData["Title"]</title>
</head>
 63

<body>
<h1>@ViewData["Header"]</h1>
@{
var student = ViewData["Student"] as FirstCoreMVCWebApplication.Models.Student;
}
<div>
StudentId : @student?.StudentId
</div>
<div>
Name : @student?.Name
</div>
<div>
Branch : @student?.Branch
</div>
<div>
Section : @student?.Section
</div>
<div>
Gender : @student?.Gender
</div>
</body>
</html>
Now run the application and navigate to the “/Home/Details” URL. As shown below, you will
see the data as expected.
 64

Features of ViewData
 Type Safety: ViewData does not provide type safety as it stores data as
object. You need to cast the data to the appropriate type when retrieving it.
 Scope: The data in ViewData only lasts for the duration of the current HTTP
request. It’s reset for each new request, so it is not a mechanism for
persisting data between requests, such as across redirects.
 Accessing Data: You can set data in a controller by adding entries to the
ViewData dictionary with a string key. In the view, you can access these
values using the same key. When used in the view, the values must be cast
to the appropriate type.
 Null Handling: Since ViewData returns null if a key does not exist, you
should check for null or use the ?. operator to avoid exceptions.
 Usage: ViewData is best used to pass small amounts of data. If you’re
passing complex data or require type safety, consider using ViewBag or
strongly typed views.

ViewBag in ASP.NET Core MVC Application

In this article, I will discuss the use of ViewBag in ASP.NET Core MVC Applications with
Examples. Please read our previous article discussing ViewData in ASP.NET Core
MVC Applications. As we already discussed in the ASP.NET Core MVC application, we can
pass data from a controller to a view using ViewData, ViewBag, TempData, and a Strongly
Typed View Model.
What is ViewBag in ASP.NET Core MVC?
In ASP.NET Core MVC, ViewBag is a dynamic property that provides a convenient way to
pass data from a controller action to its corresponding view. It allows us to dynamically add
 65

properties to the ViewBag object in the controller actions, which are then accessible in the
Razor views. If you go to the Controller abstract class, you will find the following signature of
the ViewBag property.

How Do We Pass and Retrieve Data from ViewBag in ASP.NET Core

MVC?
You need to keep in mind that ViewBag operates on a dynamic data type. So, we don’t
require typecasting while accessing data from a ViewBag. It does not matter whether the
data we are accessing is of type string or any complex type.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:04 / 03:1110 Sec
How to Access Data from ViewBag in ASP.NET Core MVC with String Type:

How to Access Data from ViewBag in ASP.NET Core MVC with Complex Type:
 66

Note: Dynamic Data Types means the data type will be decided at runtime based on the
right-hand side values. So, we don’t require typecasting if we use ViewBag.
Example to Understand ViewBag in ASP.NET Core MVC Application:
Let us see an example of using ViewBag to pass data from a controller action method to a
view in the MVC Application. We will work with the example we worked on in our previous
article with ViewData. So, modify the Details action method of the HomeController class as
shown below.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Details()
{
ViewBag.Title = "Student Details Page";
ViewBag.Header = "Student Details";
Student student = new Student()
{
StudentId = 101,
Name = "James",
Branch = "CSE",
Section = "A",
Gender = "Male"
};
ViewBag.Student = student;
 67

return View();
}
}
}
As you can see in the above example, here we are using the dynamic properties Title,
Header, and Student on the ViewBag.
Accessing ViewBag in a View in ASP.NET Core
Now, we will see how to access the ViewBag data within a View in MVC Application. So,
modify the Details.cshtml view file as shown below. Here, you can see we are directly
accessing the string and complex type values without typecasting, and this is possible
because of the dynamic data type.
@{
Layout = null;
var student = ViewBag.Student;
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>@ViewBag.Header</h1>
<div>
StudentId : @student?.StudentId
</div>
<div>
Name : @student?.Name
</div>
<div>
Branch : @student?.Branch
</div>
<div>
Section : @student?.Section
</div>
<div>
 68

Gender : @student?.Gender
</div>
</body>
</html>
As you can see, we are accessing the data from the ViewBag using the same dynamic
properties: Title, Header, and Student. Now run the application and navigate to the
“/Home/Details” URL, and you will see the data as expected on the webpage, as shown in
the image below.

Features of ViewBag
 Weakly Typed: Since ViewBag is dynamic, it doesn’t offer compile-time type
checking. This can lead to runtime errors if you attempt to use properties that
do not exist or if there is a type mismatch. This flexibility allows for easy-to-
write code but requires careful handling to avoid errors.
 Usage: Like ViewData, ViewBag passes data from a controller to a view. It’s
useful for transferring lightweight and non-complex data. For instance, you
might use ViewBag to pass page titles, display messages, or manage simple
settings that do not require a structured format.
 Scope: The scope of ViewBag is limited to the current HTTP request, just like
ViewData. It is not suitable for passing data across multiple requests, as it
gets cleared at the end of each request.
 No Explicit Casting Required: Unlike ViewData, when you access
properties on ViewBag, you do not need to cast them since they are dynamic.
However, this also means less safety against type mismatches.
 69

 Null Handling: Accessing a property that hasn’t been set will return null, so
do not throw an exception because ViewBag uses the dynamic feature.
Strongly Typed View in ASP.NET Core MVC
Application
In this article, I will discuss How to Create a Strongly Typed View in ASP.NET Core
MVC Application with Examples. Please read our previous article discussing ViewBag in
ASP.NET Core MVC Application. As part of this article, we will discuss the following
pointers.
1. Why do we need a Strongly Typed View in ASP.NET Core MVC?
2. How do you create a Strongly Typed View in ASP.NET Core MVC?
3. What are the Advantages of using a Strongly Typed View?
4. When should you use a Strongly Typed View in ASP.NET Core MVC?
Why do we need a Strongly Typed View in ASP.NET Core MVC?
As we already discussed, in ASP.NET Core MVC, we can pass the model data to a view
using many different methods, such as ViewBag, ViewData, TempData, Strongly Typed
View Model, etc. The view becomes loosely typed when we pass the model data to a View
using ViewBag, TempData, or ViewData. We will not get intelligence support or compile-
time error checking in a loosely typed view.
A strongly typed view in ASP.NET Core MVC is a view specifically designed to work with a
particular type of model. This model is passed from the controller to the view, allowing for
direct interaction with the data structure. The compiler provides Type-Checking and
IntelliSense support for the data being used in the view. Strongly typed views enhance code
quality, reduce runtime errors, and improve maintainability by ensuring that the data used in
the view aligns with the expected data structure.
How Do We Create Strongly Typed Views in ASP.NET Core MVC?
To create a strongly typed view in ASP.NET Core MVC, we need to follow the below steps:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:08 / 03:1110 Sec
1. Create a Model: Define a model class representing the data you want to
display in the view. This class contains properties corresponding to the data
you need to access and render in the view.
2. Pass the Model to the View: In the controller action, create an instance of
the model class, populate it with data, and then pass it to the view.
3. Declare the Model in the View: At the top of the view file, declare the model
type using the @model directive. This informs the view about the type of data
it will be working with.
4. Access Model Properties in the View: Inside the view, you can access the
properties of the model using Razor syntax (@Model.PropertyName). The
compiler provides IntelliSense support for the properties of the model, helping
you avoid typos and access properties safely.
Example to Understand Strongly Typed View in ASP.NET Core MVC
Application
Create a Model
 70

First, you need to define a model class. A model is a C# class with properties. This class
will be used to transfer data between your controller and view. We will use the same
application we used in our previous two articles. So, we are going to use the same Student
model. If you are coming to this article directly without reading our previous two articles,
then please create the following Student class within the Models folder:
namespace FirstCoreMVCWebApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
To create a Strongly Typed View from the controller’s action method, we must pass the
model object as a parameter to the View() extension method. The Controller base class
provides the following two overloaded versions of the View() extension method, which we
can use to pass the model object from the controller action method to a view in the
ASP.NET Core MVC Application.

We will use the example we worked on in our previous two articles. Now, we will use the
overloaded version of the Views() Extension method, which takes only the model object as
an input parameter. So, modify the Details action method of the Home Controller, as shown
below, to pass the student object as a parameter to the View extension method.
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Details()
{
 71

//Using ViewBag
ViewBag.Title = "Student Details Page";
//Using ViewData
ViewData["Header"] = "Student Details";
//Creating Student Object to Hold Student data
Student student = new Student()
{
StudentId = 101,
Name = "James",
Branch = "CSE",
Section = "A",
Gender = "Male"
};
//Passing the Model Object as a Parameter to View Extension Method
//It means the View is going to be a Strongly Type View for the Student Model
return View(student);
}
}
}
Changes in Details.cshtml View:
To create a strongly typed view in the ASP.NET Core MVC Application, we need to specify
the model type within the view by using the @model directive. Here, the Student class will
be our model, which we passed from our action method as a parameter to the View
Extension method. So, we need to specify the model for the view, as shown below.
@model FirstCoreMVCApplication.Models.Student
The above statement will tell the view that we will
use FirstCoreMVCApplication.Models.Student as the model for this view. In the directive
(@model), m is in lowercase, and the statement should not be terminated with a
semicolon.
Then, to access the model object properties, you can use @Model. Here, the letter M is
in uppercase. So, in our example, we can access the Student objects properties such as
Name, Gender, Branch, and Section by using @Model.Name, @Model.Gender,
@Model.Branch, and @Model.Section, respectively. So, Modify the Details.cshtml view
file as shown below to make the view a Strongly Typed View.
@{
Layout = null;
}
 72

<!DOCTYPE html>
@model FirstCoreMVCWebApplication.Models.Student
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>@ViewData["Header"]</h1>
<div>
StudentId : @Model?.StudentId
</div>
<div>
Name : @Model?.Name
</div>
<div>
Branch : @Model?.Branch
</div>
<div>
Section : @Model?.Section
</div>
<div>
Gender : @Model?.Gender
</div>
</body>
</html>
Now run the application and navigate to the /Home/Details URL. As shown in the image
below, you will see the data as expected.
 73

Advantages of Using Strongly Typed Views:

We will get the following advantages when we use a strongly typed view.
1. It will provide Compile-Time Error checking, and we will get intelligence
support.
2. With intelligence support, the chances of mis-spelling the properties and
making typographical errors are almost zero.
3. If we misspell the property name, it comes to know at compile time rather
than runtime.
The best and preferred approach in ASP.NET Core MVC to passing data from a controller
action method to a view is to use a strongly typed model object. Using strongly typed views
promotes code correctness, makes your code more readable, and helps catch errors at
compile time rather than runtime.

ViewModel in ASP.NET Core MVC Application

In this article, I will discuss ViewModel in ASP.NET Core MVC Application with Examples.
Please read our previous article discussing Strongly Typed View in ASP.NET Core
MVC Application. As part of this article, we will discuss the following pointers.
1. What is a View Model in ASP.NET Core?
2. Why do we need the View Model?
3. How Do We Implement the View Model in the ASP.NET Core
Application?
4. When Should We Use the View Model in ASP.NET Core MVC?
What is a ViewModel in ASP.NET Core MVC?
 74

In Real-Time Applications, a single model object may not contain all the data required for a
view. We must use a View Model in the ASP.NET Core MVC application in such situations.
In simple words, a View Model in ASP.NET Core MVC is a model that contains more than
one model data required for a particular view.
In ASP.NET Core MVC, a View Model is a Design Pattern used to create a model
specifically designed for a view. It shapes the data in a way that is most convenient for
rendering in a view, which may involve aggregating, transforming, or simplifying data from
one or more data models or sources.
Understanding the ViewModel in ASP.NET Core MVC:
The following diagram shows the visual representation of a view model in the ASP.NET
Core MVC application.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:23 / 03:1110 Sec

Let’s say we want to display the student details in a view. We have two different models to
represent the student data. The Student Model is used to represent the student’s basic
details, whereas the Address model is used to represent the student’s address. Along with
the above two models, we also required some static information in the view, like the page
header and page title. If this is our requirement, then we need to create a view model, say
StudentDetailsViewModel, and that view model will contain both the models (Student and
Address) and properties to store the page title and page header.
Creating the Required Models:
We will use the same example from our previous article. First, modify the Student.cs class
file, which is present within the Models folder of your application, as follows. This model will
represent a student’s basic information, such as a Name, Branch, Section, etc.
namespace FirstCoreMVCWebApplication.Models
{
 75

public class Student

{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Next, we need to create the Address model, representing the Student Address, such
as City, State, Country, etc. So, create a class file with the name Address.cs within the
Models folder and copy and paste the following code into it.
namespace FirstCoreMVCWebApplication.Models
{
public class Address
{
public int StudentId { get; set; }
public string? City { get; set; }
public string? State { get; set; }
public string? Country { get; set; }
public string? Pin { get; set; }
}
}
Creating the View Model:
Now, we need to create the View Model to store the data required for a particular view. In
our case, it’s the student’s Details view. This View Model will represent the Student Model +
Student Address Model + Some additional data like Page Title and Page Header.
You can create the View Models anywhere in your application, but it is recommended to
create all the View Models within a folder called ViewModels to keep things organized. So
first, create a folder at the root directory of your application with the name ViewModels, and
then create a class file with the name StudentDetailsViewModel.cs within
the ViewModels folder. Copy and paste the following code once you create
the StudentDetailsViewModel.cs class file.
using FirstCoreMVCWebApplication.Models;
namespace FirstCoreMVCWebApplication.ViewModels
{
 76

public class StudentDetailsViewModel

{
public Student? Student { get; set; }
public Address? Address { get; set; }
public string? Title { get; set; }
public string? Header { get; set; }
}
}
We named the ViewModel class StudentDetailsViewModel. Here, Student represents the
Controller name, and Details represents the action method name within the Student
Controller. As it is a view model, we prefixed the word ViewModel. Although it is not
mandatory to follow this naming convention, I personally prefer to follow it to organize view
models.
Creating Student Controller:
Right-click on the Controllers folder, add a new class file named StudentController.cs, and
copy and paste the following code into it. As you can see in the Details action method, we
are populating the StudentDetailsViewModel with the required data and then sending it to
the corresponding view.
using FirstCoreMVCWebApplication.Models;
using FirstCoreMVCWebApplication.ViewModels;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class StudentController : Controller
{
public ViewResult Details()
{
//Student Basic Details
Student student = new Student()
{
StudentId = 101,
Name = "Dillip",
Branch = "CSE",
Section = "A",
Gender = "Male"
};
 77

//Student Address
Address address = new Address()
{
StudentId = 101,
City = "Mumbai",
State = "Maharashtra",
Country = "India",
Pin = "400097"
};
//Creating the View model
StudentDetailsViewModel studentDetailsViewModel = new StudentDetailsViewModel()
{
Student = student,
Address = address,
Title = "Student Details Page",
Header = "Student Details",
};
//Pass the studentDetailsViewModel to the view
return View(studentDetailsViewModel);
}
}
}
As you can see, we are now passing the view model as a parameter to the view. This view
model contains all the data required by the Details view. We are not using any ViewData or
ViewBag to pass the Page Title and Header to the view; instead, they are also part of the
ViewModel, which makes it a strongly typed view.
Creating the Details View:
First, add a folder with the name Student within the Views folder of your project. Once you
add the Student Folder, then you need to add a Razor view file with the
name Details.cshtml within the Student folder. Once you add the Details.cshtml view,
then copy and paste the following code into it.
@model FirstCoreMVCWebApplication.ViewModels.StudentDetailsViewModel
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
 78

<head>
<title>@Model?.Title</title>
</head>
<body>
<h1>@Model?.Header</h1>
<div>
StudentId : @Model?.Student?.StudentId
</div>
<div>
Name : @Model?.Student?.Name
</div>
<div>
Branch : @Model?.Student?.Branch
</div>
<div>
Section : @Model?.Student?.Section
</div>
<div>
Gender : @Model?.Student?.Gender
</div>
<h1>Student Address</h1>
<div>
City : @Model?.Address?.City
</div>
<div>
State : @Model?.Address?.State
</div>
<div>
Country : @Model?.Address?.Country
</div>
<div>
Pin : @Model?.Address?.Pin
</div>
 79

</body>
</html>
Now, the Details view has access to the StudentDetailsViewModel object that we passed
from the controller action method using the View() Extension method. Using
the @model directive, we set StudentDetailsViewModel as the Model for
the Details view. Then, we access Student, Address, Title, and Header using
the @Model property.
Now run the application and navigate to the /Student/Details URL. As shown in the image
below, you will see the expected output on the webpage.

Key Features of ViewModel

 Strongly Typed: Unlike ViewData or ViewBag, which are dynamic and
loosely typed, a ViewModel is a strongly typed object. This means it has a
specific, predefined structure with properties of defined types. This strong
typing ensures compile-time type checking, reducing the risk of runtime errors
and making the codebase more robust and maintainable.
 Data Aggregation: A View Model can aggregate data from multiple sources
or models, providing exactly what is needed for the view. For example, if a
view needs to display data from two different database tables, a View Model
can contain properties sourced from both tables.
 80

 Customization and Flexibility: Because ViewModels are designed per view,

they can be customized to fit the specific requirements of each view. This
allows for more flexibility in data representation and operations that are
specific to the view.
 Enhances Security: By using ViewModels, you can ensure that only the data
necessary for the view is exposed. This can prevent over-posting and under-
posting vulnerabilities, which can occur when using models directly tied to
database schemas.
 Simplifies Views: ViewModels can simplify Razor views by preparing all the
data needed in the view beforehand. Views don’t need complex logic to
format or prepare data; they simply display the data from the ViewModel.
TempData in ASP.NET Core MVC
In this article, I will discuss ASP.NET Core MVC TempData with Examples. As discussed
in our previous articles, we can use ViewData, ViewBag, and Strongly Typed Models to
pass data from a controller action method to a view. Now, we will see another approach to
sending data from the controller action method to a view, i.e., TempData. As part of this
article, we will discuss the following pointers related to MVC TempData.
1. Why do we need TempData in the ASP.NET Core MVC Application?
2. What exactly is TempData in ASP.NET Core MVC?
3. How to use TempData?
4. How do you Pass and Retrieve data from TempData?
5. How do you retain TempData values in the Consecutive Request in
ASP.NET Core MVC?
6. How do you Store a Complex Object in TempData in ASP.NET Core
MVC?
7. What are the advantages and disadvantages of TempData in ASP.NET
Core MVC?
8. When should you use TempData in ASP.NET Core MVC?
Why do we need TempData in the ASP.NET Core MVC Application?
The limitation of both ViewData and ViewBag is they are limited to one HTTP request only.
So, if redirection occurs, their values become null, meaning they will lose the data they hold.
In many real-time applications, we may need to pass the data from one HTTP Request to
the next subsequent HTTP Request. For example, we may need to pass the data from one
controller to another, from one action method to another action method within the same
controller, or to a different controller. Then, in such situations like this, we need to use
TempData in the ASP.NET Core MVC Application.
What is TempData in ASP.NET Core MVC?
TempData in ASP.NET Core MVC Application is one of the mechanisms for passing a small
amount of temporary data from a controller action method to a view and from a controller
action method to another action method within the same controller or to a different
controller. It is useful when passing data from one controller action to another, especially in
scenarios like redirecting after form submissions.
The TempData value will become null by default once the subsequent request is completed.
But you can also change this default behavior, and we will explain how to do this. Now, if
you look at the definition of the Controller class, you will find the following signature of the
TempData property.
 81

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:17 / 03:1110 Sec

As you can see in the above image, the data type of the TempData is ITempDataDictionary.
Let us see the definition of the ITempDataDictionary class.

As you can see, the ITempDataDictionary class implements the IDictionary interface. So,
we can say that TempData in ASP.NET Core MVC is a dictionary object. As a dictionary
object, it stores data in the form of key-value pairs, where each key must be a string. The
value we pass to the dictionary will be stored as an object type. Here, you can also see that
to manage the TempData value in ASP.NET Core MVC, it provides 5 methods. The use of
these methods is as follows:
Load:
The framework uses the Load method internally to load TempData from the underlying
TempData provider when an HTTP request begins. You typically won’t need to use this
method directly in your applications. It’s more of a system-level function that ensures
TempData is available for your actions during an HTTP request.
Save:
Similar to Load, the Save method is also used internally by ASP.NET Core. It saves the
current state of TempData back to the underlying TempData provider at the end of an HTTP
request. This method maintains TempData across redirects because it ensures that any
changes you’ve made during the request are persisted correctly.
Keep:
The Keep method marks all items in TempData to be retained for the next request. This
method is useful when you want to ensure that TempData is not removed at the end of the
current request, allowing it to be available for another subsequent request.
Keep(string key):
 82

This overloaded version of the Keep method works like the general Keep method but allows
you to specify a single key to retain in TempData. Only the TempData entry with this
specified key will be preserved for the next request, while others will be discarded (unless
they, too, are explicitly kept). This method is useful when you need to retain specific
information.
Peek(string key)
The Peek method retrieves the value associated with the specified key without marking it for
deletion when TempData is read. This is useful when you need to read a TempData value
to display on a page but also need it to persist for another subsequent request. Unlike
reading TempData using the String Indexer, which marks the item for deletion, Peek allows
the data to be read and still remain in TempData for further requests.
How do you Pass and Retrieve data from TempData in ASP.NET Core
MVC?
The most important point you need to remember is that it stores the data as an object, so
while retrieving the data from TempData, type casting is required. If you are accessing
string values from TempData, typecast is not required. However, it is mandatory to typecast
explicitly to the actual type if you are accessing data other than the string type from the
TempData.
Example to Understand TempData in ASP.NET Core MVC Application
We will use the same application we worked on in our previous article. Modify the
HomeController to use TempData, as shown below. As you can see, we have created three
action methods here. In the Index action method, we have set the Name and Age values
using TempData, and in the other two action methods, we are not doing anything.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
TempData["Name"] = "Pranaya";
TempData["Age"] = 30;
return View();
}
public ActionResult Privacy()
{
return View();
}
public ActionResult About()
{
 83

return View();
}
}
}
Next, modify the Index, Privacy and add the About Views within the Home Folder, which is
inside the Views folder as follows:
Index.cshtml
@{
ViewData["Title"] = "Index Page";
}
<div class="text-left">
<b>Name:</b> @TempData["Name"]
<br />
<b>Age:</b> @TempData["Age"]
</div>
Privacy.cshtml
@{
ViewData["Title"] = "Privacy Policy";
}
<div class="text-left">
<b>Name:</b> @TempData["Name"]
<br />
<b>Age:</b> @TempData["Age"]
</div>
About.cshtml
@{
ViewData["Title"] = "About Page";
}
<div class="text-left">
<b>Name:</b> @TempData["Name"]
<br />
<b>Age:</b> @TempData["Age"]
</div>
 84

The implementation of all three methods is the same. From each view, we access the
TempData values using the String Indexer, i.e., using the string key name. Now, run the
application and visit the Index Page, and you will get the data as expected, as shown in the
image below.

Now, if you visit Privacy and About, you will not get the data as expected, as shown in the
image below.
 85

Why are we not getting the TempData value in the next subsequent
Request?
The reason is that once we read the value from TempData using the String Indexer, it will
mark the item for deletion from the TempData dictionary collection. And this is the default
behavior of TempData. In our example, we are reading the TempData within the Index
View. Hence, after reading the Age and Name keys from TempData, these two keys will be
deleted from the TempData dictionary collection.
How Do We Retain the TempData value in the next Sub Sequent Request
in ASP.NET Core MVC?
We can retain the TempData values for the next subsequent request in many ways. Let us
discuss them one by one.
Method 1: Don’t Fetch the Data from TempData
Suppose we don’t fetch the data from the TempData either from the Index Action Method or
the Index View. In that case, the TempData will be preserved in the TempData dictionary
collection and can be accessed from the next subsequent request. To do so, let us modify
the Index.cshtml view as follows. As you can see, we are only fetching the Age key from
 86

TempData, not the Name key, which means the Name key will be preserved in the
TempData dictionary collection for the next request.
@{
ViewData["Title"] = "Index Page";
}
<div class="text-left">
<b>Name:</b>
<br />
<b>Age:</b> @TempData["Age"]
</div>
Now, run the application, visit the Index page, and then visit either the Privacy or About
Page, as shown in the image below. You can see that the age value is on the index page,
and the name value is on the privacy page.

Now, if you visit the About page, you will not see the data shown in the image below.

Method 2: Use the Keep Method to Preserve the Data in TempData

If we want to preserve the TempData for the next request, we can use the
TempData Keep or Keep(string) Method. In this case, no matter whether you access the
data or not from the TempData, it will preserve the TempData value for the next request.
 87

The Keep() method will Mark all keys in the dictionary for retention. On the other hand,
the Keep(string key) method marks the specified key in the dictionary for retention.
To better understand, please modify the Home Controller as follows. Here, you can see
inside the Index Action method we call the Keep method.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
TempData["Name"] = "Pranaya";
TempData["Age"] = 30;
//Retention of All keys of TempData for the next request
//TempData.Keep();
//Retention of Individual keys of TempData for the next request
TempData.Keep("Name");
TempData.Keep("Age");
return View();
}
public ActionResult Privacy()
{
return View();
}
public ActionResult About()
{
return View();
}
}
}
Next, modify the Index.cshtml view as follows. As you can see, we are fetching both keys
from the TempData Dictionary Collection.
@{
ViewData["Title"] = "Index Page";
}
 88

<div class="text-left">
<b>Name:</b> @TempData["Name"]
<br />
<b>Age:</b> @TempData["Age"]
</div>
Now, run the application, visit the Index page, and then visit either the Privacy or About
Page, as shown in the image below. Both the Index Page and Privacy Page show the Name
and Age values.

If you visit the About page, you will not see the data shown in the image below.

How Do We Preserve the TempData for the About Page?

In that case, we need to call the Keep method inside the Privacy Action method. So, modify
the Home Controller as follows:
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
 89

{
TempData["Name"] = "Pranaya";
TempData["Age"] = 30;
//Retention of All keys of TempData for the next request
//TempData.Keep();
//Retention of Individual keys of TempData for the next request
TempData.Keep("Name");
TempData.Keep("Age");
return View();
}
public ActionResult Privacy()
{
//Retention of Individual keys of TempData for the next request
TempData.Keep("Name");
TempData.Keep("Age");
return View();
}
public ActionResult About()
{
//Retention of Individual keys of TempData for the next request
//TempData.Keep("Name");
//TempData.Keep("Age");
return View();
}
}
}
Method 3: Using TempData Peek Method
If we read the data using the string Indexer, the key will be deleted from the TempData
Dictionary Collection by default once we read the value. So, instead of reading the values
using the string Indexer, we can also read the data from TempData using the Peek method.
To do this, we need to pass the key name to the Keep method. In this case, it will read the
data but will preserve the key for the next subsequent request.
To Understand this concept, please modify the Home Controller class as follows. Inside the
Index Action method, we store the data in TempData and redirect the request to the Privacy
Action Method. As the Index View is not executed, we are not fetching the data from the
TempData. So, these TempData keys are available for the next request, which is, in this
 90

case, the Privacy Action method. We are fetching the data from the Privacy action method
using the Peek method, which will return the data and keep the keys alive for the next
request. And inside the About Page, we can access the value.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
TempData["Name"] = "Pranaya";
TempData["Age"] = 30;
//We are redirecting the request to Privacy Action Method from here
//In this case, Index View is not going to be executed
//Means we are not reading the TempData keys and hence they available
//in the Privacy Action method
//return RedirectToAction("Privacy", "Home");
return RedirectToAction("Privacy");
}
public ActionResult Privacy()
{
//Retention of Individual keys of TempData for the next request
if(TempData.ContainsKey("Name"))
{
//Peek Method will read the data and preserve the key for next request
ViewData["Name"] = TempData.Peek("Name");
}
if (TempData.ContainsKey("Age"))
{
//Peek Method will read the data and preserve the key for next request
ViewData["Age"] = TempData.Peek("Age");
}
return View();
}
 91

public ActionResult About()

{
return View();
}
}
}
Modifying Privacy.cshtml view:
Inside the Privacy.cshtml View, we need to use ViewData instead of Tempdata as follows:
@{
ViewData["Title"] = "Privacy Policy";
}
<div class="text-left">
<b>Name:</b> @ViewData["Name"]
<br />
<b>Age:</b> @ViewData["Age"]
</div>
With the above changes, run the application and see if everything works as expected. So,
when you run the application, the Index action method will be redirected to the Privacy
Action method. Then, if you visit the About action method, you will also get the data as
expected, as shown in the image below.

How Do We Store a Complex Object in TempData in ASP.NET Core

MVC?
To retain a complex object in TempData in ASP.NET Core MVC, you need to serialize the
object to a string format, typically JSON, and then deserialize it back when retrieving it.
Serialize the Object to JSON
Before storing the complex object in TempData, you must convert it to a JSON string. This
is because TempData can only store primitive types by default. You can use
System.Text.Json.JsonSerializer or Newtonsoft.Json (aka JSON.NET) for serialization. The
following is the syntax.
var myObject = new MyComplexObject();
 92

string json = JsonSerializer.Serialize(myObject);

TempData["MyObject"] = json;
Retrieve and Deserialize the Object
When retrieving the object, get the JSON string from TempData and deserialize it to the
original object type. The following is the syntax.
if (TempData["MyObject"] is string json)
{
var myObject = JsonSerializer.Deserialize<MyComplexObject>(json);
// Use myObject as needed
}
Handling TempData Persistence
If you need the data to persist for another request, you must read it and keep it again. The
syntax is as follows.
string json = TempData["MyObject"] as string;
TempData.Keep("MyObject"); // This line keeps the data for another request
Creating the Model:
First, create the following Student class within the Models folder.
namespace FirstCoreMVCWebApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Modifying the Home Controller:
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
namespace FirstCoreMVCWebApplication.Controllers
{
 93

public class HomeController : Controller

{
public ActionResult Index()
{
//Create the Complex Object
var student = new Student()
{
StudentId = 1,
Name = "Pranaya",
Gender = "Male",
Branch = "CSE",
Section = "A"
};
//Convert the Complex Object to Json
string jsonStudent = JsonSerializer.Serialize(student);
//Store the JSON Objec into the TempData
TempData["StudentObject"] = jsonStudent;
//return RedirectToAction("Privacy", "Home");
return RedirectToAction("Privacy");
}
public JsonResult Privacy()
{
Student? student = new Student();
if (TempData["StudentObject"] is string jsonStudent)
{
//Deserialize the Json Object to Actual Student Object
student = JsonSerializer.Deserialize<Student>(jsonStudent);
//You can use the Student
// The following line keeps the data for another request
TempData.Keep("StudentObject");
}
return Json(student);
}
 94

public JsonResult About()

{
Student? std = new Student();
if (TempData["StudentObject"] is string jsonStudent)
{
//Deserialize the Json Object to Actual Student Object
std = JsonSerializer.Deserialize<Student>(jsonStudent);
}
return Json(std);
}
}
}
Now, run the application and test it, and it should work as expected.
How TempData Works in ASP.NET Core MVC?
TempData is stored in short-lived session cookies and is cleared out after it has been read
in a subsequent request. This makes it ideal for passing error messages, status messages,
or other one-time-use data between actions. ASP.NET Core provides several storage
providers for TempData:
 SessionStateTempDataProvider: This is the default provider. It stores
TempData using the session state. To use session-based TempData, you
must enable the session state in your application.
 CookieTempDataProvider: This provider stores TempData in cookies. It’s
useful when you want to avoid using server memory for session state.
However, be aware of the size limitations of cookies.
Post-Redirect-Get (PRG) Pattern Example in ASP.NET
Core
In this article, I will discuss the Post-Redirect-Get (PRG) Pattern Example in the
ASP.NET Core MVC Application with Examples using TempData. Please read our previous
article discussing TempData in ASP.NET Core MVC Application.
What is the Post-Redirect-Get (PRG) Pattern?
The Post-Redirect-Get (PRG) pattern is a web development design pattern that helps
prevent duplicate form submissions and ensures a more user-friendly web application
experience. It’s especially relevant when a user submits form data to a server via an HTTP
POST request.
Basic Workflow of PRG Pattern:
 POST Request: The user submits a web form; this sends an HTTP POST
request to the server.
 Server Processing: The server processes the POST request, typically
involving data manipulation like updating a database.
 95

 Redirection: After processing the POST request, the server sends an HTTP
redirect (HTTP status code 302 or 303) to the client instead of a response
directly.
 GET Request: Upon receiving the redirect response, the client makes an
HTTP GET request to the specified URL.
 Final Response: The server responds to the GET request with the final
page, which could be a confirmation, result page, or another view.
Post-Redirect-Get (PRG) Pattern using TempData in ASP.NET Core MVC
The Post-Redirect-Get (PRG) pattern is a web development design pattern that helps
prevent duplicate form submissions and ensures that the web page behaves correctly when
the user refreshes it. In ASP.NET Core MVC, the PRG pattern can be implemented using
TempData, which is a way to pass data between controllers and views.
Create a Model
First, you need a model to bind your form data. So, create the following MyModel.cs class
within your Models folder:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:06 / 03:1110 Sec

namespace FirstCoreMVCWebApplication.Models
{
public class MyModel
{
public string Name { get; set; }
public string Email { get; set; }
// Add other properties as needed
}
}
Create a Controller
In your controller, create two actions – one for displaying the form (HTTP GET) and another
for processing the form (HTTP POST). So, modify the Home Controller as follows:
using FirstCoreMVCWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCWebApplication.Controllers
{
public class HomeController : Controller
{
// GET: Display the form
public IActionResult Index()
{
 96

return View();
}
// POST: Process the form
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult SubmitForm(MyModel model)
{
if (ModelState.IsValid)
{
// Process your model here (e.g., save to database)
// Store a message in TempData
TempData["SuccessMessage"] = "Form submitted successfully!";
// Redirect to a GET method
return RedirectToAction(nameof(Success));
}
// If model state is invalid, show the form again
return View("Index", model);
}
// GET: Success page
public IActionResult Success()
{
return View();
}
}
}
Create the Views
You’ll need a view for the form and another for the confirmation.
Index.cshtml (Form View):
Create a view with the name Index.cshtml within the Views/Home folder, and then copy
and paste the following code:
@model FirstCoreMVCWebApplication.Models.MyModel
<form asp-action="SubmitForm" asp-controller="Home" method="Post">
<div asp-validation-summary="ModelOnly"></div>
<div>
 97

<label asp-for="Name"></label>
<input asp-for="Name" />
<span asp-validation-for="Name"></span>
</div>
<div>
<label asp-for="Email"></label>
<input asp-for="Email" />
<span asp-validation-for="Email"></span>
</div>
<button type="submit">Submit</button>
</form>
Success.cshtml (Success View)
Display the success message. Create a view with the name Success.cshtml within
the Views/Home folder, and then copy and paste the following code:
@{
var message = TempData["SuccessMessage"] as string;
}
@if (!string.IsNullOrEmpty(message))
{
<div>@message</div>
}
<a asp-action="Index">Back to Form</a>
Explanation
 Index Action: Displays the form to the user.
 SubmitForm Action: Process the form submission. If the model is valid, it
processes the data (like saving to a database) and then uses TempData to
store a success message before redirecting to the Success action.
 Success Action: Displays a success message to the user. The message is
retrieved from TempData.
Using the PRG pattern, if the user refreshes the success page, it doesn’t resubmit the form
data. Instead, it simply refreshes the view of the success message. TempData is ideal for
this scenario as it keeps data for the duration of a single redirect and is then automatically
discarded.
Now, run the application, and it should display the following page where you need to enter
the Name and Email and click on the Submit button as shown in the image below:
 98

Once you click on the Submit button, it will open the following page and display the
successful message as shown in the below image:

If you verify the Network tab, it will show the following: It will issue a 303 request and then
redirect to the Success page with a 200 status code.

If you refresh the page, you will see that it has not been submitted again.
Advantages of PRG:
 99

 Avoids Duplicate Submissions: Refreshing the browser after a POST

request typically resends the form data, potentially causing duplicate
submissions (like double orders in e-commerce). With PRG, a refresh after
the final step results in a repeat of the GET request, not the form submission.
 Cleaner URLs: After the process is complete, the URL in the browser reflects
the GET request, not the original POST, which is generally cleaner and more
user-friendly.
 Bookmarking and Sharing: The final GET request URL can be bookmarked
or shared, which isn’t advisable for a URL resulting from a POST request.
 Improved User Experience: It provides a smoother user experience,
reducing confusion caused by browser warnings about form resubmissions
when the page is refreshed.

Routing in ASP.NET Core MVC Application

What is Routing in ASP.NET Core MVC?
Routing in the ASP.NET Core MVC is a mechanism that inspects the incoming HTTP
requests (i.e., URLs) and then maps that HTTP request to the Controller Action Method. It
allows developers to design how URLs map to specific controllers and their actions.
The mapping is done by the routing rules defined for the application. We can do this by
adding the Routing Middleware to the Request Processing Pipeline. We can configure
multiple routes for our application, and for each route, we can also set some specific
configurations such as default values, constraints, etc. If this is not clear at the moment,
don’t worry. We will discuss everything in detail with examples.
How Does Routing Work in ASP.NET Core?
In simple words, Routing is a pattern-matching system that monitors an incoming HTTP
request and decides what to do with that incoming HTTP request. For a better
understanding, please have a look at the following diagram.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:23 / 03:1110 Sec

When the client makes a request, i.e., an HTTP Request, the routing engine first receives it.
Once the Routing engine receives an HTTP Request, the Routing system tries to find the
matching route pattern of the requested URL with already registered routes. Routes contain
information about the Controller name, action method name, method type (Get, Post, Put,
Patch, Delete), method parameters, route data, etc.
 100

If it finds a matching URL pattern for the incoming request, it forwards the request to the
appropriate controller and action method. If no match for the incoming HTTP request URL
Pattern is found, it returns a 404 HTTP status code to the client. For a better understanding,
please have a look at the following diagram.

What are the Different Types of Routing Supported by ASP.NET Core

MVC?
We can configure routes in the ASP.NET Core MVC Web Application in two ways. They are
as follows:
1. Convention-Based Routing
2. Attribute-Based Routing.
What is Conventional Based Routing in ASP.NET Core MVC Web
Application?
This is the traditional routing mechanism in which routes are defined in the startup code
(usually in the Program.cs file). Routes are typically defined using a template string that
specifies URL patterns and placeholders for controller and action names. You can set up
multiple routes, define defaults, or apply constraints to control how URLs match to actions.
The syntax to define Conventional Routing in ASP.NET Core MVC is given below:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
Here, you can see we are defining a route
pattern {controller=Home}/{action=Index}/{id?} would match a URL
like /Products/Details/5 and map it to the Details action on the Products controller with 5 as
an action parameter. If this is not clear, don’t worry; we will see these things practically.
 101

What is Attribute-Based Routing in ASP.NET Core MVC Application?

Attribute Routing is introduced to provide more control over the URIs in your ASP.NET Core
Web application. With Attribute Routing, you can now define routes directly on actions and
controllers by decorating them with attributes like [Route], [HttpGet], [HttpPost], etc. This
type of routing makes it easier to understand the routes by looking directly at the controllers
and actions. For example, using [Route(“Products/Details/{id}”)] on an action method
would map the specific URL /Products/Details/5 to that action.
In this article, we will discuss Conventional Based Routing in Details, and in our
upcoming articles, we will discuss Attribute-Based Routing in ASP.NET Core MVC
Applications.
Understanding Conventional-Based Routing in ASP.NET Core MVC:
Conventional Routing in ASP.NET Core MVC is a method of defining URL patterns that an
application responds to in a structured, predictable manner. It is often used for applications
with a clear and hierarchical URL structure. Conventional routing enables developers to
define routing rules in a centralized location, typically within the Program.cs file, which
makes managing and understanding the URL structure easier, especially for large
applications.
In the ASP.NET Core MVC Web Application, the controller action method handles incoming
HTTP Requests, i.e., URLs. For example, if we issue a request to the /Home/Index URL,
then the Index action method of the Home Controller class will handle the request, as
shown in the image below.

Similarly, if we issue a request to the /Home/Details/2 URL, then the Details action method
of the Home Controller class will handle the request, as shown in the image below. Here,
the parameter value 2 is automatically mapped to the id parameter of the Details action
method.
 102

Now, the question that should come to your mind is, we have not explicitly defined any
routing rules for the application. Then how is this mapping done, i.e., how is
the /Home/Index URL mapped to the Index action method, and how is
the /Home/Details/2 URL mapped to the Details action method of the Home Controller
class? This is done by the MVC Routing Middleware Component, which we registered
into the Request Processing Pipeline application.
Understanding Routing in ASP.NET Core MVC Application:
First, create an ASP.NET Core Application using the ASP.NET Core Model-View-Controller
Template. To create an ASP.NET Core Web Application with the Model-View-Controller
Project template. First, open Visual Studio 2022 and click the Create a new project tab, as
shown in the image below.

Once you click on the Create a new Project tab, the following Create a new Project
window will open. From this window, select C#, All Platforms, and Web from the respective
dropdowns, as highlighted below. Select ASP.NET Core Web App (Model-View-
Controller), as highlighted below, and click the Next button, as shown in the image below.
 103

Once you click on the Next button, it will open the Configure Your New Project window.
Here, you need to provide the necessary information to create a new ASP.NET Core
project. First, give an appropriate name for your project (RoutingInASPDotNetCoreMVC),
set the location where you want to create this project, and the solution name for the
ASP.NET Core Web application. And finally, click on the Create button, as shown in the
image below.

The Additional Information window will open once you click on the Next button. Here, you
need to select Framework – .NET 6.0 (Long-term support), Authentication type – None.
You also need to check the Configure for HTTPS and do not use top-level statements
check boxes. Finally, click the Create button, as shown in the image below.
 104

Once you click the Create button, the project will be created using the Model-View-
Controller template with the following folder and file structure.
 105

Understanding the Default Route in ASP.NET Core MVC Web

Application:
As we created the project with a Model-View-Controller template, the required MVC
Services and MVC Middleware components are, by default, added to the Request
Processing Pipeline. So, if you open the Program class, you will find the following code.
namespace RoutingInASPDotNetCoreMVC
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
 106

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
}
}
}
As you can see in the above code, MVC services are added by the following statement.
builder.Services.AddControllersWithViews();
Routing Middleware Components are added using
the UseRouting and MapControllerRoute methods. If you notice the MapControllerRoute,
you will see the following.
 107

The default route is created with the following URL Pattern. So, if we don’t specify anything
in the URL, then by default, the Index action method of the Home Controller class will
handle the request.
{controller=Home}/{action=Index}/{id?}
In this example, the MapControllerRoute method defines a default route. The pattern
parameter specifies the route template, where {controller}, {action}, and {id} are
placeholders for route parameters. The name parameter gives the route a name, which can
be used for generating URLs. The meaning of the placeholders are as follows:
 {controller}: Represents the name of the controller class.
 {action}: Represents the action method name within the controller.
 {id?}: Represents an optional route parameter called “id”.
With this configuration, an incoming URL like /Home/Index would match the Index action
method of the HomeController. Similarly, /Products/Details/5 would match the Details
action method of the ProductsController with an id parameter set to 5.
Understanding Route Template in ASP.NET Core MVC Application:
As we see, the default route is created with the URL
Pattern: {controller=Home}/{action=Index}/{id?}
So, the above default route template will map most URLs using the
pattern: http://localhost:52190/Home/Details/2
1. The first segment path of the URL, /Home, is mapped to the HomeController.
As you can see in the URL, we do not have the word Controller with the first
segment path. However, it maps to the HomeController because when
ASP.NET Core MVC Framework finds the word /Home as the first segment
path of the URL, it internally appends the word Controller.
2. The second segment path of the URL, i.e., /Details, is mapped to
the Details(int id) action method of the HomeController class.
3. The third segment path of the URL, i.e., 2, is mapped to the id parameter of
the Details(int id) action method.
As you can see in the default route template {controller=Home}/{action=Index}/{id?}, we
have a question mark at the end of the id parameter, which makes the id parameter
optional. That means the following two requests now map to the same Details action
method of the Home Controller class.
 108

/Home/Details/1
/Home/Details
In the default route template {controller=Home}/{action=Index}/{id?}, the
value Home in {controller=Home} is the default value for the Controller. Similarly, the
value Index in {action=Index} is the default value for the action method. That means if we
navigate to the application’s root URL, as shown below, then that request will be handled by
default by the Index action method of the Home Controller class.
http://localhost:52190/
The following two URLs are also mapped to the Index action method of the HomeController
class.
http://localhost:52190/Home
http://localhost:52190/Home/Index
The default route works fine for most of the ASP.NET Core MVC Web Applications. For
example, create a Controller named StudentController and copy and paste the following
code into it.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
public string Index()
{
return "Index() Action Method of StudentController";
}
public string Details(int? id)
{
return $"Details({id}) Action Method of StudentController";
}
}
}
Now, the URL /student/index is mapped to the Index() action method of
the StudentController class, and the URL /student/details or /student/details/5 both are
mapped to the Details(int? id) action method of the StudentController.
Configure Multiple Conventional Routing in ASP.NET Core MVC
Application
Configuring Multiple Conventional Routes in an ASP.NET Core MVC application involves
defining multiple route patterns that the application can use to handle incoming requests
and map them to the appropriate controllers and actions. This is done in
the Program.cs class file of your ASP.NET Core project. For example, we want to access
the Index Action Method of the Student Controller using the following URL.
https://localhost:44359/Student/All
 109

To achieve this, we can configure the MapControllerRoute method, as shown in the image
below. Here, you can see we have specified the pattern as Student/All and the default
controller and action name as controller = Student, action = Index.

Next, we want to access the Details of the action method for the Student Controller using
the following URL.
https://localhost:44359/StudentDetails/10
To achieve this, we can configure another MapControllerRoute method, as shown in the
below image. Here, you can see we have specified the pattern as StudentDetails/{ID} and
specified the default controller and action name as controller = Student”, action =
Details.

For the rest of the controllers and actions, we need to access them using the following URL
Pattern. We also need to configure the default controller and action names as Home and
Index.
https://localhost:44359/{Controller Name}/{Action method Name}
To achieve this, we can configure another MapControllerRoute method, as shown in the
below image. Here, you can see we have specified the pattern
as {controller}/{action}/{id:int?} and specified the default controller and action name
as controller = Home, action = Index.

The complete code of the Program class is given below.

 110

namespace RoutingInASPDotNetCoreMVC
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
//https://localhost:44359/Student/All
app.MapControllerRoute(
name: "StudentAll",
pattern: "Student/All",
defaults: new { controller = "Student", action = "Index" }
);
//https://localhost:44359/StudentDetails/10
app.MapControllerRoute(
name: "StudentIndex",
pattern: "StudentDetails/{ID}",
defaults: new { controller = "Student", action = "Details" }
 111

);
//For Rest of the Controller Actions including the Default Home Controller Index
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action}/{id:int?}",
defaults: new { controller = "Home", action = "Index" }
);
app.Run();
}
}
}
With the above changes in place, run the application and navigate to the specific URLs, and
you will get the data as expected.
Points to Remember While Defining Multiple Conventional Routing
 Route Order Matters: Routes are evaluated in the order they are defined.
Ensure the most specific routes are defined first, as the request will be
handled by the first route it matches.
 Naming Routes: It’s a good practice to give each route a unique name. This
helps when generating URLs based on route names.
 Defaults: You can specify controller, action, and parameter default values.
This is useful for defining fallbacks for missing parts of the route.

Custom Routing in ASP.NET Core MVC Application

Custom Routing in ASP.NET Core MVC Application
Custom Routing in ASP.NET Core MVC allows us to define our own routing patterns for our
web application, giving us more control over how URLs are mapped to controller actions.
This can be useful when creating SEO-friendly URLs, handling specific routing scenarios, or
creating a more organized and structured URL hierarchy.
Custom Routing Without Default Values in ASP.NET Core MVC
Application:
ASP.NET Core MVC allows configuring routing without default values for route parameters
(controller, action, and route data). This allows us to create routes that depend only on the
URL values without predetermined or default values. If a route parameter is absent from the
URL, it will be treated as missing.
Suppose you want to define your own custom route without default values. In that case, you
need to modify the MapControllerRoute middleware component within the Main method of
the Program class, as shown in the below image. As you can see, we have removed the
default values as well as the Optional Parameter from the Pattern (pattern:
“{controller}/{action}”)). You can give any name to your route, and here I am providing the
Route name as CustomRoute (name: “CustomRoute”).
 112

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:14 / 03:1110 Sec

With the above Custom Routing in Place, when we run the application, it will not access the
Home Controller Index Action method by default. That means it will not access any
controller action method by default. The above MapControllerRoute is the simplest possible
convention-based route for an ASP.NET Core MVC Web Application. Now run the
application and navigate to the following URLs, and you will see the output as expected.
You need to change the port number.
https://localhost:44359/Student/Details
https://localhost:44359/Student/Index
This is working fine. However, what if we wanted to have more specific routes? Say
something like the following URLs:
https://localhost:44359/Student/Details/20
https://localhost:44359/Student/Index/10
If you want your controller action methods to match the above URLs, you need to use a
Route Constraints feature in the ASP.NET Core MVC Application.
Route Constraints in ASP.NET Core MVC Web Application:
Route constraints in ASP.NET Core MVC are important in controlling the flow of HTTP
requests to route handlers based on specific conditions. Constraints allow you to restrict the
values that are accepted by route parameters, ensuring that the route is only matched for
valid inputs. These constraints ensure that a route will only match and subsequently invoke
an action method if the incoming request meets all specified criteria.
Route constraints are defined within the route template, either inline within the route
definition or as part of the route configuration. Constraints can check for various conditions,
including data types, value ranges, pattern matching, and custom validation logic.
Implementing Route Constraints in ASP.NET Core MVC:
Route constraints are used in both attribute-based and conventional-based routing to
ensure that the values provided in the URL match the expected data types or formats. Let’s
say we want to create a route matching the following URLs.
https://localhost:44359/Student/Details/20
https://localhost:44359/Student/Index/10
 113

We can achieve this in two ways: Attribute Routing and Conventional Routing. In our
upcoming articles, we will discuss how to achieve the same using Attribute Routing. In this
article, let us see how we can achieve the same using Conventional Routing in ASP.NET
Core MVC Web Applications.
To achieve the above URL Patterns, we need to modify
the MapControllerRoute Middleware Component as follows. As you can see, as part of the
pattern, we specify the id parameter (pattern: “{controller}/{action}/{id}”). Here, the id
parameter is not optional; it is mandatory, and while accessing any action method, it is
mandatory to pass the Id parameter value.

As we make the action method mandatory for taking the ID parameter value, we need to
change the action methods of our controller with the ID parameter. So, modify the
StudentController class as shown below.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
public string Index(string id)
{
return $"Index({id}) Action Method of StudentController";
}
public string Details(string id)
{
return $"Details({id}) Action Method of StudentController";
}
}
}
 114

With the above changes in place, now run the application and navigate to the following
URLs, and you will see that methods are executed as expected.
https://localhost:44359/Student/Details/20
https://localhost:44359/Student/Index/10
This is working fine. But, the problem with the above route is that it can accept any value.
Instead of an integer, if you pass a string value, it also accepts and executes the action
methods, as shown below.
https://localhost:44359/Student/Details/ABC
https://localhost:44359/Student/Index/ABC
If you want to restrict the id parameter value to be an integer only, then you need to use a
concept called Route Constraint in ASP.NET Core. So, what we need to do is, while
defining the Route, we can explicitly tell that this parameter is going to accept only integer,
boolean, or any particular data type value.
In our example, we want to restrict the id parameter to accept only integer values. So, we
need to modify the MapControllerRoute Middleware Component as follows. As you can
see, as part of the pattern, we specify the id parameter to accept int values only (pattern:
“{controller}/{action}/{id:int}”). This is called inline Route Constraint. Inline constraints
are specified directly within the route template by appending a colon (:) followed by the
constraint name to a route parameter.

Note: The {id:int} in the pattern of MapControllerRoute Middleware Component specifies

that whatever is in this part of the URL must be an integer. Otherwise, the URL does not
map to this route.
With the above changes in place, now run the application and navigate to the following
URLs, and you will see a 404 error. This is because we are passing the Id parameter value
as ABC here.
https://localhost:44359/Student/Details/ABC
https://localhost:44359/Student/Index/ABC
Now, pass the id parameter value as an integer, and you should get the output as expected.
Types of Route Constraints
You can use many route constraints. Some of them are as follows.
 int: Matches any integer.
 bool: Matches a Boolean value.
 115

 datetime: Matches a valid DateTime value.

 decimal: Matches a decimal number.
 double: Matches a double number.
 guid: Matches a Guid value.
 long: Matches a long number.
 min(value): Matches an integer greater than or equal to the specified
minimum value.
 max(value): Matches an integer less than or equal to the specified maximum
value.
 range(min, max): Matches an integer within a specified range.
 alpha: Matches one or more alphabetical characters.
 regex(expression): Matches input based on the specified regular
expression.
 length(min,max): Restricts the length of the parameter value.
How Do We Make Route Parameters Optional in the ASP.NET Core MVC
Application?
In ASP.NET Core MVC, you can make route parameters optional by specifying default
values for those parameters. This approach allows you to define routes matching URLs with
or without specific route parameter values. Before understanding How to Make the Route
Parameter an Optional Parameter, let us first change the StudentController class as shown
below.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
public string Index()
{
return $"Index() Action Method of StudentController";
}
public string Details(string id)
{
return $"Details({id}) Action Method of StudentController";
}
}
}
As you can see in the above code, the Index action method does not take any parameter,
while the Details action method takes one parameter. We need to invoke the Index action
method without a parameter as follows.
https://localhost:44359/Student/Index
 116

On the other hand, we need to make the id parameter of the Details action method optional.
It means the Details action method should be invoked using the following two URLs.
https://localhost:44359/Student/Details
https://localhost:44359/Student/Details/10
In order to achieve this, we need to use optional parameters in our convention-based
routing by adding a question mark “?” to the optional route parameter constraint. In our
example, we want to mark the id parameter as an optional parameter and accept only
integer values. So, in the URL pattern, we need to specify the id parameter as “id:int?“.
We need to modify the MapControllerRoute Middleware Component as follows.

Here, “id:int?” says that id is an optional parameter, but if you pass any value, it should be
of type integer. You can define only one optional parameter per route, which must be the
last parameter. With the above changes in place, now run the application and navigate to
the following URLs, and you will get the data as expected.
https://localhost:44359/Student/Index
https://localhost:44359/Student/Details
https://localhost:44359/Student/Details/10
How Do We Provide Default Route Values in the ASP.NET Core MVC
application?
Default Route values are useful when you have optional route parameters. As of now, you
can observe that whenever we run the application, by default, it loads the base URL
(https://localhost:44359/) of the application and gives us a 404 error. This is because we
have not set any default values for our Route parameter. If we have not specified the name
of the controller or action method in the URL, what should the controller and action method
execute?
Let us proceed and understand how we can specify the default values for our Route
Parameter so that if we do not specify the Controller or Action method name in the URL or
when the application launches, it should take the default values from the Route and execute
the action method.
So, using Default values, we can specify what happens if parts of the route are not provided
in the URL. For example, when we navigate to the following two URLs
https://localhost:44359/
https://localhost:44359/Home
We want to map the above two URLs to the Home Controller and Index action method of
the Application. To do so, we need to specify the default controller and action method name
 117

in the MapControllerRoute Middleware Component URL Pattern. So, modify

the MapControllerRoute Middleware Component within the Main method of the Program
class as follows. Here, we have specified the default controller name as Home, the default
action method name as Index, and Id as the Route parameter, which is optional as well as
that parameter can accept only integer values (pattern:
“{controller=Home}/{action=Index}/{id:int?}“).

With the above changes in place, now run the application and visit the following two URLs,
and you should get the output as expected.
https://localhost:44359/
https://localhost:44359/Home
You can also map the default values for the route parameter by using the defaults
parameter of the MapControllerRoute Extension method, as shown in the image below.

The following is the complete Program.cs class file code.

namespace RoutingInASPDotNetCoreMVC
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
 118

builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "CustomRoute",
pattern: "{controller}/{action}/{id:int?}",
defaults: new { controller = "Home", action = "Index" }
);
app.Run();
}
}
}
With the above changes in place, run the application, and it should work as expected.

Custom Route Constraint in ASP.NET Core MVC

How to Create Custom Route Constraints in ASP.NET
Core MVC
In this article, I will discuss How to Create Custom Route Constraints in ASP.NET Core
MVC Web Applications with Examples. Please read our previous article
discussing Custom Routing in the ASP.NET Core MVC Web Application. We will work
with the same example we created in our previous article.
Custom Route Constraints in ASP.NET Core MVC Web Application:
 119

Custom Route Constraints in ASP.NET Core MVC allow us to enforce specific rules on the
routes at the routing level, which can help to ensure that URLs match expected formats,
values, and conditions. These constraints can be used to validate parameters in the URL
before the request even reaches the controller action.
Custom route constraints allow us to implement complex route validation logic (such as
being an integer, having a specific range of values, or matching a regular expression) for
the route parameters that cannot be expressed with standard constraints like int, guid,
minlength, etc.
How do you Create a Custom Route Constraint in ASP.NET Core?
To create a Custom Route Constraint in ASP.NET Core MVC, we must create a class that
implements the IRouteConstraint interface. This interface has a single method
called Match, and we need to implement this Match method to define our custom constraint
logic. This method contains the logic to check whether a particular URL parameter meets a
specific requirement and returns a boolean indicating whether the constraint is met. If you
go to the definition of the IRouteConstraint interface, you will see the following.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:08 / 03:1110 Sec

This method takes the following five parameters.

 HttpContext? httpContext: This parameter provides the context of the
current HTTP request. It includes all information about the request, such as
headers, cookies, and the request path.
 IRouter? route: The router that this constraint belongs to, i.e., the URL.
 string routeKey: This is the name of the route parameter to which you apply
the constraint. For example, if your route is defined
as {controller}/{action}/{id:int}, and you have a constraint on the id
parameter, the routeKey would be “id”.
 120

 RouteValueDictionary values: This dictionary contains all the route values

for the current request. This is where you retrieve the value of the parameter
that you need to validate. You can access it using the routeKey.
 RouteDirection routeDirection: This parameter indicates whether the
routing is happening for an incoming request or a URL generation. The
values can
be RouteDirection.IncomingRequest or RouteDirection.UrlGeneration.
This is important because you might want to apply the constraint differently
depending on whether the URL is being generated or processed in response
to an incoming request.
Example to Understand Custom Route Constraint in ASP.NET Core MVC
We will create a Custom Route Constraint to validate the Alpha Numeric String. That means
if the incoming Route Data Contains both Alphabet and Numeric, it will be considered a
valid value; if it contains only alphabet or only numeric, it will be considered an invalid value.
For this, we don’t have any built-in constraint in ASP.NET Core, and to achieve this in
ASP.NET Core MVC Application, we need to create a Custom Route Constraint.
So, create a class file named AlphaNumericConstraint.cs within the Models folder and
copy and paste the following code. As you can see, the class implements
the IRouteConstraint interface and provides the implementation for the Match method. As
part of the Match method, we implemented one alphanumeric regex to check the incoming
request parameter and determine whether the route parameter contains Alphabets (A-Z, a-
z) and numeric (0-9). If it contains both alphabet and numeric, it returns true; otherwise, it
returns false.
using System.Text.RegularExpressions;
namespace RoutingInASPDotNetCoreMVC.Models
{
public class AlphaNumericConstraint : IRouteConstraint
{
public bool Match(HttpContext httpContext, IRouter route, string routeKey,
RouteValueDictionary values, RouteDirection routeDirection)
{
//validate input params
if (httpContext == null)
throw new ArgumentNullException(nameof(httpContext));
if (route == null)
throw new ArgumentNullException(nameof(route));
if (routeKey == null)
throw new ArgumentNullException(nameof(routeKey));
if (values == null)
throw new ArgumentNullException(nameof(values));
 121

if (values.TryGetValue(routeKey, out object? routeValue))

{
var parameterValueString = Convert.ToString(routeValue);
if (Regex.IsMatch(parameterValueString ?? string.Empty, "^(?=.*[a-zA-Z])(?=.*[0-9])[A-
Za-z0-9]+$"))
{
return true;
}
else
{
return false;
}
}
return false;
}
}
}
Register the Custom Route Constraint:
Before using the Custom Route Constraint, we need to register it with the Routing System.
This is typically done in the Program.cs file. We need to register the Custom Route
Constraint within the ConstraintMap dictionary. The ConstraintMap is a dictionary that
contains the list of built-in route constraints. So, we have to add our Custom Route
Constraint to this ConstraintMap dictionary with the help of route options. We can register
the Custom Route Constraint service to the built-in dependency Injection container in two
ways. They are as follows:
Method 1: Configuring the Custom Route Constraint Service using the AddRouting
Method
builder.Services.AddRouting(options =>
{
options.ConstraintMap.Add("alphanumeric", typeof(AlphaNumericConstraint));
});
Method 2: Configuring the Custom Route Constraint Service using the Configure
Method
builder.Services.Configure<RouteOptions>(routeOptions =>
{
routeOptions.ConstraintMap.Add("alphanumeric", typeof(AlphaNumericConstraint));
 122

});
Use the Custom Route Constraint in Route Configuration:
Once you register the Custom Route Constraint, then you can use the Custom Route
Constraint in the Route Template. You have to use the “:” separator between the route
parameter and constraints. For example, you can use the alphanumeric (whatever name
you provided while registering the service) route constraint as follows:
app.MapControllerRoute(
name: "CustomRoute",
pattern: "{controller}/{action}/{id:alphanumeric?}",
defaults: new { controller = "Home", action = "Index" }
);
In the above code, we have specified the id parameter with Custom Route Constraint
alphanumeric and made this parameter optional.
using RoutingInASPDotNetCoreMVC.Models;
namespace RoutingInASPDotNetCoreMVC
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
//Configuring the Custom Route Constraint Service using AddRouting Method
builder.Services.AddRouting(options =>
{
options.ConstraintMap.Add("alphanumeric", typeof(AlphaNumericConstraint));
});
//Configuring the Custom Route Constraint Service using Configure Method
//builder.Services.Configure<RouteOptions>(routeOptions =>
//{
// routeOptions.ConstraintMap.Add("alphanumeric", typeof(AlphaNumericConstraint));
//});
var app = builder.Build();
 123

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "CustomRoute",
pattern: "{controller}/{action}/{id:alphanumeric?}",
defaults: new { controller = "Home", action = "Index"}
);
app.Run();
}
}
}
Note: You can use the Custom Route Constraint in both Convention-Based and Attribute-
Based Routing in ASP.NET Core Application.
Next, modify the Student Controller as follows. Now, you can access the Index and Details
action method without passing any route values. However, if you want to pass route values
for the Details action method, the value should be alphanumeric; otherwise, it will give a 404
Resource Not Found Error.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
public string Index()
{
return $"Index() Action Method of StudentController";
 124

}
public string Details(string id)
{
return $"Details({id}) Action Method of StudentController";
}
}
}

Attribute Routing in ASP.NET Core MVC Application

What is Attribute Routing in ASP.NET Core MVC?
Attribute Routing gives us more control over the URIs by defining routes directly at action
methods or controllers in our ASP.NET Core MVC Web Application. With Attribute Routing,
you can now define routes directly on actions and controllers by decorating them with
attributes like [Route], [HttpGet], [HttpPost], etc. This type of routing makes it easier to
understand the routes by looking directly at the controllers and actions.
Note: The Convention-Based routing is still fully supported by ASP.NET Core MVC. In fact,
we can use both these routing approaches in the same project. If both Routings are
present, then .NET Core overrides conventional routes. This is because .NET Core gives
preference to Attribute Routing.
Why do we need Attribute Routing in ASP.NET Core MVC Applications?
Let us understand the need for Attribute Routing in the ASP.NET Core MVC Web
Application with an example. We will work with the example we created in our Routing in
ASP.NET Core MVC articles.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:31 / 03:1110 Sec
Adding Student Model:
First, add a class file named Student.cs, within the Models folder, and copy and paste the
following code.
namespace RoutingInASPDotNetCoreMVC.Models
{
public class Student
{
public int Id { get; set; }
public string? Name { get; set; }
}
}
Modifying Student Controller:
 125

We have already created the Student controller within the Controllers folder. If not, please
right-click on the Controllers folder and add a new ASP.NET Core MVC Empty controller
named StudentController.cs, and then copy and paste the following code.
using Microsoft.AspNetCore.Mvc;
using RoutingInASPDotNetCoreMVC.Models;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
//This is going to be our data source
//In Real-Time you will get the data from the database
static List<Student> students = new List<Student>()
{
new Student() { Id = 1, Name = "Pranaya" },
new Student() { Id = 2, Name = "Priyanka" },
new Student() { Id = 3, Name = "Anurag" },
new Student() { Id = 4, Name = "Sambit" }
};
//This method is going to return all the Students
public List<Student> GetAllStudents()
{
return students;
}
//This method is going to return a student based on the student id
public Student GetStudentByID(int studentID)
{
//Returning the First Student Information
Student? studentDetails = students.FirstOrDefault(s => s.Id == studentID);
return studentDetails ?? new Student();
}
//This method is going to return the courses of a student based on the student id
public List<string> GetStudentCourses(int studentID)
{
//Real-Time you will get the courses from database, here we have hardcoded the data
 126

List<string> CourseList = new List<string>();

if (studentID == 1)
CourseList = new List<string>() { "ASP.NET Core", "C#.NET", "SQL Server" };
else if (studentID == 2)
CourseList = new List<string>() { "ASP.NET Core MVC", "C#.NET", "ADO.NET Core" };
else if (studentID == 3)
CourseList = new List<string>() { "ASP.NET Core WEB API", "C#.NET", "Entity
Framework Core" };
else
CourseList = new List<string>() { "Bootstrap", "jQuery", "AngularJs" };
return CourseList;
}
}
}
Modifying Program.cs Class file:
Next, modify the Main method of the Program class as follows. This is the default class file
you will get when creating a new ASP.NET Core Web Application using the Model-View-
Controller Project template. Here, we have configured the MVC Middleware Component
and the Convention-Based Routing.
namespace RoutingInASPDotNetCoreMVC
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
 127

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action}/{id:int?}",
defaults: new { controller = "Home", action = "Index" }
);
app.Run();
}
}
}
Now, you can access the three action methods of the Student Controller using the following
URLs, and it will work as expected.
https://localhost:44359/Student/GetAllStudents
https://localhost:44359/Student/GetStudentByID?studentID=1
https://localhost:44359/Student/GetStudentCourses?studentID=1
In some scenarios, Convention-Based routing makes it very difficult to support certain URL
patterns. However, attribute routing in the ASP.NET Core MVC application can easily
achieve those URL patterns.
In our example, if we want the URL Pattern “/student/1/courses” and if that URL Pattern
should be mapped to GetStudentCourses(int studentID), then this type of URL Pattern is
very difficult to create using convention-based routing in an ASP.NET Core MVC
Application. However, we can easily achieve this type of URL pattern by using attribute
routing in an ASP.NET Core MVC application.
How Do We Use Attribute Routing in ASP.NET Core MVC?
Attribute routing allows us to define routes directly on our controller and action methods
using the Route Attributes. Applying the Route attribute at the Controller level applies to all
the controller’s action methods. We can also use the [HttpGet], [HttpPost], [HttpPut],
[HttpDelete], and [HttpPatch] Attributes at the action method level to define the Route
Pattern. Let us first modify the Student Controller as shown below. Here, we have applied
the Route Attribute at the Action methods level.
using Microsoft.AspNetCore.Mvc;
using RoutingInASPDotNetCoreMVC.Models;
 128

namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class StudentController : Controller
{
//This is going to be our data source
//In Real-Time you will get the data from the database
static List<Student> students = new List<Student>()
{
new Student() { Id = 1, Name = "Pranaya" },
new Student() { Id = 2, Name = "Priyanka" },
new Student() { Id = 3, Name = "Anurag" },
new Student() { Id = 4, Name = "Sambit" }
};
//This method is going to return all the Students
//URL Pattern: /Student/All
[Route("Student/All")]
public List<Student> GetAllStudents()
{
return students;
}
//This method is going to return a student based on the student id
//URL Pattern: /Student/1/Details
[Route("Student/{studentID}/Details")]
public Student GetStudentByID(int studentID)
{
//Returning the First Student Information
Student? studentDetails = students.FirstOrDefault(s => s.Id == studentID);
return studentDetails ?? new Student();
}
//This method is going to the courses of a student based on the student id
//URL Pattern: /Student/1/Courses
[Route("Student/{studentID}/Courses")]
public List<string> GetStudentCourses(int studentID)
 129

{
//Real-Time you will get the courses from database, here we have hardcoded the data
List<string> CourseList = new List<string>();
if (studentID == 1)
CourseList = new List<string>() { "ASP.NET Core", "C#.NET", "SQL Server" };
else if (studentID == 2)
CourseList = new List<string>() { "ASP.NET Core MVC", "C#.NET", "ADO.NET Core" };
else if (studentID == 3)
CourseList = new List<string>() { "ASP.NET Core WEB API", "C#.NET", "Entity
Framework Core" };
else
CourseList = new List<string>() { "Bootstrap", "jQuery", "AngularJs" };
return CourseList;
}
}
}
With the above Attribute Routing in place, we can now access the above three action
methods for the student controller using the following URLs.
https://localhost:44359/Student/All
https://localhost:44359/Student/1/Details
https://localhost:44359/Student/1/Courses
Can we Apply Multiple Route Attributes to a Single Action Method in
ASP.NET Core MVC?
Yes, we can apply Multiple Route Attributes to a Single Action Method in the ASP.NET Core
MVC Application. Let us understand this with an example. Please modify the Home
Controller as shown below, and please have a look at the Index Action method, where we
have applied three attributes.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("Home")]
[Route("Home/Index")]
public string Index()
 130

{
return "Index() Action Method of HomeController";
}
}
}
If you notice, we have applied the Route attribute three times to the Index() action method
of the Home Controller class. With each instance of the Route attribute, we specified a
different route template. With the above three Route attributes applied to the Index action
method, we can now access the Index() action method of the HomeController using the
following three URLs.
https://localhost:44359/
https://localhost:44359/home
https://localhost:44359/home/index
If you apply the same Route Attributes multiple times with an Action Method and if you
apply the same Route Template to different action methods, then you will
get AmbiguousMatchException. Now run the application and navigate to the above three
URLs, and you will see the Home page as expected.
Attribute Routing with Parameters in ASP.NET Core MVC Application:
As we already discussed, we can specify the Route Parameters as part of the route
template with Conventional-Based Routing. We can also do the same with Attribute Routing
in ASP.NET Core. That means we can also define Route Attributes with Route Parameters.
To understand this, modify the Home Controller as shown below.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("Home")]
[Route("Home/Index")]
public string Index()
{
return "Index() Action Method of HomeController";
}
[Route("Home/Details/{id}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
 131

}
}
}
As you can see in the above code, the Details() action method has the id parameter. Notice
that in the route template, we also specified the ID parameter
([Route(“Home/Details/{id}”)]). So, the URL (/Home/Details/10) will execute
the Details(int id) action method and map the value 10 to the id parameter of the Details
action method. This is done through the model binding process, which will be discussed in
our upcoming articles. Run the application and navigate to the following URL; you should
see the output as expected.
https://localhost:44359/Home/Details/10
Attribute Routing with Optional Parameters in ASP.NET Core MVC
Application:
We can also make the Route Parameter optional in Attribute Routing. You can define a
Route Parameter as optional by adding a question mark (?) to the route parameter. You
can also specify the default value by using the parameter = value.
In our example, the Details(int id) action method of the HomeController is currently
executed only if we pass the id parameter value. If we do not pass the id parameter value,
we will get a 404 error. For example, if we navigate to the following URL, we will get a 404
error.
https://localhost:44359/Home/Details
Let us modify the Route attribute of the Details action method as shown below to make the
route parameter id optional by adding “?” at the end, i.e. [Route(“Home/Details/{id?}”)].
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("Home")]
[Route("Home/Index")]
public string Index()
{
return "Index() Action Method of HomeController";
}
[Route("Home/Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
 132

}
}
}
Now run the application and navigate to the following URL. You will see the output as
expected instead of a 404 error.
https://localhost:44359/Home/Details
We can also make the parameter optional by specifying a default value. For a better
understanding, please modify the Home Controller class as follows. Within the Route
Attribute of Details action method, we have specified the default value for the id parameter
as 10.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("Home")]
[Route("Home/Index")]
public string Index()
{
return "Index() Action Method of HomeController";
}
[Route("Home/Details/{id=10}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
}
}
}
If you run the application and navigate to the URL below without specifying the ID
parameter, it will take the default value 10.
https://localhost:44359/Home/Details
Controller and Action Method Names in Attribute Routing:
With Attribute Routing in ASP.NET Core MVC Application, the Controller and Action Method
names do not play any role. To understand this, modify the Home Controller as shown
below.
using Microsoft.AspNetCore.Mvc;
 133

namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("MyHome")]
[Route("MyHome/Index")]
public string StartPage()
{
return "StartPage() Action Method of HomeController";
}
}
}
As you can see, we have specified the Route attribute three times with the StartPage()
action method of the HomeController. So, this StartPage action method will be executed for
the following 3 URLs.
https://localhost:44359/
https://localhost:44359/home
https://localhost:44359/home/index
Can we use both Attribute and Convention-Based Routing in a Single
ASP.NET Core MVC Application?
Yes. Both routing mechanisms can be combined in a single ASP.NET Core MVC Web
Application. The controller action methods with the [Route] attribute use Attribute Routing,
and those without the [Route] attribute use Convention-based routing. To better understand,
please modify the Home Controller class as shown below.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("MyHome")]
[Route("MyHome/Index")]
public string StartPage()
{
return "StartPage() Action Method of HomeController";
 134

}
public string Privacy()
{
return "Privacy() Action Method of HomeController";
}
}
}
As you can see in the above code, we have applied the Route Attribute with the StartPage
action method, and we have not applied the Route Attribute with the Privacy action method.
So, in this case, StartPage will use Attribute Routing, and we can access this method using
the following 3 URLs.
https://localhost:44359/
https://localhost:44359/home
https://localhost:44359/home/index
On the other hand, the Privacy action method will use Contention-Based Routing and can
be accessed by using the following URL only.
https://localhost:44359/home/privacy
Note: It is not possible to access an action method using both Attribute and Convention
Routing. If Attribute Routing is applied to an action method, then you can access that
method using Attribute Routing only; you cannot access the same method using Convention
Routing. Similarly, if Attribute Routing is not applied to an action method, then you can
access that method using Conventional Routing only; you cannot access the same method
using Attribute Routing.
Applying Route Attribute at the Controller Level in the ASP.NET Core
MVC:
In the ASP.NET Core MVC Web Application, applying the Route() Attribute to the Controller
class and individual action methods is possible. If you want to make attribute routing less
repetitive, you need to use the Route Attribute on the controller level. Let us understand this
with an example. First, modify the Home Controller class, as shown below. Here, we have
created the Home controller with two action methods.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
public class HomeController : Controller
{
[Route("")]
[Route("Home")]
[Route("Home/Index")]
public string Index()
{
 135

return "Index() Action Method of HomeController";

}
[Route("Home/Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
}
}
}
With the above code in place, we can access the Index() action method using the following
3 URLs.
/
/Home
/Home/Index
Along the same line, we can access the Details(int? id) action method using the following 2
URLs.
/Home/Details
/Home/Details/2
If you look at our code, you will see that we are using Route Attributes at the action method
level to define routes. Further, you will notice that all the routes in the HomeController start
with the same prefix, i.e., Home. That means Home is the common prefix for all the routes
in the Home Controller.
Here, instead of writing the common prefix Home at each action method, we can specify the
Home for the Home Controller (for all its action methods) using the [Route] attribute at the
controller level.
So, modify the Home Controller class as follows. Here, you can see we have
applied [Route(“Home”)] at the controller level, and we have removed that Home prefix
from each action method Route Attribute. The Route Attribute we define at the Controller
level will be applied to each action method.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
[Route("Home")]
public class HomeController : Controller
{
[Route("")]
[Route("Index")]
public string Index()
{
 136

return "Index() Action Method of HomeController";

}
[Route("Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
}
}
}
The Route template applied on the controller level is prepended to the route template
applied to the action method level. When you navigate to the following four URLs, you will
get the output as expected.
https://localhost:44359/home
https://localhost:44359/home/index
https://localhost:44359/home/details
https://localhost:44359/home/details/10
However, when you navigate to the application’s root URL (http://localhost:44359), you will
get a 404 error. To solve this, you need to include the route template that begins with
“/” i.e. [Route(“/”)] on the Index() action method, as shown in the image below.

So, modify the Home Controller as follows:

using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
[Route("Home")]
public class HomeController : Controller
{
[Route("")]
[Route("/")]
[Route("Index")]
 137

public string Index()

{
return "Index() Action Method of HomeController";
}
[Route("Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
}
}
}
With the above changes in place, run the application and navigate to the root URL to see
the expected output. As you can see in the above code, we have applied
the [Route(“Home”)] attribute at the Controller level. This Route attribute eliminates the
need to repeat the common prefix “Home” on each controller action method. However,
sometimes, we may need to override the route attribute defined at the controller level.
How Do We Ignore the Route Attribute Placed at the Controller Level in
ASP.NET Core MVC?
To ignore the Route Template placed at the Controller level, you must use / or ~/ at the
action method level. If the action method route template starts with / or ~/, then the
controller Route Attribute will not be combined with the action method route attribute. To
understand this, let us modify the Home Controller class as shown below. In the following
code, the About action method starts with ~/, so this action method will not be combined
with the controller route attribute.
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
[Route("Home")]
public class HomeController : Controller
{
[Route("")]
[Route("/")]
[Route("Index")]
public string Index()
{
return "Index() Action Method of HomeController";
}
 138

[Route("Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
}
[Route("~/About")]
public string About(int id)
{
return "About() Action Method of HomeController";
}
}
}
Now run the application and navigate to /About URL, and you will see the output as
expected.
Defining Route using HTTP Methods:
We can also achieve this using HTTP Verbs. So, let us rewrite the previous example using
HTTP Methods as follows:
using Microsoft.AspNetCore.Mvc;
namespace RoutingInASPDotNetCoreMVC.Controllers
{
[Route("Home")]
public class HomeController : Controller
{
[HttpGet("")]
[HttpGet("/")]
[HttpGet("Index")]
public string Index()
{
return "Index() Action Method of HomeController";
}
[HttpGet("Details/{id?}")]
public string Details(int id)
{
return "Details() Action Method of HomeController, ID Value = " + id;
 139

}
[HttpGet("~/About")]
public string About(int id)
{
return "About() Action Method of HomeController";
}
}
}
What is the Difference Between [Route] and [HttpGet], [HttpPost], etc.,
Attributes?
The [Route] attribute specifies a route template for a controller or action method but does
not apply any specific HTTP method. On the other hand, HTTP method attributes like
[HttpGet], [HttpPost], [HttpPut], and [HttpDelete] not only define the route template but also
restrict the action method to be invoked only with the specified HTTP method.

ASP.NET Core Attribute Routing using Tokens

Tokens in Attribute Routing:
Tokens in Attribute Routing allow you to dynamically replace parts of the route template.
These tokens are placeholders within route templates that are substituted with actual values
during URL generation and routing. In ASP.NET Core MVC, Tokens in Attribute Routing are
enclosed in square brackets [] and can represent values such as controller name, action
name, etc. The following are the Commonly Used Tokens in ASP.NET Core MVC:
 [controller]: This represents the controller’s name without the “Controller”
suffix. For example, a controller named HomeController would have the
[controller] token substituted with Home.
 [action]: Represents the name of the action method. For example, an action
method named Index would mean the [action] token gets substituted with
Index.
Token Replacement Example in Attribute Routing:
Let us understand Token Replacement in ASP.NET Core Attribute Routing with an
example. Please modify the Home Controller class as shown below. Here, we are applying
the token [controller] to the Home Controller and the token [action] to all the action
methods.
using Microsoft.AspNetCore.Mvc;

namespace FirstCoreMVCApplication.Controllers

//Using token controller at the Controller level using the Route Attribute
 140

[Route("[controller]")]

public class HomeController : Controller

//Using token action at the Action Method level using the Route Attribute

[Route("[action]")]

public string Index()

return "Index() Action Method of HomeController";

//Using token action at the Action Method level using the Route Attribute

[Route("[action]")]

public string Details()

return "Details() Action Method of HomeController";

}
With the above controller and action tokens in place with the Route Attribute, you can now
access the Index action method of the Home Controller with the URL /Home/Index.
Similarly, you can access the Details action method of the Home Controller using the
URL /Home/Details.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:08 / 03:1110 Sec
 The route for the Index action method would be /Home/Index because of the
[controller] and [action] tokens used in the controller’s route attribute.
 The route for the Details action method would be /Home/Details because of
the [controller] and [action] tokens used in the controller’s route attribute.
 141

Now, run the application and see if everything is working as expected. The token controller
will be replaced with the actual controller name, and similarly, the token action will be
replaced with the actual action method name.
How Do We Make the Index Action Method the Default Action?
With the controller and action tokens in place with Route Attribute, if you want to make the
Index action method of Home Controller the default action, then you need to include
the [Route(“/”)] attribute with an “/” on the Index action method. So, modify the Home
Controller as shown below and rerun the application. It should display the Index Action
method.
using Microsoft.AspNetCore.Mvc;

namespace FirstCoreMVCApplication.Controllers

//Using token controller at the Controller level using the Route Attribute

[Route("[controller]")]

public class HomeController : Controller

//Using token action at the Action Method level using the Route Attribute

[Route("/")] //This will make the Index Action method as the Default Action

[Route("[action]")]

public string Index()

return "Index() Action Method of HomeController";

//Using token action at the Action Method level using the Route Attribute

[Route("[action]")]

public string Details()

return "Details() Action Method of HomeController";

 142

}
Do We Need to Write the Action Token for Each Action Method?
Not Really. If you want all your action methods to apply the action token, then instead of
applying the [action] token on each and every action method, you can apply it only once on
the controller. So, in this case, the Route attribute at the controller level should include both
controller and action tokens like [Route(“[controller]/[action]”)]. So, modify the Home
Controller class as shown below to apply the controller and action tokens at the controller
level.
using Microsoft.AspNetCore.Mvc;

namespace FirstCoreMVCApplication.Controllers

//Using controller and action tokens at the Controller level using the Route Attribute

[Route("[controller]/[action]")]

public class HomeController : Controller

//This will make the Index Action method as the Default Action

[Route("/")]

public string Index()

return "Index() Action Method of HomeController";

public string Details()

return "Details() Action Method of HomeController";

}
 143

}
Now, run the application, and it should work as expected.
Advantages of Using Tokens in ASP.NET Core Attribute Routing:
Attribute routing with tokens provides a flexible and expressive way to define dynamic
routes in your ASP.NET Core MVC application. The following are the advantages of using
Token with Attribute Routing in ASP.NET Core Web Applications:
 Reduction of Redundancy: Tokens help reduce redundancy by eliminating
the need to repeat the controller or action names in each route definition.
 Maintainability: Changing the name of a controller or action only requires
updating the class or method name, not the routes.
 Clarity: Route templates with tokens are generally easier to read and
understand, as they directly relate to the controller and action names.
Attribute Routing vs Conventional Routing in
ASP.NET Core
In this article, I will discuss Attribute Routing vs Conventional Routing in ASP.NET
Core MVC Applications with Examples. Please read our previous article
discussing ASP.NET Core Attribute Routing using Tokens with Examples.
Attribute Routing vs Conventional Routing in ASP.NET Core
In ASP.NET Core, Routing determines how an HTTP request matches a controller action.
There are two primary approaches to routing in ASP.NET Core: Attribute Routing and
Conventional Routing. Each approach has its unique characteristics, advantages, and use
cases.
Conventional Routing in ASP.NET Core
Conventional routing uses a predefined pattern to map requests to controller actions. It
involves defining routes in the Program.cs file. This approach relies on a predefined pattern
to match the URL paths to the corresponding controller actions. It typically specifies
placeholders for the controller name, action name, and optional parameters. This approach
is useful for applications with a clear and consistent URL structure across the entire
application.
Characteristics of Conventional Routing:
 Routes are defined globally in a centralized location, typically in the
Program.cs file.
 It implicitly uses route templates associated with controllers and actions
through naming conventions.
 Parameters can be specified within the route templates to capture values
from the URL.
Advantages of Conventional Routing:
 Simplifies route management by centralizing route definitions, making it
easier to understand and manage the application’s URL structure.
 Ideal for large applications with a hierarchical URL structure that follows a
consistent pattern.
Disadvantages of Conventional Routing:
 144

 Less flexible in defining granular or action-specific routes directly on

controllers or actions.
 This can lead to more complex route management in highly dynamic URL
pattern applications.
When to use Conventional Routing?
 Large Applications with Standardized URL Patterns: Conventional routing
is ideal for large applications with many controllers and actions but
standardized URL patterns. It reduces the need to decorate each action
method with route attributes, keeping the code cleaner.
 Centralized Route Configuration: Conventional routing provides this
advantage if you prefer to have routes defined and managed in a centralized
location. It allows for easier changes to route patterns without modifying
individual controllers or actions.
 Simple CRUD Operations: For applications that follow a straightforward
CRUD (Create, Read, Update, Delete) pattern, conventional routing can be
more straightforward and less verbose than attribute routing.
Attribute Routing in ASP.NET Core
Attribute routing, introduced in later versions of ASP.NET, allows for more granular control
over the URLs by defining routes directly on actions and controllers using attributes. This
approach offers greater flexibility in defining routes, including specifying complex route
patterns and constraints directly on the action methods or controllers.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:21 / 03:1110 Sec
Characteristics of Attribute Routing:
 Routes are defined using attributes on controllers and actions, allowing for
detailed and customized route definitions.
 It offers greater flexibility in defining routes that do not follow a conventional
pattern.
 Supports the definition of complex route templates, including using multiple
parameters, constraints, and even dynamically generating URLs.
Advantages of Attribute Routing:
 Provides greater control and precision over routing, allowing for complex and
custom route patterns that are not easily achieved with conventional routing.
 Facilitates the organization of routing logic by keeping it closer to the action
methods it applies to, improving readability and maintainability.
Disadvantages of Attribute Routing:
 This can lead to a scattered routing configuration if not managed carefully, as
routes are defined across different controllers and actions.
 It requires more effort to understand the routing configuration as it is not
centralized.
When to use Attribute Routing:
 Fine-grained URL Control: When you need precise control over your
application’s URL patterns, attribute routing is the way to go. It’s particularly
useful for designing RESTful APIs where URLs represent resources and
operations on those resources.
 145

 Complex Route Patterns: Attribute routing shines when dealing with

complex routes that conventional routing struggles with, such as routes that
need to capture multiple parameters or have custom constraints.
 Versioning APIs: For applications that involve API versioning, attribute
routing makes it easier to define different routes for different API versions
within the same application.
 Mixing Static and Dynamic Segments: If you need to mix static URL
segments with dynamic ones in a single route, attribute routing provides the
flexibility to accomplish this easily.
The choice between attribute routing and conventional routing depends on your
application’s specific needs. Conventional routing is often more suitable for applications that
benefit from centralized route definitions and have a uniform URL structure. On the other
hand, attribute routing is preferred for applications requiring detailed control over route
configurations, such as APIs or applications with complex routing requirements. It’s also
worth noting that ASP.NET Core supports combining both routing methods in the same
application, allowing developers to choose the most appropriate routing strategy for each
controller or action.

Layout View in ASP.NET Core MVC

What is Layout View in ASP.NET Core MVC?
In ASP.NET Core MVC, a Layout View is a special view file containing common HTML
layout elements (headers, footers, navigation menus, etc.) used across multiple pages to
maintain a consistent look and feel. Centralizing common page elements like headers,
footers, navigation bars, and so on helps minimize code duplication.
Why Do We Need Layout View in ASP.NET Core MVC?
The layouts in ASP.NET Core MVC Applications help us maintain a consistent look across
all the pages of our application. Nowadays, most web applications have a common layout
that provides a consistent user experience when the user navigates from one page to
another. The layout typically includes common user interface elements such as:
1. Website Header
2. Website Footer
3. Navigation Menus
4. Main Content Area
Please look at the following diagram, which shows the above-mentioned four areas on a
website.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:33 / 03:1110 Sec
 146

If you don’t have a layout view for your website, then you need to repeat the required HTML
for the above-mentioned sections in each and every view of your application. This violates
the DRY (Don’t Repeat Yourself) principle as we are repeating the same code in multiple
views.
As a result, it isn’t easy to maintain the application code. For example, suppose you have to
remove or add a menu item from the list of navigation menus or even if you want to change
the header or footer of your website. In that case, you need to do this in every view, which is
tedious, time-consuming, and error-prone.
Instead of putting all the sections (i.e., the HTML) in every view page, it is always better and
advisable to put them in a layout view and then inherit that layout view in every view where
you want that look and feel. With the help of layout views, it is now easier to maintain your
application’s consistent look and feel. This is because if you need to make any changes,
you need to do it only in one place, i.e., in the layout view, and the changes will be reflected
immediately across all the views inherited from the layout view.
How Do We Create a Layout View in ASP.NET Core MVC Application?
First, create a new ASP.NET Core Application named FirstCoreMVCApplication using the
Model-View-Controller Template. Next, follow the steps below to create a layout view in
ASP.NET Core MVC.
1. Right-click on the “Views” folder and then add a new folder named “Shared”
if not already added. If you are creating the ASP.NET Core Web Application
using Model-View-Controller, the Shared folder will be there with
the _Layout.cshtml file by default.
2. Next, Right-click on the “Shared” folder and select the “Add” – “New
Item” option from the context menu. This will open the Add New Item
window.
 147

3. From the “Add New Item” window, search for Layout and then select “Razor
Layout.” Give your layout view a meaningful name (_Layout.cshtml), and
finally, click on the “Add” button, as shown below. This should add
the _Layout.cshtml file to the Shared folder.

Note: In this article, I will show you how to create and use a layout file. In our upcoming
articles, I will also show you how to use a website header, footer, and navigation menus.
So, once you add the _Layout.cshtml file, your Views folder should look as shown below.

Understanding the _Layout.cshtml file:

Let us first modify the _Layout.cshtml file as follows.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
 148

<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
As you can see in the above layout file, it contains the standard HTML, head, title, and body
elements. As the above elements are present in the layout file, you don’t have to repeat
them in each and every view of your application that uses the above Layout file.
The View or Page-Specific title is retrieved by using the @ViewBag.Title expression. For
example, when the “index.cshtml” view is rendered using this layout view, then
the index.cshtml view will set the Title property on the ViewBag. This is then retrieved by
the Layout view using the expression @ViewBag.Title and set as the value for the <title>
tag.
The @RenderBody() method specifies the location where the View or Page-Specific
content will be injected. For example, if the “index.cshtml” view is rendered using this layout
view, then the index.cshtml view content will be injected at the @RenderBody() location.
Now, let us modify the _Layout.cshtml page again, as shown below, to include the header,
footer, left navigation menus, and main content area section.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
 149

</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
</body>
</html>
Configuring MVC Services and Middleware in the Main Method of the
Program class:
Please modify the Main method of the Program class, as shown below, to configure the
required MVC services and Middleware Components. Here, we are using the
AddControllersWithViews method to configure MVC services. We have also used
the UseRouting and MapControllerRoute middleware components to configure the
Routing and MVC Middleware to the Request Processing Pipeline. Also, we set the Home
controller and Index action method as the default route for our application.
namespace FirstCoreMVCApplication
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
 150

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
}
}
}
Modifying the Home Controller:
The Home Controller class is created by default. Please modify it as shown below. We have
created the Home Controller class with two action methods: Index and Details. Both action
methods return a view.
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
public ViewResult Details()
{
return View();
}
}
}
 151

How to Use Layout View in ASP.NET Core MVC Application?

Now, we will create the Index and Details views using the Layout view. We need to set
the Layout property to render a view using the layout view (_Layout.cshtml).
Index.cshtml:
Please modify the Index.cshtml view as shown below to use the layout view. Here, we are
setting the Page Title using the ViewBag.Title property, i.e., ViewBag.Title = “Home
Page”; and we are also setting the Layout for our view as Layout =
“~/Views/Shared/_Layout.cshtml”;
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Home Page</h1>
Details.cshtml:
Please create the Details.cshtml view within the Views/Home folder and then copy and
paste the following code to use the layout view. Here, we are setting the Page Title using
the ViewBag.Title property, i.e., ViewBag.Title = “Details Page”; and we are also setting
the Layout for our view as Layout = “~/Views/Shared/_Layout.cshtml”;
@{
ViewBag.Title = "Details Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Details Page</h1>
Now run the application and navigate to the Home/Index URL, which should display the
page below.

Next, navigate to the Home/Details URL, which should display the page below.
 152

If you compare both pages, you will see that only the Page Title and Main Content area are
changed; the rest, like the Footer, Menus, and Header, will be the same. Here, we are not
repeating the HTML code in both the Index and Details View; rather, we are using the
Layout view, which contains the common HTML Elements.

Sections in Layout View in ASP.NET Core MVC

What are Sections in Layout View?

In ASP.NET Core MVC, the layout view is a shared template used to maintain a consistent
look and feel across all the views in your application. You can use sections to inject content
(such as custom JavaScript, stylesheets, or other unique blocks of HTML) from a child view
into specific parts of the layout. So, Sections in ASP.NET Core MVC layout views provide a
way to define content blocks that child views can fill.
This is useful in complex web applications with a common layout structure but varying
content requirements across different pages. This mechanism is helpful for creating flexible
and customizable layouts where different child views can inject their own content into
specific sections of the layout.
Why Do We Need Sections in a Layout View?
To understand the Need for Sections in a Layout View, let us first create a custom
JavaScript file. If it isn’t already there, create a folder at the root level of the application with
the name wwwroot. As we create the project using Model-View-Controller, the wwwroot
folder should be there.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:18 / 03:1110 Sec
 153

In general, all the static files of our ASP.NET Core MVC Application need to be placed
within this wwwroot folder. Once you have created the “wwwroot” folder, create a subfolder
within it with the name “js” if it is not already there, and then add a Javascript file with the
name “CustomJavascript.js” within the js folder.
To do so, right-click on the js folder and select Add => New Item from the context menu,
which will open the New Item window. Here, search javascript, select Javascript File, give
the file name CustomJavascript.js, and finally click the Add button, as shown in the image
below.

Once you add the CustomJavascript.js file, your wwwroot folder should look as shown in
the image below.

Situation 1:
If we have a custom Javascript file (e.g., CustomJavascript.js) and all the views of our
application require that file, we need to place that file in the Layout View of our application.
 154

Let us add that CustomJavascript.js file within our _Layout.cshtml file. So, modify
the _Layout.cshtml file as follows.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
<script src="~/js/CustomJavascript.js"></script>
</body>
</html>
Note: Putting all the script files before the closing body tag is always a good programming
practice.
 155

Situation 2:
Suppose we have a custom Javascript file (e.g., CustomJavascript.js), and we want this file
to be used in some specific views. Let’s assume we want this file in the Index view but not
in the Details view of the Home Controller. In such scenarios, we can use the Section in the
ASP.NET Core MVC Application.
Understanding the RenderSection and RenderSectionAsync Method:
To use Section in ASP.NET Core MVC Layout Views, we are provided with
the RenderSection and RenderSectionAsync methods. Let us look at the signatures of
the RenderSection and RenderSectionAsync methods, shown below.

As you can see, two overloaded versions of the RenderSection Method exist. The same is
the case for the RenderSectionAsync method. The first version of the Render section
method takes a single parameter (i.e., name) that specifies the section’s name. The second
overloaded version takes two parameters. The first parameter (name) specifies the
section’s name, while the second parameter (required) specifies whether the section is
required or optional.
 name: The name of the section that you want to render.
 required: A boolean value indicating whether the section is mandatory. If set
to true, an exception is thrown if the section is not defined on the content
page. If set to false, the layout will render without the section if it’s not present
on the content page.
How Do We Use the RenderSection Method in ASP.NET Core MVC?
From your layout view, you need to call the RenderSection() method at the location where
you want the section content to be rendered. For example, we want the script file to be
included before the closing </body> tag. So, here, we are calling
the @RenderSection() method just before the closing </body> tag, as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
 156

</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
@RenderSection("Scripts")
</body>
</html>
In the above code, we use the first overloaded version of the RenderSection method, which
only takes the name parameter. In this case, the second parameter value will be true by
default. That means it is a mandatory section.
How to Provide Section Content in a Child View?
We have created a section in our layout view. Now, let us understand how to provide
section content from the Child Views. Each view that wants to provide section content must
include a section within the view. We need to use the @section directive to include the
section and provide the content to do this.
In our example, we want to provide the section content from the Index view. So, modify the
Index view as shown below. Here, you can see we are using @section Scripts {<script
src=”~/js/CustomJavascript.js”></script>} as we are trying to include a javascript file.
Here, we need to provide the section name as Scripts, and this is because, in
the _Layout view, we have specified the section name as Scripts,
i.e., @RenderSection(“Scripts”)
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Home Page</h1>
 157

@section Scripts {
<script src="~/js/CustomJavascript.js"></script>
}
Now run the application and navigate to the Home/Index URL, and you will see the out as
expected, as shown in the below image.

But, when you navigate the Home/Details URL, you will get the following error page.

The reason for getting the above exception is the section is mandatory, and we have not
specified the section content in the Details view. To verify this, go to the definition of
the RenderSection(“Scripts”) method, which takes the string file name as a parameter,
and you will see the following. As you can see, this method takes only the name parameter,
and internally, it sets the required parameter value to true, making it mandatory to include
the section in the child view. And in the Details view, we have not included any section.
 158

Optional and Required Sections in ASP.NET Core MVC

As mentioned, sections can be marked as required or optional in the layout:
 Required Sections: If a section is marked as required in the layout and if the
child view does not include that section, an exception will be thrown.
 Optional Sections: If a section is marked as optional (required: false), the
layout will render without the section content if the child view does not define
it.
How Do We Make the Layout Section Optional in ASP.NET Core MVC?
We can make a layout section optional in ASP.NET Core MVC in two ways. They are as
follows:
Option 1: Use the RenderSection method, which takes two parameters. Set the second
parameter (i.e., the required) to false.
@RenderSection(“Scripts”, required: false)
So, modify the _Layout.cshtml file as shown below to make the section optional.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
 159

</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
@RenderSection("Scripts", false)
</body>
</html>
With the above changes in place, run the application and navigate to both URLs. You
should get the output as expected.
Option 2: Using the IsSectionDefined() method.
This method returns a value indicating whether the specified section is defined on the child
view. If the section is defined in the child view, then the IsSectionDefined() method returns
true, and in that case, the RenderSection method loads the content from the child view. If
the method returns false, then the RenderSection method is not going to be executed and
be ignored. So, modify the _Layout.cshtml file as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
 160

<td colspan="2" style="text-align:center">

<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
@if (IsSectionDefined("Scripts"))
{
@RenderSection("Scripts")
}
</body>
</html>
With the above changes in place, run the application and navigate to both URLs. You
should get the output as expected.
RenderSection vs RenderSectionAsync Methods in ASP.NET Core MVC
In ASP.NET Core MVC, RenderSection and RenderSectionAsync methods are used within
layout pages to render sections from a view. The primary difference between the two
methods lies in their mode of operation: synchronous versus asynchronous.
RenderSection
RenderSection is a synchronous method used in layout views to render a section defined in
a view. The RenderSection method takes the section’s name as its first argument and an
optional boolean parameter that indicates whether the section is required or not:
<!DOCTYPE html>
<html>
 161

<head>
<title>@ViewBag.Title</title>
</head>
<body>
@RenderBody()
@RenderSection("Scripts", required: false)
</body>
</html>
In this example, @RenderBody() renders the main content of the view,
while @RenderSection(“Scripts”, required: false) attempts to render a section named
“Scripts”. The required: false parameter indicates that the section is optional; if the section
isn’t defined in a view using this layout, the layout will still be rendered without throwing an
error.
RenderSectionAsync
RenderSectionAsync is the asynchronous counterpart to RenderSection. It operates
similarly in that it is used to render sections defined in views, but it does so asynchronously.
This can be useful when the section’s content involves I/O operations, such as database
calls or reading from files, which can be performed asynchronously to improve the
performance of your application. The use of RenderSectionAsync looks similar to
RenderSection, but it requires the await keyword because it is an asynchronous method:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
@RenderBody()
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Key Differences Between RenderSection and RenderSectionAsync
Methods
RenderSection executes synchronously, while RenderSectionAsync executes
asynchronously. RenderSectionAsync is preferred when the section content involves
asynchronous operations. Using RenderSectionAsync can help prevent the web server
thread from blocking, potentially improving the application’s overall performance.
 162

ViewStart in ASP.NET Core MVC Application

Why Do We Need _ViewStart.cshtml File in ASP.NET Core MVC
Application?
The _ViewStart.cshtml file in ASP.NET Core MVC is a special Razor file used to set
common view settings for all the views in a directory and its subdirectories. The primary
purpose of _ViewStart.cshtml is to contain code that you want to execute before rendering
each view in the directory where the _ViewStart.cshtml file exists and its subdirectories.
It can be very useful for specifying layout files or setting other shared properties so that you
don’t have to specify these settings in every individual view file. For example, as of now, we
have used the Layout Property to associate a view with a layout view, as shown below. So,
basically, within the Child view, we have added the following statement to use the layout
view.
Layout = “~/Views/Shared/_Layout.cshtml”;
Suppose we have 100 views in our application, and all the views want to use the same
layout file. Then, we need to set the Layout Property, i.e., Layout =
“~/Views/Shared/_Layout.cshtml”; in all 100 views. This violates the DRY (Don’t Repeat
Yourself) Principle.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec
Suppose you want to use a different Layout for all 100 views tomorrow. Then, you need to
update the Layout Property in each individual view of your application. This process is
tedious, time-consuming, and error-prone because you may miss updating the Layout
Property in some views. To solve the above problems, we need to use
the _ViewStart.cshtml file.
How to Create _ViewStart.cshtml file in ASP.NET Core MVC Application?
The _ViewStart.cshtml files are created within the Views or the Views folder’s subfolder.
To create the _ViewStart.cshtml file, right-click on the Views folder and then select
the Add – New Item option from the context menu; this will open the New Item window.
From the New Item window, search for Razor and then select the Razor View
Start template, provide the name as _ViewStart.cshtml, and click on the Add button as
shown in the below image, which should create the _ViewStart.cshtml file within
the Views folder of your project.
 163

If you are creating the ASP.NET Core Application using the Model-View-Controller Project
template, then by default, the _ViewStart.cshtml file is added within the Views folder, as
shown in the image below.

How to Set the Layout Property in ViewStart.cshtml file in ASP.NET Core

MVC Application?
Once the ViewStart.cshtml file is created, then modify the file as shown below to set
the Layout property. Here, you can see using the Layout property, and we are specifying
the layout file path. So, use the Layout property to specify the path to your layout file.
Layout files are typically in the Views/Shared folder and have the .cshtml file extension.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Then, we need to remove the Layout property on individual views. So, modify the Index
view of the Home Controller, i.e., the Index.cshtml View is inside
the Views=>Home Folder, as shown below.
@{
 164

ViewBag.Title = "Home Page";

}
<h1>Home Page</h1>
@section Scripts {
<script src="~/js/CustomJavascript.js"></script>
}
Next, modify the Details.cshtml view of Home Controller as follows.
@{
ViewBag.Title = "Details Page";
}
<h1>Details Page</h1>
With the above changes in place, run the application and navigate
to Home/Index and Home/Details. It should display the output as expected.
Understanding the Hierarchy of _ViewStart.cshtml File in ASP.NET Core
MVC:
As we already discussed, we can place the _ViewStart file within the Views folder as well
as its subfolder. So, we need to understand the hierarchical order of the ViewStart file.
The _ViewStart.cshtml file can be placed in the Views root directory or any subdirectory
under Views. ASP.NET Core MVC applications search for the _ViewStart.cshtml file using a
top-down approach, starting from the specific view’s directory to the root of the Views
directory.
Let us understand this with an example. First, create another layout file
named _MyLayout.cshtml within the Shared folder. To do so, right-click on the Shared
folder and then select Add => New Item from the context menu, which will open the
following Add New Item window. Here, search for Layout and then select Razor
Layout template, give the view name as _MyLayout.cshtml, and finally click on
the Add button as shown below image, which should add _MyLayout.cshtml file within the
Shared folder.
 165

Once you create the _MyLayout.cshtml file, copy and paste the following code.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
@if (IsSectionDefined("Scripts"))
{
@RenderSection("Scripts")
}
</body>
</html>
With this Layout, we now have two layouts (_Layout.cshtml and _MyLayout.cshtml) for
our application.
Creating Another ViewStart File within the Home Folder:
 166

Let’s 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 layout using the Layout
property.
@{
Layout = "~/Views/Shared/_MyLayout.cshtml";
}
With the above changes in place, your application’s Views folder should look like the image
below.

As you can see in the above image, we have placed one ViewStart file inside
the Views folder and another inside the Home sub-folder. Now run the application and
navigate to the Home/Index URL, as shown in the image below.

The above Index view of the Home Controller uses MyLayout.cshtml view, which we
specified within the _ViewStart.cshtml File, which is present inside the Home Folder. So,
 167

here, the Layout Page, specified in the _ViewStart.cshtml file in the Home sub-folder,
overwrites the Layout Page, which is specified in the _ViewStart.cshtml File in the Views
folder.
This means all the views in the Views folder will use the layout page specified in
the _ViewStart.cshtml file in the Views folder, but the views in the Home folder will use the
layout page specified in the _ViewStart.cshtml File in the Home folder.
How to Use a Different Layout Other the Layout Specified in the
_ViewStart.cshtml File?
To use a different layout than the one specified in the _ViewStart.cshtml file, we need to
set the layout explicitly in individual view files. If you don’t want to use the layout file
specified in the _ViewStart file either from the Home folder or the Views folder, you want to
use a different layout file; then you need to use the Layout property in the individual view to
set the layout.
Let us understand this with an example. Create another Layout with the
name _NewLayout.cshtml within the Shared Folder. Once you create
the _NewLayout.cshtml file, copy and paste the following code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
<h4>This View Using _NewLayout.cshtml</h4>
@RenderBody()
</div>
</body>
</html>
I want to use the above _NewLayout.cshtml in the Details View of our Home Controller. To
do so explicitly, we need to use the Layout property and provide the path of
the _NewLayout.cshtml file. So, modify the Details.cshtml file as follows.
@{
ViewBag.Title = "Details Page";
Layout = "~/Views/Shared/_NewLayout.cshtml";
}
<h1>Details Page</h1>
 168

Now, run the application and navigate to Home/Details. You should get the following
output, which means the Details view now uses the Layout, which is specified in the Details
view only.

Now, if you don’t want to use any layout or want to render a view without a layout, then you
need to set the Layout property to null. For example, if you don’t want to use a Layout in
Details View, you need to modify the Details.cshtml view as follows.
@{
ViewBag.Title = "Details Page";
Layout = null;
}
<h1>Details Page</h1>
Now, run the application and navigate to the Home/Details URL. You should see the output
without using any layout page.
How Do We Select a Layout Conditionally in the ViewStart file?
To conditionally select a layout in the _ViewStart.cshtml file in an ASP.NET Core MVC
application, you can use C# code to set the layout based on certain conditions. Here is a
step-by-step guide on how to do this:
 Identify the Condition: First, you need to determine the condition for
changing the layout. This could be based on the current controller, action,
user roles, or any custom logic.
 Implement the Conditional Logic: Inside the _ViewStart.cshtml file, you can
write C# code within @{ … } blocks. Use this capability to implement your
conditional logic when selecting the layout.
When you work with a Real-Time 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; otherwise, use
the _NonAdminLayout. Then, you need to write the following conditional logic within
the _ViewStart.cshtml file, which will select the layout based on the logged-in user’s role.
@{
if (User.IsInRole("Admin"))
{
 169

Layout = "_AdminLayout";
}
else
{
Layout = "_NonAdminLayout";
}
}
Here’s an example of selecting a layout based on the controller name. You can access
route data through the ViewContext.RouteData property. The controller name is stored in
this route data.
@{
var controllerName = ViewContext.RouteData.Values["controller"].ToString();
if (controllerName == "Home")
{
Layout = "~/Views/Shared/_HomeLayout.cshtml";
}
else if (controllerName == "Admin")
{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
else
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
}

ViewImports in ASP.NET Core MVC

What is _ViewImports.cshtml in ASP.NET Core MVC Application?
The _ViewImports.cshtml in ASP.NET Core MVC is a special file that enables us to add
common namespaces, directives, and other elements to multiple views without having to
add these namespaces, directives, and other elements to every individual view file. The
common namespaces, directives, and other elements present in the _ViewImports.cshtml
file are then automatically applied to all Razor views in the same directory or subdirectories.
The following are the things that can be placed in the _ViewImports.cshtml file:
 Namespaces: You can add @using directives for namespaces that you want
to be available in your views. For example, if you have models or data access
 170

layer code that you frequently reference in your views, you can include these
namespaces in _ViewImports.cshtml to make them universally accessible
without adding @using in each individual view.
 Tag Helpers: The @addTagHelper directive allows you to make tag helpers
available across all views. This is useful for frequently used tag helpers, such
as those provided by ASP.NET Core itself or any custom tag helpers you
have developed.
 View Layouts: By specifying the @layout directive in _ViewImports.cshtml,
you can define a default layout for all views in the folder. This can be
overridden in specific views if needed.
Note: In this article, I will show you how to use the @using directive in
the ViewImports.cshtml file. We will discuss the rest of the directives in our upcoming
articles.
Example to Understand ViewImports in ASP.NET Core MVC:
Create a class file named Student.cs within the Models folder and then copy and paste the
following code. As you can see, we have created the Student model with five properties.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec

namespace FirstCoreMVCApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Modifying Home Controller:
Next, modify the Home Controller as shown below. As you can see, here we have created
two action methods. The Index Action Method displays all the student data, while the
Details Action Method takes the student ID as a parameter and returns that student
information.
using FirstCoreMVCApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCApplication.Controllers
{
 171

public class HomeController : Controller

{
public ViewResult Index()
{
List<Student> listStudents = new List<Student>()
{
new Student() { StudentId = 101, Name = "James", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 102, Name = "Smith", Branch = "ETC", Section = "B", Gender
= "Male" },
new Student() { StudentId = 103, Name = "David", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 104, Name = "Sara", Branch = "CSE", Section = "A", Gender =
"Female" },
new Student() { StudentId = 105, Name = "Pam", Branch = "ETC", Section = "B", Gender =
"Female" }
};
return View(listStudents);
}
public ViewResult Details(int Id)
{
var studentDetails = new Student() { StudentId = Id, Name = "James", Branch = "CSE",
Section = "A", Gender = "Male" };
return View(studentDetails);
}
}
}
Modifying the Index and Details view:
Index.cshtml:
@model List<FirstCoreMVCApplication.Models.Student>
@{
Layout = null;
}
 172

<html>
<head>
<title>Index</title>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Branch</th>
<th>Section</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
@foreach (var student in Model)
{
<tr>
<td>
@student.StudentId
</td>
<td>
@student.Name
</td>
<td>
@student.Branch
</td>
<td>
@student.Section
</td>
<td>
@student.Gender
 173

</td>
</tr>
}
</tbody>
</table>
</body>
</html>
Details.cshtml:
@model FirstCoreMVCApplication.Models.Student
@{
Layout = null;
}
<html>
<head>
<title>Student Detaills</title>
</head>
<body>
<div>
StudentId : @Model?.StudentId
</div>
<div>
Name : @Model?.Name
</div>
<div>
Branch : @Model?.Branch
</div>
<div>
Section : @Model?.Section
</div>
<div>
Gender : @Model?.Gender
</div>
</body>
 174

</html>
In the above Index and Details view, we are using the @model directive to specify the
model for the view. If you notice, you can see in both views we have specified the fully
qualified name for the model, such as FirstCoreMVCApplication.Models.Student. Now,
let us see how to move the namespace to the ViewImports file so we can only specify the
model name.
Creating ViewImports.cshtml file in ASP.NET Core MVC Application:
In general, _ViewImports.cshtml files are created within the Views or within the subfolder
of the Views folder. To create the _ViewImports.cshtml file, right-click on the Views folder
and then select the Add – New Item option from the context menu, which will open the
“New Item” window. From the New Item window, search for Razor, select the Razor View
Import, and click on the Add button as shown in the image below, which should create
the _ViewImport.cshtml within the Views folder.

Note: When creating the project using the ASP.NET Core Web Application using the
Model-View-Controller Project template, Visual Studio adds the _ViewImports.cshtml file
with the Views Folder by default. Once the _ViewImports.cshtml file is created, copy and
paste the following code.
@using FirstCoreMVCApplication.Models;
As we placed the above namespace in the ViewImports file, all the types present in the
above namespace are available to every view of our application. So now we don’t need to
type the Type’s fully qualified name. So, modify the Index and Details view as shown below.
 175

As you can see in the above image, we are removing the namespace and only specifying
the model name. Run the application, and it should work as expected.
_ViewImports file Hierarchical Order in ASP.NET Core MVC:
Like the _ViewStart file, the _ViewImports file is hierarchical. It is also possible to pace the
_ViewImports in the subfolder of the Views folder. The following are the places where you
can place the _ViewImports file in ASP.NET Core MVC:
 Application Level: The root level of the application is the most general level
where a _ViewImports.cshtml file can be placed. Located in the Views
folder, directives placed here are globally available to all views throughout the
application. This is the highest level in the hierarchy.
 Area Level: If your application is structured using Areas to group related
functionalities, each area can have its own _ViewImports.cshtml file. This file
is located within the Areas/[AreaName]/Views directory. Directives here
apply to all views within the specified area, overriding or augmenting
directives from the application level.
 Controller Level: Within each area or the root Views directory, the controller-
specific _ViewImports.cshtml can be placed inside
the Views/[ControllerName] directory. This targets all views associated with
the specified controller, allowing for controller-specific namespaces or tag
helpers.
 View Level: The most specific level is directly within a specific view file. This
allows for more control over directives that apply only to a particular view.
Please have a look at the image below to better understand. Here, we have
one ViewImports file in the Views folder and another within the Home folder.
 176

The settings specified in the _ViewImports file in the Home subfolder will overwrite the
settings specified in the _ViewImports file in the Views folder.

Partial Views in ASP.NET Core MVC

What are Partial Views in ASP.NET Core MVC?
A Partial View is similar to a regular view, but it does not run on its own; instead, it must be
invoked from other views or layouts. Like Regular views, Partial Views also use Razor
markup to render HTML dynamically. They are typically used to render a portion of HTML
content that can be shared by multiple views or to reduce the complexity of a very large
view by splitting it into simpler pieces.
That means Partial Views in ASP.NET Core MVC allows us to create reusable components
or to break down complex views into simpler, manageable sections. This not only enhances
code readability and maintainability but also promotes DRY (Don’t Repeat Yourself)
principles in web development. The following are some of the scenarios where you can use
Partial Views in ASP.NET Core MVC:
 Reusable Components: When you have a component (like a banner, a
navigation menu, or a footer) reused across multiple pages.
 Simplifying Complex Views: Breaking down complex views into
manageable pieces helps maintain and organize them by separating them
into smaller components.
 Updating Content with AJAX: Partial views can be returned from controller
actions for AJAX calls to update a portion of a page without reloading the
entire page.
Example to Understand Partial Views in ASP.NET MVC:
It is a common task in Web Applications to use the same code repeatedly to display/render
information. For example, an e-commerce Web Application would probably render each
product similarly on multiple web pages. Let’s understand how we can implement this using
Partial Views in an ASP.NET Core MVC Application. First, let’s create a new ASP.NET
 177

Core MVC Web Application named “PartialViewInMVC” using the Model View Controller
Project Template.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:16 / 03:1110 Sec
Creating Product Model:
Create a class file named Product.cs within the Models folder, then copy and paste the
following code. This simple class has a few properties to hold the Product information.
namespace PartialViewInMVC.Models
{
public class Product
{
public long ProductID { get; set; }
public string? Name { get; set; } = null!;
public string Category { get; set; } = null!;
public string Description { get; set; } = null!;
public decimal Price { get; set; }
}
}
The View for rendering Product Details in ASP.NET Core MVC View is like the one below.
 178

This is just a simple Product class for demonstration purposes. What if we wanted to display
objects with twenty or even more properties? And what if we needed to display this
information on many pages in our application? Writing the same code repeatedly would be
time-consuming and error-prone, and maintenance becomes a headache; if we need to
modify anything, we must do it in all places. This is where Partial Views Come into the
picture in the ASP.NET MVC Application.
Creating Product Controller:
Add a new Controller named ProductController within the Controllers folder, and choose
the “MVC Controller – Empty” template. Once you Create the ProductController, copy and
paste the following code into it.
using Microsoft.AspNetCore.Mvc;
using PartialViewInMVC.Models;
namespace PartialViewInMVC.Controllers
{
public class ProductController : Controller
{
private List<Product> products = new List<Product>();
public ProductController()
{
products = new List<Product>()
{
new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description
="Description 1", Price = 10m},
new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description
="Description 2", Price = 20m},
new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description
="Description 3", Price = 30m},
new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description
="Description 4", Price = 40m},
new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description
="Description 5", Price = 50m},
new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description
="Description 6", Price = 50m}
};
}
public ActionResult Details(int Id)
 179

{
var ProductDetails = products.FirstOrDefault(prd => prd.ProductID == Id);
return View(ProductDetails);
}
}
}
Next, add the Details.cshtml view within the Views => Product folder. Once you add the
view, copy and paste the following code.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
Name
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Price
</th>
</tr>
<tr>
 180

<td>
@Model?.ProductID
</td>
<td>
@Model?.Name
</td>

<td>

@Model?.Category
</td>
<td>
@Model?.Description
</td>
<td>
@Model?.Price
</td>
</tr>
</table>
</div>
Now, run your application and navigate to Product/Details/1, and you should get the
following output.

When we need a section of a web page (both the Razor Syntax and HTML Markup) on
several different pages, we must create and use them as Partial Views.
How Do We Create a Partial View in ASP.NET Core MVC Application?
 181

Partial views are similar to regular views, but they start with an underscore (_) in their file
name to indicate that they are meant to be partial. For example, _ProductDetails.cshtml.
 Create the Partial View File: In the Views/Shared directory of your
ASP.NET Core MVC project, create a new file and name it according to its
purpose, for example, _ProductDetails.cshtml. The underscore (_) prefix is
a convention to denote partial views but is not mandatory.
 Define the Model (if needed): At the top of your partial view file, define the
model it will use, if any, using the @model directive.
 Add Markup and Razor Code: Implement the HTML markup and Razor
syntax as needed to render the portion of the page the partial view is
responsible for.
So, right-click on the /Views/Shared folder, then select the Add -> View option from the
context menu. It will open the following window. Here, we need to select Razor View and
click the Add button, as shown in the image below.

Once you click on the Add button, it will open the following window: Here, please provide
the View name as _ProductDetails, check the Create as a partial view check box, and
then click on the Add button as shown in the image below.
 182

Once you create the _ProductDetails.cshtml Partial View, open the view file, and copy
and paste the following code. Here, you can see we are using Product as the model and
then displaying Product information.
@model PartialViewInMVC.Models.Product
<tr>
<td>
@Model?.ProductID
</td>
<td>
@Model?.Name
</td>
<td>
@Model?.Category
</td>
<td>
@Model?.Description
</td>
<td>
 183

@Model?.Price
</td>
</tr>
How to Use the Partial Views in ASP.NET Core MVC Application?
There are many methods available to render a partial view from our main view, and we are
going to discuss all those methods in detail in our next article. Now, let us understand the
syntax to render the Partial View from the Main view or child view:
 Using Html.Partial or Html.RenderPartial methods: These methods are
called within a view to render a partial view synchronously. Html.Partial
returns an IHtmlString that can be rendered in a view, while
Html.RenderPartial writes directly to the response stream, which can improve
performance. Example: @Html.Partial(“_ProductDetails”, model)
 Using Html.PartialAsync or Html.RenderPartialAsync methods: These
are the asynchronous counterparts of the above methods and are
recommended when the partial view is performing I/O
operations. Example: await Html.RenderPartialAsync(“_ProductDetails”,
model)
 Using Tag Helpers: ASP.NET Core also supports rendering partial views
using Tag Helpers, which can be more readable and easier to use, especially
for those familiar with HTML. Example: <partial name=”_ProductDetails”
model=”Model” />
So, let us render the partial view in this example using the partial helper method. To this
HTML Helper method, we need to Pass the name of the partial view as a parameter. As our
partial view, expecting the Product object, we need to pass the Product model as the
second parameter, such as @await Html.PartialAsync(“_ProductDetails”, Model). So,
modify the Details.cshtml View as follows.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
Name
</th>
 184

<th>
Category
</th>
<th>
Description
</th>
<th>
Price
</th>
</tr>
@await Html.PartialAsync("_ProductDetails", Model)
</table>
</div>
Now, run your application and see that everything is working as expected. But this time, you
can re-use this partial view wherever you want, and moreover, if you decide to change how
product details should be rendered, the only View you need to change is
the _ProductDetails.cshtml partial view. The above @Html.PartialAsync helper method
passed a Product object to the “_ProductDetails” partial view. The partial view was
dynamically rendered.

Now, let us see how we can use the same Partial View from another View. Let us first
modify the Product Controller as follows. Here, you can see we have added
the Index action method, which is going to render all the product details.
using Microsoft.AspNetCore.Mvc;
using PartialViewInMVC.Models;
namespace PartialViewInMVC.Controllers
 185

{
public class ProductController : Controller
{
private List<Product> products = new List<Product>();
public ProductController()
{
products = new List<Product>()
{
new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description
="Description 1", Price = 10m},
new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description
="Description 2", Price = 20m},
new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description
="Description 3", Price = 30m},
new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description
="Description 4", Price = 40m},
new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description
="Description 5", Price = 50m},
new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description
="Description 6", Price = 50m}
};
}
public ActionResult Index()
{
return View(products);
}
public ActionResult Details(int Id)
{
var ProductDetails = products.FirstOrDefault(prd => prd.ProductID == Id);
return View(ProductDetails);
}
}
}
 186

Next, add the Index.cshhtml view within the Views => Product folder. Once you add the
view, copy and paste the following code. You will get any data if you use the PartialAsync
within a for-each loop. So, here, instead of PartialAsync, we are using the Partial method.
@model IEnumerable<PartialViewInMVC.Models.Product>
@{
ViewData["Title"] = "Index";
}
<h4>Product List</h4>
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
Name
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Price
</th>
</tr>
@foreach (var item in Model)
{
Html.Partial("_ProductDetails", item);
}
</table>
As you can see in the above code, each loop item calls the same partial view by passing
the product object, which will act as the model in the partial view. With the above changes in
place, run the application and navigate to the Product/Index action method, and you will see
the data as expected, as shown in the image below.
 187

Microsoft does not recommend using HTML.Partial method. You might encounter
application deadlocks, in which case you will receive one warning message, as shown in
the image below.

It is saying that instead of Partial Method, please use Partial Tag helper. So, what is Tag
helper that we will discuss in our upcoming article? Now, let us use the Partial Tag helper to
render the Partial View in ASP.NET Core MVC Application.
The Partial Tag Helper achieves the same asynchronous rendering behavior as the
PartialAsync HTML Helper. So, modify the Index View of the Product Controller as follows.
The model attribute is assigned a Product instance for binding to the partial view.
@model IEnumerable<PartialViewInMVC.Models.Product>
 188

@{
ViewData["Title"] = "Index";
}
<h4>Product List</h4>
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
Name
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Price
</th>
</tr>
@foreach (var product in Model)
{
<partial name="_ProductDetails" model="product" />
}
</table>

Different Ways to Render Partial View in ASP.NET Core MVC

Different Ways to Render Partial View in ASP.NET Core MVC
In the ASP.NET Core MVC Application, we can render a partial view using the following
ways:
 189

1. Html.Partial: The Html.Partial method is used to render a partial view

synchronously. It inserts the HTML output of the partial view directly into the
parent view. You can also store the return HTML in a variable. This method is
typically used when the data needed by the partial view is already available in
the parent view. Syntax: @Html.Partial(“_PartialViewName”, model)
2. Html.RenderPartial: Similar to Html.Partial, the Html.RenderPartial renders a
partial view synchronously. The key difference is that RenderPartial writes the
output directly to the response stream. This method does not return an HTML
string but instead sends the output directly to the HTTP response, which can
improve performance in certain scenarios. Syntax:
@{ Html.RenderPartial(“_PartialViewName”, model); }
3. Html.PartialAsync: Html.PartialAsync is the asynchronous counterpart of
Html.Partial. It is used to render a partial view asynchronously, which can be
beneficial when the partial view needs to perform asynchronous operations,
such as database calls or file I/O operations, before rendering. Syntax:
@await Html.PartialAsync(“_PartialViewName”, model)
4. Html.RenderPartialAsync: Html.RenderPartialAsync is the asynchronous
version of Html.RenderPartial. It renders the partial view asynchronously and
writes the output directly to the response stream. This method is useful for
improving the performance of rendering partial views that perform
asynchronous operations. Syntax: @{ await
Html.RenderPartialAsync(“_PartialViewName”, model); }
5. Partial Tag Helper: ASP.NET Core introduced Tag Helpers to render partial
views in a more HTML-like syntax. The partial Tag Helper allows you to
include a partial view within another view. Syntax: <partial
name=”_PartialViewName” model=”Model” />
Example to Understand How to Render Partial View:
We will use the same example we created in our previous article. The following is the
Product Controller class.
using Microsoft.AspNetCore.Mvc;
using PartialViewInMVC.Models;
namespace PartialViewInMVC.Controllers
{
public class ProductController : Controller
{
private List<Product> products = new List<Product>();
public ProductController()
{
products = new List<Product>()
{
new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description
="Description 1", Price = 10m},
 190

new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description
="Description 2", Price = 20m},
new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description
="Description 3", Price = 30m},
new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description
="Description 4", Price = 40m},
new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description
="Description 5", Price = 50m},
new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description
="Description 6", Price = 50m}
};
}
public ActionResult Index()
{
return View(products);
}
public ActionResult Details(int Id)
{
var ProductDetails = products.FirstOrDefault(prd => prd.ProductID == Id);
return View(ProductDetails);
}
}
}
Next, modify the _ProductDetails.cshtml Partial View file as follows:

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:26 / 03:1110 Sec

@model PartialViewInMVC.Models.Product
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
 191

Name
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Price
</th>
</tr>
<tr>
<td>
@Model?.ProductID
</td>
<td>
@Model?.Name
</td>
<td>
@Model?.Category
</td>
<td>
@Model?.Description
</td>
<td>
@Model?.Price
</td>
</tr>
</table>
Render a Partial view using @Html.Partial() Method in ASP.NET Core
MVC:
 192

The Html.Partial() method synchronously returns an IHtmlContent that represents the HTML
content generated by the specified partial view. Since it’s synchronous, it can potentially
block the thread if the operation takes a long time.
The Html.Partial() is an HTML helper method available in
the Microsoft.AspNetCore.Mvc.Rendering namespace. Four overloaded versions of the
Partial method are available, as shown in the image below.

Parameters:
 htmlHelper: The HTML helper instance that this method extends
 partialViewName: The name of the partial view to render
 viewData: The view data dictionary for the partial view.
 model: The model for the partial view.
Returns: The partial view that is rendered as an HTML-encoded string.
To render a partial view using @Html.Partial() html helper, please modify
the Details.cshtml view of the Product controller as shown below. Here,
_ProductDetails is the name of the partial view file, and Model is the model object.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<p>Rendering the Result of Partial View</p>
@Html.Partial("_ProductDetails", Model)
<br/>
<p>Storing the Result of Partial View into a variable</p>
@{
var result = Html.Partial("_ProductDetails", Model);
}
<span>@result</span>
</div>
 193

Render a Partial view using the @Html.PartialAsync() Method in

ASP.NET Core MVC:
The Html.PartialAsync() HTML Helper Method is the async version of Html.Partial() Method.
This method asynchronously returns an IHtmlContent that represents the HTML content
generated by the specified partial view. This method is preferred over Html.Partial when the
partial view involves I/O operations, such as database calls or file reads, as it doesn’t block
the thread while these operations are complete.
The Html.PartialAsync is also an HTML helper available
in Microsoft.AspNetCore.Mvc.Rendering namespace. There are 3 overloaded versions of
this HTML.PartialAsync method, which is available as follows.

To render a partial view using @Html.PartialAsync() html helper, please modify the
Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the
name of the partial view file, and Model is the model object. Here, we must use the await
keyword as this method works asynchronously.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<p>Rendering the Result of Partial View</p>
@await Html.PartialAsync("_ProductDetails", Model)
<br/>
<p>Storing the Result of Partial View into a variable</p>
@{
var result = await Html.PartialAsync("_ProductDetails", Model);
}
<span>@result</span>
</div>
Render a Partial view using @Html.RenderPartial() Method in ASP.NET
Core MVC:
The Html.RenderPartial synchronously renders the specified partial view to the response
stream. This method does not return a value; instead, it writes the rendered HTML directly
 194

to the response’s output stream. This can be more efficient than HTML.Partial in terms of
memory usage since it doesn’t need to store the rendered HTML in an intermediary
IHtmlContent object before it’s written to the response.
The @Html.RenderPartial is also an HTML helper method for rendering a partial view. It is
available in the Microsoft.AspNetCore.Mvc.Rendering namespace. There are 4 overloaded
versions of the RenderPartial method available, as shown in the image below. You can use
any one of them as per your requirements.

Parameters:
 htmlHelper: The HTML helper instance that this method extends
 partialViewName: The name of the partial view.
 viewData: The view data for the partial view.
 model: The model for the partial view.
To render a partial view using @Html.RenderPartial() HTML helper, please modify
the Details.cshtml view of the Product controller as shown below. Here,
_ProductDetails is the name of the partial view file, and Model is the model object. This
method works synchronously.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<p>Rendering the Result of Partial View</p>
@{
Html.RenderPartial("_ProductDetails", Model);
}
</div>
Render a Partial view using @Html.RenderPartialAsync() Method in
ASP.NET Core MVC:
 195

The Html.RenderPartialAsync asynchronously renders the specified partial view to the

response stream. It is similar to Html.RenderPartial, but it performs the rendering operation
asynchronously, making it suitable for I/O-bound operations within the partial view.
The Html.RenderPartialAsync() Method is the async version of @Html.RenderPartal(),
which is also used to render a partial view. It is available in the
Microsoft.AspNetCore.Mvc.Rendering namespace. Three overloaded versions of the
RenderPartialAsync method are available, as shown in the image below.

To render a partial view using @Html.RenderPartialAsync() HTML helper, please modify the
Details.cshtml file of the Product controller as shown below. Here, _ProductDetails is the
name of the partial view file, and Model is the model object. Here, we must use the await
keyword as this method works asynchronously.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<p>Rendering the Result of Partial View</p>
@{
await Html.RenderPartialAsync("_ProductDetails", Model);
}
</div>
Rending Partial View using Partial Tag Helper in ASP.NET Core MVC
The Partial Tag Helper, introduced in ASP.NET Core, is used within a view to render a
partial view. It uses a more concise syntax compared to the Html.* methods and supports
asynchronous rendering by default. The syntax looks like <partial
name=”_PartialViewName” />, making it more readable and consistent with other tag
helpers in ASP.NET Core. This approach is often recommended for its simplicity and
modern syntax. Important features of Partial tag helper –
 Easy to use
 HTML like syntax
 The partial tag works in async mode
 Newly introduced tag helper in ASP.NET Core
To render a partial view using the partial tag helper, please modify the Details.cshtml file of
the Product controller as shown below.
 196

@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
}
<div>
<h4>Product Details</h4>
<p>Rendering the Result of Partial View</p>
<partial name="_ProductDetails" model="Model" />
</div>
Let’s discuss the details of this partial tag helper –
 Tag name: The name of the tag is partial. <partial /> is a self-closing tag
helper.
 Partial view name: We can write the name of the partial view using the name
attribute of the partial tag.
 Pass data (Model) to the partial view: We can pass the model to the partial
view using the model attribute of the partial tag.
Partial View with ViewData in ASP.NET Core MVC:
Now, let us understand how to create a partial view that will accept a model object as well
as a ViewData. So, modify the _ProductDetails.cshtml partial view as follows. As you can
see, we are using the Product model as well as a ViewData for displaying the header.
@model PartialViewInMVC.Models.Product
@{
var heading = ViewData["Header"];
}
<h2>@heading</h2>
<table class="table">
<tr>
<th>
ProductID
</th>
<th>
Name
</th>
<th>
Category
</th>
 197

<th>
Description
</th>
<th>
Price
</th>
</tr>
<tr>
<td>
@Model?.ProductID
</td>
<td>
@Model?.Name
</td>
<td>
@Model?.Category
</td>
<td>
@Model?.Description
</td>
<td>
@Model?.Price
</td>
</tr>
</table>
Next, modify the Details.cshtml view of the product controller is as follows. Here, I show
how to call the partial view using ViewData with all five approaches.
@model PartialViewInMVC.Models.Product
@{
ViewData["Title"] = "Details";
ViewData["Header"] = "Product Details";
}
<div>
 198

<p>Using Tag Helper</p>

<partial name="_ProductDetails" model="Model" view-data="ViewData" />
<p>Using Html.Partial</p>
@Html.Partial("_ProductDetails", Model, ViewData)
<p>Using Html.PartialAsync</p>
@await Html.PartialAsync("_ProductDetails", Model, ViewData)
<p>Using Html.RenderPartial</p>
@{
Html.RenderPartial("_ProductDetails", Model, ViewData);
}
<p>Using Html.RenderPartialAsync</p>
@{
await Html.RenderPartialAsync("_ProductDetails", Model, ViewData);
}
</div>
Difference Between @Html.Partial and @Html.RenderPartial in ASP.NET
Core MVC:
In ASP.NET Core MVC, both @Html.Partial and @Html.RenderPartial are used to render a
partial view within a parent view. However, they differ in the way they render the partial view
and their return types, which influences how they are used within your Razor views.
Understanding the difference between these two can help in deciding which one to use
based on your specific needs.
@Html.Partial
 Return Type: @Html.Partial returns an IHtmlString, which means it returns
the rendered HTML content of the partial view as an HTML-encoded string.
This allows the result to be stored in a variable or returned directly in a Razor
file.
 Usage: Because it returns an IHtmlString, you can use it like this in your
Razor view: @Html.Partial(“_PartialViewName”, model). The rendered HTML
from the partial view is inserted into the parent view’s output.
 Performance: It might be slightly slower in scenarios where direct writing to
the output stream is more efficient because it involves creating a string of the
rendered HTML before it’s written to the output stream.
@Html.RenderPartial
 Return Type: @Html.RenderPartial writes the rendered HTML content of the
partial view directly to the Response stream. It does not return anything (void
return type); instead, it outputs the rendered HTML directly to the page’s
output.
 Usage: Since it does not return a value, you have to call it within a code block
in your Razor view like this: @{ Html.RenderPartial(“_PartialViewName”,
 199

model); }. This means the HTML is directly streamed to the output, which can
be more efficient in terms of performance.
 Performance: Generally, @Html.RenderPartial is more efficient, especially
for larger partial views, because it avoids the overhead of generating and
then writing an IHtmlString to the output.
Note: The same differences are there between @Html.PartialAsync and
@Html.RenderPartialAsync. The only difference is that @Html.PartialAsync and
@Html.RenderPartialAsync work asynchronously, whereas @Html.Partial and
@Html.RenderPartial work synchronously.
Choosing the Right Method
 For Synchronous Operations: If the partial view rendering is CPU-bound
and expected to complete quickly, Html.Partial or Html.RenderPartial might
be suitable. However, in most cases, it’s better to default to asynchronous
methods to avoid blocking the thread.
 For Asynchronous Operations: When the partial view involves I/O-bound
operations, prefer Html.PartialAsync, Html.RenderPartialAsync, or the Partial
Tag Helper. These methods allow the thread to be released back to the
thread pool to handle other requests while waiting for the I/O operations to
complete.
 For Cleaner Syntax and Consistency: The Partial Tag Helper is often
preferred for its cleaner syntax and consistency with other tag helpers in
ASP.NET Core, making your views more readable and maintainable.

View Components in ASP.NET Core MVC

What are the View Components in ASP.NET Core MVC?
View Components in ASP.NET Core MVC are reusable components designed to
encapsulate rendering logic that can be invoked from multiple places. They are similar to
partial views, but they can have their own logic, making them suitable for creating dynamic
content that requires processing. View Components are ideal for situations where you need
to display information that requires some business logic to fetch or generate the displayed
data.
What Are All Files Available in a View Component in ASP.NET Core
MVC?
A view component typically consists of 2 files in ASP.NET Core MVC. They are as follows:
 Server-Side File (.cs file).
 Client Side File (.cshtml file)
What Should be the Location for the Files of View Components in
ASP.NET Core?
In ASP.NET Core, there is a special place for the view component’s file.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:16 / 03:1110 Sec
Server-side file (.cs): This file can be created anywhere in the project. But we generally
create a new folder (with the name Components, ViewComponents, or any other name as
per your choice) at the root level of the project and put all the view components in this new
folder.
 200

Client-side file (.cshtml): The client-side file of a view component must be placed at a
specific location.
 Location 1: If we want to call the view component from the controller’s action
method, then we need to add the view component client-side file at the
following location- /Views/{Controller Name}/Components/{View
Component Name}/{View Name}
 Location 2: If we want to call the view component from the other cshtml file,
then we need to add the view component client-side file at the following
location- /Views/Shared/Components/{View Component Name}/{View
Name}
 Location 3: If we are using a view component in Razor pages, then we need
to add the view component client-side file at the following
location- /Pages/Shared/Components/{View Component Name}/{View
Name}
Note: The name for each view component file should be Default.cshtml. But you can also
have other names for your view component client-side file. But the recommended one is
Default.cshtml
How to invoke a View Component from a View File in ASP.NET Core
MVC?
To use a view component, you can invoke it from a view using
the Component.InvokeAsync HTML Helper method, passing the name of the component
and any necessary parameters. View components do not use model binding, so you need
to pass any required data explicitly. We can invoke the view component from a view file by
using the following syntax:
@await Component.InvokeAsync(“Name of view component”, {Anonymous Type
Containing Parameters});
How to invoke a View Component from a View File using Tag helper
ASP.NET Core MVC?
View components can also be invoked using Tag Helper on any view (cshtml) file using the
following syntax.
<vc:[view-component-name]
parameter1=”parameter1 value”
parameter2=”parameter2 value”>
</vc:[view-component-name]>
Example to Understand View Component in ASP.NET Core MVC Web
Application
We want to display top products on the web page using the View Component. Let us see
the step-by-step process to implement this using the View Component. First, create a new
ASP.NET Core Web Application using the Model-View-Controller Project template with the
name ViewComponentInMVC.
Product Model:
Create a class file named Product.cs within the Models folder, and then copy and paste the
following code. This is going to be our model, which will hold the product information.
namespace ViewComponentInMVC.Models

{
 201

public class Product

public long ProductID { get; set; }

public string? Name { get; set; } = null!;

public string Category { get; set; } = null!;

public string Description { get; set; } = null!;

public decimal Price { get; set; }

}
ProductRepository File:
Create a Class file named ProductRepository.cs within the Models folder, and then copy
and paste the following code. The code for getting the top products from the database is
written in the ProductRepository.cs file. You will get the data from the database in real time,
but here, we have hard-coded it.
namespace ViewComponentInMVC.Models

public class ProductRepository

public async Task<List<Product>> GetTopProductsAsync(int count)

IEnumerable<Product> products = new List<Product>()

new Product { ProductID =1, Name ="Product 1", Category = "Category 1", Description
="Description 1", Price = 10m},

new Product { ProductID =2, Name ="Product 2", Category = "Category 1", Description
="Description 2", Price = 20m},
 202

new Product { ProductID =3, Name ="Product 3", Category = "Category 1", Description
="Description 3", Price = 30m},

new Product { ProductID =4, Name ="Product 4", Category = "Category 2", Description
="Description 4", Price = 40m},

new Product { ProductID =5, Name ="Product 5", Category = "Category 2", Description
="Description 5", Price = 50m},

new Product { ProductID =6, Name ="Product 6", Category = "Category 2", Description
="Description 6", Price = 50m}

};

//We are Delaying the Execution for 1 Seconds to get the Data from the database

await Task.Delay(TimeSpan.FromSeconds(1));

return products.Take(count).ToList();

}
View Component Server-Side File in ASP.NET Core MVC:
Now, we need to create the view component server-side file. In the project, we can add the
server-side file at any location (let’s say /ViewComponents folder). So, in the project root
directory, create a folder with the name ViewComponents. Suppose the name of the view
component server-side file is TopProducts; then we must add a suffix ViewComponent to
its name. Hence, the final name of the view component server-side file will
be TopProductsViewComponent.
We typically create a class that inherits from ViewComponent. It contains the logic to
generate the content. This class can return a view (HTML) using the View method, similar to
how actions in controllers work. The Invoke Method is the entry point for the View
Component, which can be named Invoke or InvokeAsync for asynchronous operations. This
method contains the logic to generate the data and optionally select a view to render it.
So, create a class file named TopProductsViewComponent.cs within
the ViewComponents folder and copy and paste the following code. The code is self-
explained, so please read the comment line for a better understanding.
using Microsoft.AspNetCore.Mvc;

using ViewComponentInMVC.Models;
 203

namespace ViewComponentInMVC.ViewComponents

//Create a Class, and it should inherit from ViewComponent class

public class TopProductsViewComponent : ViewComponent

//The Invoke method for the View component

public async Task<IViewComponentResult> InvokeAsync(int count)

// Your logic for preparing data

ProductRepository productRepository = new ProductRepository();

var products = await productRepository.GetTopProductsAsync(count);

return View(products);

//public IViewComponentResult Invoke(int count)

//{

// // Your logic for preparing data

// ProductRepository productRepository = new ProductRepository();

// var products = productRepository.GetTopProductsAsync(count).Result;

// return View(products);

//}

}
In the above example:
 TopProductsViewComponent: The TopProductsViewComponent is
inherited from the ViewComponent class. This inheritance makes
 204

TopProductsViewComponent a View Component, providing it with the

capabilities to execute logic and return a view for rendering.
 InvokeAsync Method: The InvokeAsync method is the entry point for the
View Component and can be called when the component is invoked from a
Razor view. The method is asynchronous, allowing for non-blocking I/O
operations, such as database calls.
 return View(products);: Returns a view for rendering, passing items as the
model. The View method is a helper method inherited from ViewComponent,
and it looks for a Razor view that matches the View Component’s name. The
items model will be passed to the view, which can then be used to render
HTML.
View Component Client-Side File in ASP.NET Core MVC:
We are using the ASP.NET Core MVC Application and want to invoke the View Component
from a view file. Hence, we need to place the client-side file at the following
location /Views/Shared/Components/{ViewComponentName}/{ViewName}.cshtml. In
our example, the View Component Name is TopProducts, and the view name is going to
be Default.cshtml. So, we need to create the View in the following location.
/Views/Shared/Components/TopProducts/Default.cshtml
Once you create the Default.cshtml view file, your Views folder should look as shown
below.

Now, open Default.cshtml view file and then copy and paste the following code into it.
@model IEnumerable<Product>

<div class="row">

<div>

<h4>Product Details</h4>

<table class="table">
 205

<tr>

<th>

ProductID

</th>

<th>

Name

</th>

<th>

Category

</th>

<th>

Description

</th>

<th>

Price

</th>

</tr>

@foreach (var product in Model)

<tr>

<td>

@product?.ProductID

</td>

<td>
 206

@product?.Name

</td>

<td>

@product?.Category

</td>

<td>

@product?.Description

</td>

<td>

@product?.Price

</td>

</tr>

</table>

</div>

</div>
With this, our view component is completed and ready to use.
Invoking the View Component in ASP.NET Core MVC:
Now, we need to invoke it from another view file. So, modify the Index.cshtml file of Home
Controller as follows. Here, TopProducts is the name of the View Component, and
the count is the parameter with a value of 3. You can assign any value to the count
parameter. If you check the View Component CS class file, you will see the InvokeAsync or
Invoke method taking one integer parameter named count, and here, we pass a value 3 to
that count parameter.
@{

ViewData["Title"] = "Home Page";

<div class="text-center">
 207

@await Component.InvokeAsync("TopProducts", new { count = 3})

</div>
With the above changes, run the application, and you should get the following output.

How Does View Component Work in ASP.NET Core MVC?

 Invocation: View Components can be invoked from a view by calling
the Component.InvokeAsync method, specifying the name of the View
Component and any required parameters.
 Execution: When invoked, the runtime finds the corresponding View
Component class and executes its Invoke or InvokeAsync method. This
method can perform actions like fetching data and then preparing a model to
be passed to the view.
 Rendering: After the Invoke or InvokeAsync method is executed, the
framework renders the View Component’s view, passing it into the model. The
rendered HTML is then included in the parent view’s output.
Invoke a View Component from a view file using Tag helper:
Please update the ViewImport file as follows to include the required tag helpers. Here,
ViewComponentInMVC is the project name.
@using ViewComponentInMVC

@using ViewComponentInMVC.Models

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@addTagHelper *, ViewComponentInMVC

@addTagHelper *, ViewComponentInMVC.TagHelpers
 208

Now, if you want to invoke the View Component using Tag Helper, then modify
the Index.cshtml file of the Home controller as follows:
@{

ViewData["Title"] = "Home Page";

<div class="text-center">

<vc:top-products count="3"></vc:top-products>

</div>
View Components Real-Time Examples in ASP.NET Core MVC:
To avoid code duplication in ASP.NET Core MVC Web Applications, the View Components
can be used in various areas such as the Navigation Menus, Login Panel, Billing and
Shipping Address, Shopping Cart, etc. View components can be used to create the
following features:
 Login Panel.
 Dynamic Navigation Menu (Based on role etc.).
 Get some related data for a page. (Like Related posts, Related books).
 Shopping Cart.
 Shipping and Billing Address.
 Any content visible on the side of the Web Page, etc.
View Component vs. Partial View in ASP.NET Core MVC
In ASP.NET Core MVC, View Components and Partial Views are used to create reusable
pieces of Web UI, allowing developers to avoid duplicating markup across different views.
However, they serve different purposes and come with their own features, making them
suitable for different scenarios.
View Component in ASP.NET Core MVC
View Components are intended for more complex scenarios where you need to execute
some logic before rendering the HTML. They are a combination of a C# class that handles
the logic and a Razor view that generates the HTML markup. View Components are not
part of the MVC request life cycle, which means they cannot directly respond to HTTP
requests. Instead, they are invoked from within a view and can be used to render a portion
of a page’s response with its own logic.
View Components are intended to be used in situations where you need a component that
can perform actions, not just display static HTML. For example, a View Component might
display a dynamically generated menu, a shopping cart summary, or widgets that display
complex data.
Partial View in ASP.NET Core MVC
Partial Views, on the other hand, are more straightforward. They are essentially segments
of Razor markup that can be rendered within other views. Unlike View Components, Partial
Views do not have their own logic. They depend on the data provided to them by the view
that renders them, typically through model binding or ViewData/ViewBag.
 209

Partial views are best for static or markup-heavy fragments without additional processing or
data fetching. They are also best for static content reused in multiple places, such as
headers, footers, or reusable forms.
Key Differences Between View Component and Partial View ASP.NET
Core MVC
 Complexity and Functionality: View Components are more complex and
can encapsulate both logic and rendering, making them suitable for
components that require server-side processing. Partial Views are better for
scenarios where you need to refactor or reuse the visual parts of views
without additional logic, i.e., ideal for static content.
 Invocation: View Components are invoked from views or layouts using C#
code, can accept parameters, and can be considered more like mini-
controllers with their own logic. On the other hand, Partial Views are typically
invoked with Html.Partial or Html.RenderPartial methods in Razor syntax rely
on the parent view’s model or ViewData for data.

Razor View Engine and Razor Syntax in ASP.NET Core

What is Razor View Engine?
The Razor View Engine is a key component of ASP.NET Core. It provides a powerful and
efficient way of generating HTML content dynamically. The Razor View Engine also offers a
way to embed server-based code into web pages using an HTML-like template syntax.
How Does the Razor View Engine Work?
The Razor view engine processes Razor markup within views (HTML templates) to
generate dynamic HTML content sent to the client’s web browser. It allows developers to
embed C# code directly into HTML, enabling the creation of dynamic and data-driven web
pages. Here’s how the Razor view engine works step by step:
View Creation and Markup:
 Developers create views using Razor syntax. These views contain a mix of
HTML markup and embedded C# code.
 Views may also include placeholders for dynamic data from the model or
other sources.
Client Request and Controller Action:
 When a user makes a request for a specific URL, the ASP.NET Core MVC
framework’s routing system maps the request to a specific controller action.
 The controller action retrieves any necessary data from databases, services,
or other sources.
Rendering Process:
 The controller action selects the appropriate view and passes the data (the
model) to it.
 The Razor view engine processes the view, combining the HTML markup
with the embedded C# code.
C# Code Execution:
 The Razor view engine executes the embedded C# code in the view. This
code can include logic, loops, conditionals, variable assignments, and
function calls.
HTML Generation:
 210

 As the Razor engine processes the view, it generates dynamic HTML content
by evaluating the embedded C# code and producing corresponding HTML
elements.
 Data from the model is inserted into the HTML at the appropriate locations.
Layout Application (Optional):
 If a layout is specified for the view, the Razor view engine applies the layout’s
structure around the generated HTML content. Layouts allow you to define a
consistent structure for your pages (e.g., headers, footers, navigation) while
leaving the content area flexible.
Final HTML Output:
 The Razor view engine generates the final HTML output, including the
processed C# code, dynamic data, and layout structure.
Response to Client:
 The generated HTML content is sent to the client’s web browser as the HTTP
response.
Client Rendering:
 The client’s browser receives the HTML response and renders the page,
displaying the dynamic content and UI elements.
 The browser also processes any JavaScript or CSS included in the view.
Throughout this process, the Razor view engine manages the seamless integration of C#
code and HTML markup, resulting in a dynamic and interactive user interface. This
approach helps developers maintain clean code separation, allowing them to focus on
building a responsive and feature-rich web application without compromising maintainability.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:14 / 03:1110 Sec
What is Razor Markup?
Razor Markup refers to the syntax used in Razor view templates in ASP.NET web
applications to combine server-side code with HTML markup. Razor Markup allows
developers to embed C# code directly within HTML, making generating dynamic and data-
driven content for web pages easier. The Razor Markup syntax is designed to be concise,
readable, and intuitive, enabling seamless integration of code and markup.
The Controller in ASP.NET Core MVC invokes the View by passing the data to render. The
Views must be able to process the data and generate a response. This is done using the
Razor markup, which allows us to use C# code in an HTML file. The Razor View Engine
processes these markups to generate the HTML.
Files containing Razor markup generally have a .cshtml file extension. Razor syntax is
shorter, simpler, and easy to learn, as it uses C# or Visual Basic. Visual Studio IntelliSense
support also helps with Razor syntax.
Example to Understand Razor Syntax in ASP.NET Core MVC:
First, create a new ASP.NET Core Web Application using the Model-View-Controller Project
template with the name RazorSyntaxDemo. Then, create a class file with the
name Product.cs within the Models folder and copy and paste the following code.
namespace RazorSyntaxDemo.Models
{
public class Product
 211

{
public long ProductID { get; set; }
public string? Name { get; set; } = null!;
public string Category { get; set; } = null!;
public string Description { get; set; } = null!;
public decimal Price { get; set; }
}
}
Razor Syntax in ASP.NET Core MVC:
The Razor uses the @ symbol to switch from HTML markup to the C# code. The following
are the two ways by which you can achieve the transitions.
1. Using Razor code expressions
2. Using Razor code blocks.
These expressions are evaluated by the Razor View Engine and written to the response.
Razor Code Block Syntax in ASP.NET Core MVC:
The Razor code blocks start with the @ symbol followed by curly braces. You can use code
blocks anywhere in the markup. A Razor code block can be used to manipulate a model,
declare variables, set local properties on a view, etc. However, it would be best if you did
not use it for business logic.
Now, open the index.cshtml file of Home Controller and copy and paste the following code
into it.
<h3>Code Block</h3>
@{
var greeting = "Welcome to ASP.NET Core MVC!";
var weekDay = DateTime.Now.DayOfWeek;
ViewData["Title"] = "Home Page";
}
@{
var product = new RazorSyntaxDemo.Models.Product()
{
ProductID = 1000,
Name = "Laptop",
Description= "Its a Gaming Laptop",
Category = "Electronics",
Price = 10000
};
 212

}
First, we have created a Razor code block beginning with a @ symbol and { } curly
brackets. Inside the Curly brackets, we have regular C# code, which declares greeting and
weekDay Variables as well as a ViewData to hold the Title property. The Second Razor
Code block creates a product variable, which is a new instance of the Product model class.
Razor Code Expression Syntax in ASP.NET Core MVC
The Razor Code expressions start with @ and are followed by C# code. The Code
expression can be either Implicit or Explicit.
Implicit Razor Expressions
Implicit Razor expressions start with @ followed by C# code. In the below example, the
codes @greeting, @DateTime.Now, and @WeekDay are treated as Implicit Razor
expressions. Space is not allowed in the Code expression, as it is used to identify the end of
the expression. The Razor View engine evaluates the expressions, and the result is
inserted in their place.
<h3>Code Block</h3>
@{
var greeting = "Welcome to ASP.NET Core MVC!";
var weekDay = DateTime.Now.DayOfWeek;
ViewData["Title"] = "Home Page";
}
@{
var product = new RazorSyntaxDemo.Models.Product()
{
ProductID = 1000,
Name = "Laptop",
Description= "Its a Gaming Laptop",
Category = "Electronics",
Price = 10000
};
}
<h3>Code Expression</h3>
<p>@greeting</p>
<p>@DateTime.Now</p>
<p>Today is : @weekDay thank you </p>
<p>Name : @product.Name</p>
<p>Description : @product.Description</p>
<p>Price : @product.Price</p>
 213

Now, run the application, and you should see the following output.

Explicit Razor Expressions

Explicit Razor expressions start with @ followed by (). Any content within the () parenthesis
is evaluated and rendered to the output.
<h3>Code Block</h3>
@{
var greeting = "Welcome to ASP.NET Core MVC!";
var weekDay = DateTime.Now.DayOfWeek;
ViewData["Title"] = "Home Page";
}
@{
var product = new RazorSyntaxDemo.Models.Product()
{
ProductID = 1000,
Name = "Laptop",
Description= "Its a Gaming Laptop",
Category = "Electronics",
Price = 10000
 214

};
}
<h3>Code Expression</h3>
<p>@(greeting)</p>
<p>@(DateTime.Now)</p>
<p>Today is : @(weekDay) thank you </p>
<p>Name : @(product.Name)</p>
<p>Description : @(product.Description)</p>
<p>Price : @(product.Price)</p>
Now, run the application, and you should see the following output.

IntelliSense Support in Razor Syntax

The image below shows how the Razor markup is used inside an HTML page and the
Intelligence support from Visual Studio.
 215

Using Directive
The @using directive works similarly to the C# using directive and allows you to import
namespaces and the RazorSyntaxDemo.Models can be imported as shown below. Here,
you don’t need to need the statement with a semicolon.
@using RazorSyntaxDemo.Models
And then, we can use var product = new Product() instead of var product = new
RazorSyntaxDemo.Models.Product() as follows:
@using RazorSyntaxDemo.Models
<h3>Code Block</h3>
@{
var greeting = "Welcome to ASP.NET Core MVC!";
var weekDay = DateTime.Now.DayOfWeek;
ViewData["Title"] = "Home Page";
}
@{
var product = new Product()
{
ProductID = 1000,
Name = "Laptop",
Description= "Its a Gaming Laptop",
 216

Category = "Electronics",
Price = 10000
};
}
Variable Declaration using Razor Syntax in ASP.NET Core MVC
The Variables are declared using the var keyword or using the C# data type. The int, float,
decimal, bool, DateTime & string keywords can be used to store strings, numbers, dates,
etc. The variables are inserted directly into a page using @.
<h3>Variables </h3>
<!-- Storing a string -->
@{
string message = "Welcome to ASP.NET Core MVC";
}
<!—Storing date and integer-->
@{
DateTime date = DateTime.Now;
int Number = 100;
}
<p>@message</p>
<p> The current date is @date</p>
<p>Numbers : @Number</p>
Now, run the application, and you should see the following output.
 217

Strings are enclosed in double quotation marks. To use a double quotation mark inside the
string, use a verbatim string literal. The verbatim string is prefixed with the @ symbol and
repeats the quotation mark.
@{
var helloWorld = @"Hello ""World""";
}
<p>@helloWorld</p>
Similarly, backslash characters can be printed using the same technique.
@{
var Path = @"C:\Windows\";
}
<p>The path is: @Path</p>
You can print @ in HTML by repeating (Escape) the @ symbol as shown below.
@{
var symbol = "You can print @ in html";
}
<p>The @@symbol is: @symbol</p>
So, modify the Index view as follows:
@{
var helloWorld = @"Hello ""World""";
}
<p>@helloWorld</p>
@{
var Path = @"C:\Windows\";
}
<p>The path is: @Path</p>
@{
var symbol = "You can print @ in html";
}
<p>The @@symbol is: @symbol</p>
Now, run the application, and you should see the following output.
 218

Comments
Use @* *@ to place comments
@*This is comment*@
HTML Elements inside the code block
The Razor Engine Correctly Identifies any HTML Elements inside the Razor code block, as
shown below.
@{
<p>Hello from the Code block</p>
}
Single line text
You can output the literal values without the HTML element by prefixing it with @: and @:
used to define the single line of literal values.
@{
@:Hello from the Code block
}
Multiline text
For the multiline text use the <text> </text> element
@{
<text>
Multiline text 1
Multiline text 2
Multiline text 3
</text>
}
 219

Conditional Statements
The Razor engine is able to process conditional statements like if and Switch statements.
If and Else Conditions
If Condition is used to render a section based on a condition as shown below.
@{
int value = 200;
}
@if (value > 100)
{
<p>Value is greater than 100</p>
}
else
{
<p>Value is less than 100</p>
}
Or you can use the following code.
@{
var value = 200;
if (value > 100)
{
<p>The value is greater than 100</p>
}
else
{
<p>This value is less than 100</p>
}
}
Switch Statements in Razor View
A switch statement can insert a section into HTML based on a number of conditions.
@{
var value = 200;
}
@switch (value)
{
 220

case 0:
@: value is Zero
break;
case 100:
<p>Value is 100 </p>
break;
case 200:
<p>Value is @value </p>
break;
case 300:
<text>Value is 300</text>
break;
default:
<p>Invalid Value </p>
break;
}
Loops
For loop
The loops are used to repeat a code block for,
@for (int i = 0; i < 5; i++)
{
<span> @i </span>
}
Foreach loop
The best use case of a for-each loop is to loop through a collection object and display the
result inside a table.
@using RazorSyntaxDemo.Models
@{
var productList = new List<Product>()
{
new Product() { ProductID = 1001, Name = "Laptop", Price = 1000 },
new Product() { ProductID = 1002, Name = "Desktop", Price = 2000 },
new Product() { ProductID = 1002, Name = "Mobile", Price = 3000 }
};
 221

}
<table>
<thead>
<tr><td>ProductID</td><td>Name</td><td>Price</td></tr>
</thead>
@foreach (Product product in productList)
{
<tr>
<td>@product.ProductID</td>
<td>@product.Name</td>
<td>@product.Price</td>
</tr>
}
</table>
While loop:
<h3>While loop</h3>
@{
var r = 0;
while (r < 5)
{
r += 1;
<span> @r</span>
}
}

How to Install Bootstrap in ASP.NET Core MVC

Application
In this article, I am going to discuss How to Install Bootstrap in ASP.NET Core MVC Web
Application. Our previous article discusses Razor View Engine and Razor Syntax in
ASP.NET Core MVC Web Applications. As part of this article, I am going to discuss the
following pointers.
1. Different Tools to Install Client-Side Packages in ASP.NET Core.
2. What is Library Manager or Libman in ASP.NET Core?
 222

3. How to Check and Upgrade the Version in Visual Studio?

4. How to Install Bootstrap in ASP.NET Core Using Library Manager?
5. What is the libman.json file in ASP.NET Core?
6. How to Clean and Restore Client-Side Libraries Using Libman in
ASP.NET Core?
7. How to Uninstall or Update a Client-Side Library using the libman.json
file?
Different Tools to Install Client-Side Packages in ASP.NET Core:
You can use many tools to install client-side packages, such as jQuery and Bootstrap, using
Visual Studio. Some of the popular tools are as follows:
1. Bower
2. NPM
3. WebPack, etc.
But, here in this article, I will not use any of the above tools; instead, we will use Library
Manager, known as LibMan, to install the client-side packages in ASP.NET Core MVC
Application. In our upcoming article, I will show you how to install the client-side packages
using Bower, NPM, and WebPack.
What is Library Manager or Libman in ASP.NET Core?
The Library Manager or LibMan is one of the most popular lightweight, client-side library
manager tools. This tool is used to download client-side libraries and frameworks such as
Bootstrap and jQuery from a file system or a CDN (Content Delivery Network). In order to
use Library Manager, you should have Visual Studio 2017 version 15.8 or later.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:12 / 03:1110 Sec
How to Check and Upgrade the Version in Visual Studio?
In order to check the Visual Studio Version, you need to follow the below steps.
Click on the “Help” menu and then select the “About Microsoft Visual Studio” option from
the context menu. This will open the “About Microsoft Visual Studio” Window, which
shows the version number of Visual Studio in the image below. I have installed Visual
Studio 2022 on my machine with Version 17.6.4.
 223

How to Install Bootstrap in ASP.NET Core Using Library Manager?

You must follow the steps below to install Bootstrap in ASP.NET Core MVC Application
using the Library Manager (Libman).
1. Right-click on the “Project Name” in the Solution Explorer and then
select Add > Client-Side Library, which will open the “Add Client-Side
Library” Window.
2. Leave the default provider as it is, which “cdnjs” is in this case. The other
providers are filesystem, jsdelivr, and unpkg.
3. In the “Library” text box, type “twitter-bootstrap“. You can also get
intelligence support once you start typing. Once you select the matching
entry, then it tries to install the latest version of Bootstrap. However, if you
want, you can manually type the version number. Here, we are installing the
latest version of Bootstrap, i.e. ([email protected]).
4. There are two radio buttons to select whether you to include “All library files”
or “Choose Specific files“. If you select the “All library files” radio button, all
the files will be downloaded. On the other hand, if you select the “Choose
Specific files” radio button, then you need to check the selected checkboxes
as per your requirement. Here I am selecting the “All library files” radio
button.
5. In the “Target Location” text box, specify the folder location where you want
the library files to be installed. By default, the static files are only served from
the wwwroot folder. I am going with the default location, i.e.,
“wwwroot/lib/twitter-bootstrap/”.
6. Finally, click on the “Install” button, as shown in the image below.
 224

Once it is successfully installed, then you will find two things. One is the libman.json file,
and the second one is the required bootstrap files. Please have a look at the following
image.

What is the Libman.json file in ASP.NET Core MVC?

The libman.json file is the Library Manager manifest file. You will find the following code in
the libman.json file.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/twitter-bootstrap/"
}
]
 225

}
As you can see in the above code, we have an entry for the Bootstrap library that we just
installed using Libman. It is also possible to install client-side libraries like Bootstrap and
jQuery by editing the above manifest file.
How to Clean Client-Side Libraries using LibMan in ASP.NET Core?
If you want to clean the library files created using the Library Manager, right-click on the
libman.json file and select the “Clean Client-Side Libraries” option from the context menu,
as shown in the below image.

Once you click on the “Clean Client-Side Libraries” option, then it will delete all the library
files from the respective destination folder. The point that you need to remember is that it
will only delete the files from the folder but not in the libman.json file. Please look at the
following image and see the Twitter-bootstrap folder; its files are deleted, but the
libman.json file is still there.
 226

How to Restore Client-Side Libraries using Libman in ASP.NET Core?

If you want to restore the deleted files, you need to right-click on the libman.json file and
select the “Restore Client-Side Libraries” option from the context menu, as shown in the
image below.

Once you click on the “Restore Client-Side Libraries” option, it will again download and
install the required library files into the specified destination folder, as shown in the image
below.
 227

How to Add a Library using the libman.json file?

Now, we need to add the jQuery Library, but not using the way we add Bootstrap. So,
basically, we want to add the jQuery library using the libman.json file. To do so, modify the
libman.json file as follows.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/twitter-bootstrap/"
},
{
"provider": "cdnjs",
 228

"library": "[email protected]",
"destination": "wwwroot/lib/jqueryui/"
}
]
}
Then right-click on the libman.json file and select the “Restore Client-Side Libraries”
option from the context menu, and it should add the respective jQuery library, as shown in
the image below.

How to Uninstall or Update a Client-Side Library using Libman.json File

in ASP.NET Core MVC?
If you want to uninstall or update a client-side library using the libman.json file, then you
need to follow the below steps.
1. Open the libman.json file.
2. Click on the client-side library which you want to uninstall or update
3. A light bulb icon will appear on the left side
4. Click on the light bulb icon, and then you will see the options of whether to
update or uninstall that specific client-side library, as shown in the below
image.
 229

Another approach to uninstall a client-side library is to remove the entry from the
libman.json file, and upon saving the file, the respective client-side libraries are uninstalled
from the respective folder location. For example, if we modify the libman.json file as shown
below, you will immediately see the respective library being deleted from the wwwroot
project folder.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/twitter-bootstrap/"
}
]
}
Now, you can check the lib folder, which is inside the wwwroot folder, and you should see
that the JqueryUI folder was deleted, as shown in the below image.
 230

Another approach to upgrade or downgrade a client-side library is to change the version

number directly in the libman.json file, as shown in the below image. The respective client-
side library will be updated to the version you modified after saving the file. While updating
the version number, you will also get the visual studio intelligence shown in the image
below.

How to Use Bootstrap in ASP.NET Core MVC

Application
In this article, I am going to discuss How to Use Bootstrap in ASP.NET Core MVC Web
Applications. Please read our previous article before proceeding to this article, where we
discussed How to Install Bootstrap in ASP.NET Core MVC Application using Library
Manager (LibMan). Here, I will discuss how to use Bootstrap as well as how to create and
use custom CSS in a view.
Creating a New ASP.NET Core MVC Application:
 231

First, create a new ASP.NET Core MVC Application with the

name FirstCoreMVCApplication using Model-View-Controller Project Template. Once you
create the Project, add Bootstrap to your application using the Library Manager (Libman).
Our previous article discussed how to install BootStrap into ASP.NET Core MVC
Application. So, you must follow the steps below to install Bootstrap on your application.
1. Right-click on the “Project Name” in the Solution Explorer and then
select Add > Client-Side Library, which will open the “Add Client-Side
Library” Window.
2. Leave the default provider as it is, which “cdnjs” is in this case. The other
providers are filesystem, jsdelivr, and unpkg.
3. In the “Library” text box, type “twitter-bootstrap“. You can also get
intelligence support once you start typing. Once you select the matching
entry, then it tries to install the latest version of Bootstrap. However, if you
want, you can manually type the version number. Here, we are installing the
latest version of Bootstrap, i.e. ([email protected]).
4. There are two radio buttons to select whether you to include “All library files”
or “Choose Specific files“. If you select the “All library files” radio button, all
the files will be downloaded. On the other hand, if you select the Choose
Specific Files radio button, you need to check the selected checkboxes as
per your requirement. Here, I am selecting the “All library files” radio button.
5. In the “Target Location” text box, specify the folder location where you want
the library files to be installed. By default, the static files are only served from
the wwwroot folder. I am going with the default location, i.e.,
“wwwroot/lib/twitter-bootstrap/”.
6. Finally, click on the “Install” button, as shown in the image below.
 232

Once it is successfully installed, then you will find two things. One is the libman.json file,
and the second one is the required bootstrap files. Please have a look at the following
image.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:17 / 03:1110 Sec

Creating a Custom Style Sheet in ASP.NET Core MVC Application:

First, create a folder with the name CSS within the wwwroot folder. As we are creating the
ASP.NET Core Application using the Model-View-Controller template, so by default, the
CSS folder should be there inside the wwwroot folder. All the custom CSS files are going to
be created within this folder. Once you have the CSS folder, let’s add a CSS file with the
name MyCustomStyleSheet.css.
To create a style sheet, right-click on the CSS folder and then select “Add – New Item”
from the context menu. Then search for CSS and select Style Sheet, provide a meaningful
name, i.e., MyCustomStyleSheet.css, and finally click the Add button as shown in the
image below.
 233

Once you add the MyCustomStyleSheet.css file, then your wwwroot folder should look as
shown below.

Note: All the custom style sheets for our application need to be placed within
the MyCustomStyleSheet.css file. So, open the MyCustomStyleSheet.css file and copy
 234

and paste the following code into it. We are going to use the custom .btn style sheet in our
application.
.btn {
width: 80px;
}
How to Use Bootstrap in ASP.NET Core MVC Application?
In order to use Bootstrap, first, you need to include a reference to the bootstrap.css file. You
can add the reference on each individual view. But as we are going to use the Layout file,
we will add a reference to the bootstrap.css file in the _Layout.css file. Along
with bootstrap.css, we are also including a reference to our custom style sheet,
i.e., MyCustomStyleSheet.css.
Modifying _Layout.cshtm file:
Please modify the Layout.cshtml file, which is present in the shared folder, as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/MyCustomStyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="container">
@RenderBody()
</div>
</body>
</html>
As you can see in the HTML code, we have included references for both bootstrap.css as
well as MyCustomStyleSheet.css files. Here, we also use the bootstrap container class to
position the elements on the page.
Creating Models:
Within the Models folder, add a class file with the name Student.cs and then copy and
paste the following code into it. As you can see, this is a very simple Student Model having
only five properties holding the Student Id, Name, Branch, Section, and Gender.
namespace FirstCoreMVCApplication.Models
{
public class Student
 235

{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
public string? Section { get; set; }
public string? Gender { get; set; }
}
}
Modifying the Home Controller:
Next, modify the Home Controller as shown below. As you can see in the below code, we
have created two action methods. The Index action method returns a list of students to the
view, whereas the Details action method takes the student id as a parameter and then
returns that student information to the view. Here, we have hard-coded the data, but in real-
time, you will get the data from a database.
using FirstCoreMVCApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace FirstCoreMVCApplication.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
//Create a List of Students
//In Real-Time, you will get the data from the database
List<Student> listStudents = new List<Student>()
{
new Student() { StudentId = 101, Name = "James", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 102, Name = "Smith", Branch = "ETC", Section = "B", Gender
= "Male" },
new Student() { StudentId = 103, Name = "David", Branch = "CSE", Section = "A", Gender
= "Male" },
new Student() { StudentId = 104, Name = "Sara", Branch = "CSE", Section = "A", Gender =
"Female" },
 236

new Student() { StudentId = 105, Name = "Pam", Branch = "ETC", Section = "B", Gender =
"Female" }
};
//Pass the Student List to the View to make the view as a Strongly Typed View
return View(listStudents);
}
public ViewResult Details(int Id)
{
//Here, we have hard coded the student details
//In Real-Time, you will get the student information from the database
Student studentDetails = new Student() { StudentId = Id, Name = "James", Branch = "CSE",
Section = "A", Gender = "Male" };
//Pass the Student model to the View to make the view as a Strongly Typed View
return View(studentDetails);
}
}
}
Main Method of the Program class:
Next, modify the Main method of the Program class as shown below. The point that you
need to remember is to serve Bootstrap, we need to add the static files middle layer before
the MVC middle layer in the request processing pipeline. Further, you can notice we are
making the Home Controller Index action method the default route for our application.
namespace FirstCoreMVCApplication
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
// Add MVC services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
 237

{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
//Adding Static Files Middleware to Serve the Static Files
//This Should be added before the MVC Middleware
app.UseStaticFiles();
//This should be included we want to use End Point Routing
app.UseRouting();
app.UseAuthorization();
//Adding MVC Middleware to the Request processing Pipeline
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
}
}
}
Modifying the Index View of the Home Controller:
Please modify the Index view, which is present inside the Home Controller, as shown
below. As you can see in the below HTML, we are using Bootstrap in-built classes like
class=”table-responsive”, class=”table”, class=”text-center” and class=”btn btn-primary”.
Here, we are not going to explain the Bootstrap class. Instead, I am only going to show you
how to use Bootstrap in ASP.NET Core MVC Application.
@model List<FirstCoreMVCApplication.Models.Student>
@{
ViewBag.Title = "Student List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="table-responsive">
<table class="table">
<thead>
 238

<tr>
<th>ID</th>
<th>Name</th>
<th>View</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@foreach (var student in Model)
{
<tr>
<td>@student.StudentId</td>
<td>@student.Name</td>
<td class="text-center"><a href="#" class="btn btn-primary">View</a></td>
<td class="text-center"><a href="#" class="btn btn-primary">Edit</a></td>
<td class="text-center"><a href="#" class="btn btn-danger">Delete</a></td>
</tr>
}
</tbody>
</table>
</div>
Creating Details View inside the Home Folder:
Next, create a view with the name Details.cshtml and copy and paste the following code. As
you can see in the below HTML, we are using Bootstrap in-built classes such as class=”row
justify-content-center m-3″, class=”col-sm-8″, lass=”card”, class=”card-header text-center”,
class=”card-body text-center”, lass=”card-footer text-center”, class=”btn btn-primary”, etc.
@model FirstCoreMVCApplication.Models.Student
@{
ViewBag.Title = "Student Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row justify-content-center m-3">
<div class="col-sm-8">
 239

<div class="card">
<div class="card-header text-center">
<h1>@Model?.Name</h1>
</div>
<div class="card-body text-center">
<h4>Studnet ID : @Model?.StudentId</h4>
<h4>Branch : @Model?.Branch</h4>
<h4>Section : @Model?.Section</h4>
<h4>Gender : @Model?.Gender</h4>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-primary">Back</a>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Delete</a>
</div>
</div>
</div>
</div>
That’s it. Save the changes, run the application, and then visit the Home/Index or the root
URL, and you should get the following output.

Next, visit Home/Details/10 to get the following output.

 240

Action Results in ASP.NET Core MVC

Ad

Action Results in ASP.NET Core MVC

In this article, I will give an overview of the Action Results in ASP.NET Core MVC Web
Application with Examples. In ASP.NET Core MVC, there are many different types of Action
Results. Each action result returns a different output format. At the end of this article, you
will understand the different types of Action Results and when to use which action results in
ASP.NET Core MVC Application.
What are Action Methods in ASP.NET Core MVC?
Before understanding Action Results, let’s understand Action Methods in ASP.NET Core
MVC. All the public methods inside a Controller that respond to Incoming URLs or HTTP
Requests are known as Action Methods. When creating an Action Method, we must follow
the below rules:
 The action method must be public.
 It cannot be overloaded.
 It cannot be a static method.
 ActionResult is the base class of all the result types an action method returns.
What is the Action Result in ASP.NET Core MVC?
In ASP.NET Core MVC, an action method is responsible for processing the incoming HTTP
request and generating an appropriate HTTP response. That means the Controller Action
method is responsible for executing the application’s business logic and then selecting a
response or result to send back to the client. These responses can be anything from a
simple status code, plain text, a view (HTML), a file, or even a JSON object. These
responses are encapsulated in objects known as action results. So, in ASP.NET Core MVC,
 241

action results represent the various types of responses that a controller action can send
back to the client.
Action Result is the Return Type of an Action Method in the ASP.NET Core MVC
Application. The Action Result is an abstract class. It is the base class for all types that an
action method returns. As you can see in the diagram below, View, Partial View, Redirect,
Json, Content, File, RedirectToAction, etc., are derived from the abstract Action Result
class, and these types can also be used as the return type of an action method.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec

ActionResult Class in ASP.NET Core:

If you go to the definition of the ActionResult class, you will see the following signature. As
you can see in the image below, ActionResult is an Abstract class inherited from the
IActionResult interface. It has one constructor and two methods.

The constructor is used to initialize a new instance of the ActionResult class. It also has the
following two methods.
 ExecuteResult(ActionContext context): This method executes the action
method’s result operation synchronously. ASP.NET Core MVC Framework
calls this method to process the action method’s result. The context is the
 242

object in which the result is executed. The context includes information about
the executed action, such as Controller, HTTP Content, request context, and
route data.
 ExecuteResultAsync(ActionContext context): This method executes the
action method’s result operation asynchronously. ASP.NET Core MVC
Framework calls this method to process an action method’s result.
Why is ActionResult an Abstract Class in ASP.NET Core MVC?
This is because different controller action methods can return different types of results
according to business needs, and the ASP.NET Core MVC Framework handles them
properly. If you mention an action method’s return type as ActionResult, then the action
method can return any type derived from the ActionResult abstract class.
Types of Action Results in ASP.NET Core MVC:
Action results in ASP.NET Core MVC can be categorized into different groups based on
their functionality and the type of response they generate.
View Results:
View Results in ASP.NET Core MVC are action results used to render and return HTML
views to the client’s browser. They generate the HTML content the user sees in their web
browser. View results allow you to combine dynamic data with HTML templates and create
dynamic web pages. There are two main types of View Results in ASP.NET Core MVC:
 ViewResult: The ViewResult in ASP.NET Core MVC renders a view as a
web page. It’s typically used when the action needs to display HTML content.
You return this by calling View() from your controller action.
 PartialViewResult: The PartialViewResult in ASP.NET Core MVC is
similar to ViewResult, but it renders a partial view instead of a full page. This
is useful in scenarios like updating a portion of the webpage with AJAX.

Content Results:
Content Results in ASP.NET Core MVC are action results that allow us to return raw
content directly to the client’s browser as a response. This raw content can be in various
formats, such as Plain Text, HTML, JSON, XML, or any other format, or even downloadable
files like CSV or XML. There are three main types of Content Results in ASP.NET Core
MVC:
 ContentResult: The ContentResult in ASP.NET Core MVC returns a
specific content type to the response. It could be a string, HTML, JSON, or
plain text. Use the Content() method to specify the content and the content
type.

 JsonResult: The JsonResult in ASP.NET Core MVC Sends a JSON

response. This is commonly used in AJAX applications. You can return this
by calling Json() with an object that will be serialized into JSON format.

FileResult: The FileResult in ASP.NET Core MVC is Used to send binary

file data back to the client. You can return various file types using methods
like File() and specifying the file path or a byte array, along with the content
type. You can use it to return files, such as PDFs, images, etc., to the client
for downloading.
Redirect Results:
 243

Redirect Results in ASP.NET Core MVC are a type of action result that instructs the
client’s browser to navigate to an external URL or action within the application. They are
used when you need to perform a redirection, such as after a form submission or when
handling authentication. There are three main types of Redirect Results in ASP.NET Core
MVC:
 RedirectResult: Redirects the client to another URL. It is useful in scenarios
where you want to redirect the user to an external URL. Use Redirect() for
this purpose.

 RedirectToRoute: This represents a response that redirects to a specific

route configured in your application.
 RedirectToActionResult: Represents a response that redirects to a specific
action and controller within the application.
Status Results:
Status Results in ASP.NET Core MVC are action results that allow you to return HTTP
status codes along with optional content. They indicate the outcome of an operation to the
client. There are several types of Status Results in ASP.NET Core MVC:
 StatusCodeResult: This represents a response with a specific HTTP status
code and no additional content.
 NotFoundResult: This represents a response with the HTTP status code
404 (Not Found).
 BadRequestResult: Represents a response with the HTTP status code 400
(Bad Request).
 OkResult: Represents a response with the HTTP status code 200 (OK).
Object Result:
Object Result in ASP.NET Core MVC is used when you want to return data in a format
that can be automatically serialized into different content types (e.g., JSON, XML) based on
the client’s preferences, i.e., Content Negotiation. These objects can be of various types,
such as custom classes, built-in types, or collections.
 ObjectResult: An ObjectResult chooses an appropriate format for the client
(like JSON or XML) based on the request’s content negotiation.
By choosing the appropriate action result type, you can ensure that your application
responds to client requests in the desired manner and provides the necessary content.
What Should Be the Return Type of an Action Method: Action Result or
Specific Derived Type?
In ASP.NET Core MVC, you can choose between using the ActionResult base class or
specific derived types as the return type for your action methods. Both approaches have
their advantages and use cases. Let us understand when to use Action Result Class and
when to use a specific Derived class as the return type:
Using ActionResult Base Class:
If your action method returns different kinds of results based on different conditions (content
negotiation or other factors), then you should use ActionResult as the return type. For a
better understanding, please look at the example code below. As the Index method returns
two types of Results, i.e., View Result and Json Result, we use the Action method’s return
type as ActionResult.
 244

Advantages:
 You can easily switch between different types of action results based on
client preferences or conditions.
 Easily handle multiple response types for the same action method.
Using Specific Derived Types:
With this approach, you explicitly define the return type of your action method as a specific
derived type like ViewResult, JsonResult, RedirectResult, etc. This approach can provide
more clarity and improve readability by making it explicit what type of response the action
method will produce. In the example below, the action method will return one type of result,
i.e., JsonResult, so it is advisable to use JsonResult as the action method’s return type.

Choosing Between Action Result and Specific Derived Type:

1. If your action method primarily returns a single, consistent type of response
(e.g., always returns JSON data, always returns a view), using specific
derived types can clarify and make the code more self-explanatory.
2. If your action method needs to handle multiple types of responses based on
different conditions or requirements, using the ActionResult base class allows
you to choose the appropriate response type dynamically.
In many cases, a mix of both approaches can be beneficial. Use specific derived types
when the response type is consistent, and use ActionResult when the response type varies
based on runtime conditions or client preferences.
IActionResult and ActionResult in ASP.NET Core MVC:
In ASP.NET Core MVC, both IActionResult and ActionResult<T> serve as return types for
controller actions, but they are used in different scenarios in handling the return types of
controller actions. Let us understand the differences between them.
IActionResult:
IActionResult is an interface that all action result types implement. Using IActionResult as
the return type of a controller action method provides the following advantages:
 245

 By specifying the action method return type as IActionResult, you can return
any type of action result that implements the interface, such as ViewResult,
JsonResult, FileResult, etc. This is useful when the action method needs to
return different types of results depending on the situation.
 It abstracts the actual type of result being returned, which is ideal for cases
where the details of the response are not important or should be hidden for
the sake of clean architecture.
ActionResult:
The ActionResult is an abstract class that implements the IActionResult interface.
ActionResult<T> is a generic subclass allowing more specific type control over the returned
data. Using ActionResult or ActionResult<T> as the return type of a controller action
method provides the following advantages:
 ActionResult<T> enhances type safety by allowing you to specify the type of
the model that should be returned along with any standard ActionResult. For
example, if your action is supposed to return a User model or a NotFound
result, you can specify this as ActionResult<User>. This helps with compile-
time checks and makes the API more descriptive and self-documenting.
 This is useful in API development, where you might want to return a specific
data type (like a DTO) in case of success or different action results (like 404
NotFound or 400 BadRequest) in case of errors. It also provides clearer
documentation through Swagger or similar API tools, as the expected
response types are explicitly declared.
When to Use?
 Use IActionResult when you need the flexibility to return different types of
action results from your controller methods.
 Use ActionResult<T> when you want to return a specific type but also
maintain the ability to return different HTTP responses.
View Result in ASP.NET Core MVC
In this article, I will discuss the View Result in the ASP.NET Core MVC Applications with
Examples. Please read our previous article, where we discussed the basic concepts
of Action Results in ASP.NET Core MVC Application.
ViewResult in ASP.NET Core MVC
In ASP.NET Core MVC, View Result refers to one of the possible types of action results
returned by the controller action methods. In the controller action method, the return type
indicates what should be rendered or returned to the client (typically a web browser).
A View Result specifically instructs ASP.NET Core MVC to render a view template as the
response to the client’s request. A view is a file with a .cshtml extension that contains the
HTML markup with C# code using Razor syntax. This allows for dynamic HTML generation
based on the data passed from the controller.
The ViewResult class derives from the ActionResult base class. If you go to the definition of
ViewResult class, then you will see the following signature. As you can see, it is a concrete
class with a few properties, overriding the ExecuteResultAsync method, which is used to
generate the dynamic HTML response.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:13 / 03:1110 Sec
 246

Understanding ExecuteResultAsync Method of ViewResult class:

In ASP.NET Core MVC, the ExecuteResultAsync method of the ViewResult class is
responsible for rendering a view to generate the HTML output that will be sent to the client’s
browser. This method is invoked when the action result returned by a controller action is a
ViewResult. The following things are going to happen when the ExecuteResultAsync
method is called:
 View Discovery: It searches for a view file based on the specified view
name, which defaults to the action name if not explicitly set.
 View Rendering: Once the view is located, the method renders it to generate
the HTML content. During rendering, the view engine processes any markup,
server-side code (if present), and data passed to the view.
 Response Generation: After rendering the view, the generated HTML
content is written to the response stream. This content will be sent to the
client’s browser as the HTTP response body.
 Response Finalization: Finally, any additional HTTP headers and status
codes are set as necessary, and the response is finalized and sent to the
client.
How to Use ViewResult in ASP.NET Core MVC?
To use ViewResult in ASP.NET Core MVC Application, we need to follow the below steps:
1. Define a Razor View: Start by creating a Razor view (with the .cshtml
extension) in your project’s appropriate “Views” folder. This view will contain
the HTML markup and any embedded Razor code (C# Code) needed to
render dynamic content.
2. Create an Action Method: Create an action method within your controller
that will return a ViewResult. This method will process data and pass it to the
view.
3. Return a View: In the action method, return a ViewResult by calling
the View() method. You can pass the model object to the View() method if
you need to supply dynamic data to the view.
Example to Understand ViewResult in ASP.NET Core MVC:
 247

Let us understand how to use ViewResult in ASP.NET Core MVC Application with one
example. First, create a new ASP.NET Core MVC Project using the Model View Controller
template and name the project ActionResultInASPNETCoreMVC.
Creating Model:
Next, create a model class to hold the product data. So, create a class file
named Products.cs within the Models folder and copy and paste the following code into it.
namespace ActionResultInASPNETCoreMVC.Models
{
public class Product
{
public int Id { get; set; }
public string? Name { get; set; }
}
}
Modify the Home Controller:
Next, modify the Home Controller as follows. In the code below, the return type of the Index
action method is ViewResult. The ViewResult returned by the View() method will render
the Index.cshtml Razor view, and we pass the product model object to
the Index.cshtml view to populate dynamic content within the view.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
Product product = new Product()
{
Id = 1,
Name = "Test",
};
return View(product);
}
}
}
 248

Modifying the Index View:

Next, modify the Index.cshtml file as follows:
@model Product
@{
ViewData["Title"] = "Home Page";
Layout = null;
}
<div class="text-left">
<p>Product ID: @Model.Id</p>
<p>Product Name: @Model.Name</p>
</div>
Now, run the application, and you should get the expected output, as shown in the image
below.

Partial View Results in ASP.NET Core MVC

In this article, I will discuss the Partial View Result in ASP.NET Core MVC Applications
with Examples. Please read our previous article discussing View Result in ASP.NET Core
MVC Application.
PartialViewResult in ASP.NET Core MVC
In ASP.NET Core MVC, PartialViewResult is a type of action result that represents
rendering a partial view to be returned to the client. A partial view is a reusable view that
can be rendered within another view. They are useful for rendering common UI components
like headers, footers, sidebars, or any other section of a webpage that might be reused
across multiple views without duplicating code.
When you return a PartialViewResult from a controller action, ASP.NET Core MVC renders
the specified partial view and returns the rendered HTML to the client. The
PartialViewResult class derives from the ActionResult base class. If you go to the definition
of PartialViewResult class, you will see the following signature. As you can see, it is a
concrete class with a few properties, overriding the ExecuteResultAsync method.
 249

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:08 / 03:1110 Sec
ExecuteResultAsync Method of PartialViewResult Class:
In ASP.NET Core MVC, the ExecuteResultAsync method of the PartialViewResult class is
used to render a partial view that is returned to the client as part of an HTTP response. The
following are the things to happen when you return a PartialViewResult from an action
method:
 When the MVC framework executes an action that returns a
PartialViewResult, it eventually calls the ExecuteResultAsync method of the
PartialViewResult class.
 Inside the ExecuteResultAsync method, the MVC framework prepares the
data and context required for rendering the partial view.
 It then finds and renders the partial view, which typically includes executing
any Razor code and rendering HTML content.
 After rendering the partial view, the generated HTML content is written to the
response stream and sent back to the client as part of the HTTP response.
How to Use PartialViewResult in ASP.NET Core MVC?
Here’s how you can use PartialViewResult in ASP.NET Core MVC:
1. Create a Partial View: Create a Razor partial view (with the .cshtml
extension) in your project’s appropriate “Views” folder. Partial views typically
contain a portion of HTML markup and any embedded Razor code needed to
generate dynamic content.
2. Create an Action Method: Within your controller, create an action method
that will return a PartialViewResult. This method will process data and pass it
to the partial view.
3. Return a Partial View: In the action method, return a PartialViewResult by
calling the PartialView() method. You can pass a model object to the
PartialView() method if you need to supply dynamic data to the partial view.
Example to Understand PartialViewResult in ASP.NET Core MVC:
 250

Let us understand how to use PartialViewResult in ASP.NET Core MVC Application with
one example. First, create a new ASP.NET Core MVC Project using the Model View
Controller template and name the project ActionResultInASPNETCoreMVC.
Creating Model:
Next, create a model class to hold the product data. So, create a class file
named Products.cs within the Models folder and copy and paste the following code into it.
namespace ActionResultInASPNETCoreMVC.Models
{
public class Product
{
public int Id { get; set; }
public string? Name { get; set; }
}
}
Creating a Partial View:
First, create a partial view. Go to the Views=>Shared folder, add a partial view with the
name _ProductDetailsPartialView.cshtml, and copy and paste the following code into it.
@model Product
<div class="text-left">
<p>Product ID: @Model.Id</p>
<p>Product Name: @Model.Name</p>
</div>
Modify the Home Controller:
Next, modify the Home Controller as follows. In the below example, the return type of the
Index action method is PartialViewResult, and internally, the PartialView extension method
returns an instance of PartialViewResult. This PartialView method will render the
“ProductDetailsPartialView.cshtml” partial view, and the product model will populate
dynamic content within the partial view.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public PartialViewResult Index()
{
Product product = new Product()
 251

{
Id = 1,
Name = "Test",
};
return PartialView("_ProductDetailsPartialView", product);
}
}
}
Now, run the application, and you should see the following output.

Now, it displays the content of that partial view without the layout page. This isn’t very useful
by itself, so a more useful application might be to call this action in an AJAX scenario and
display the returned view.
How to Call Action Method using jQuery AJAX in ASP.NET MVC?
Let us proceed and understand how to call the Action Method, which returns a Partial View
from a regular View using the jQuery AJAX Method.
Modifying Home Controller
First, modify the Home Controller as follows. Here, we have two action methods. The Index
action method returns the View Result, whereas the Details action method returns the
Partial View Result.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
 252

return View();
}
public PartialViewResult Details(int ProductId)
{
Product product = new Product()
{
Id = ProductId,
Name = "Test Product",
};
return PartialView("_ProductDetailsPartialView", product);
}
}
}
Modify the Index.cshtml View
Next, modify the Index.cshtml view as follows. Here, you can see we are using jQuery
AJAX to call the Details Action Method of the Home Controller, which returns a Partial View.
In order to use jQuery AJAX, we first need to provide the path of the jQuery file, and here
we are using jQuery CDN.
@model Product
@{
ViewData["Title"] = "Home Page";
Layout = null;
}
<div id="someDiv" class="text-left">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var rawdata = {'ProductId': '10'};
$.ajax({
type: "GET",
url: "/Home/Details/",
data: rawdata,
success: function (viewHTML) {
 253

$("#someDiv").html(viewHTML);
},
error: function (errorData) { onError(errorData); }
});
});
</script>
Now, run the application, and you will get the output as expected. In our upcoming articles,
we will discuss how to perform the CRUD operations using jQuery AJAX.
How Do We Prevent the Partial Action Method from being invoked via
normal GET and POST Requests?
Now, you can also access the Details Action Method, which returns a Partial View using
Normal GET and Post Request. Now, we want to restrict this. This means the Details
Action Method should invoked via AJAX Request, not from general GET and Post request.
For this, we need to Create a Custom Attribute, and within the Custom Attribute, we need to
check whether the request is a normal GET Request or POST Request, or it is an AJAX
Request. If it is a normal GET or POST request, we need to return a 404 error; if it is an
AJAX Request, we need to return the data. Let us proceed and see how we can do this.
The X-Requested-With header returns a string indicating whether it’s an Ajax request. An
Ajax request will have this header set to XMLHttpRequest. This header value won’t be
present for normal GET and POST Requests (non-Ajax requests). So, create a Custom
Attribute inheriting from ActionMethodSelectorAttribute. So, add a class file with the
name AjaxOnlyAttribute.cs and then copy and paste the following code into it.
using Microsoft.AspNetCore.Mvc.Abstractions;
using Microsoft.AspNetCore.Mvc.ActionConstraints;
using Microsoft.Extensions.Primitives;
namespace ActionResultInASPNETCoreMVC.Models
{
public class AjaxOnlyAttribute : ActionMethodSelectorAttribute
{
public override bool IsValidForRequest(RouteContext routeContext, ActionDescriptor
actionDescriptor)
{
if (routeContext.HttpContext.Request.Headers != null &&
routeContext.HttpContext.Request.Headers.ContainsKey("X-Requested-With") &&
routeContext.HttpContext.Request.Headers.TryGetValue("X-Requested-With", out
StringValues requestedWithHeader))
{
if (requestedWithHeader.Contains("XMLHttpRequest"))
 254

{
return true;
}
}
return false;
}
}
}
Method Parameter Explanation:
 RouteContext (RouteContext routeContext): Provides context information
about the current route, including the HttpContext for the request. This allows
you to access request data such as headers, query string parameters, route
data, and more, which can be used to make decisions about the validity of the
request for the specific action.
 ActionDescriptor (ActionDescriptor actionDescriptor): This contains
detailed information about the action method being considered for execution.
This includes the controller name, action name, attributes applied to the
action, parameters, and other metadata. This information can be used to
identify the action method and make decisions based on its attributes or other
characteristics.
Then decorate the AjaxOnlyAttribute with the Details action method as shown below.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
[AjaxOnly]
public PartialViewResult Details(int ProductId)
{
Product product = new Product()
{
Id = ProductId,
 255

Name = "Test Product",

};
return PartialView("_ProductDetailsPartialView", product);
}
}
}
With the above changes in place, the Details action method can only be invoked via AJAX
Request. Now, if you try to access the Details action method using Normal GET or POST
request, you will get a 404 Error.
Checking the Request Path in the Code:
Now, you can also check whether the request is coming via AJAX directly within the action
method. For a better understanding, please modify the Home Controller as follows. If the
request is GET or POST, if it is coming as an AJAX request, it will return
the _ProductDetailsPartialView partial view to the client, and if it is not an AJAX request, it
will return the _InvalidRequestPartialView Partial view to the client.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
public PartialViewResult Details(int ProductId)
{
string method = HttpContext.Request.Method;
string requestedWith =
HttpContext.Request.Headers["X-Requested-With"];
if (method == "POST" || method == "GET")
{
if (requestedWith == "XMLHttpRequest")
{
Product product = new Product()
{
 256

Id = ProductId,
Name = "Test Product",
};
return PartialView("_ProductDetailsPartialView", product);
}
}
//Create a Partial View to return Invalid Request
return PartialView("_InvalidRequestPartialView");
}
}
}
Creating _InvalidRequestPartialView:
Next, create a Partial View named _InvalidRequestPartialView within
the Views/Shared folder and copy and paste the following code.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Invalid Request!</h4>
<p>Sorry, the request you submitted is invalid. Please check your input and try again.</p>
<!-- Optionally, you can include additional details about the invalid request -->
</div>
With the above changes in place, run the application, and it should work as expected. If you
access the Details action method, it will return the response. But if you access the Details
action method via a normal GET request, you will get the following error message:

JSON Result in ASP.NET Core MVC

 257

In this article, I will discuss the JSON Result in ASP.NET Core MVC Web Application with
Examples. Please read our previous article about the Partial View Result in ASP.NET
Core MVC Application.
JSON Result in ASP.NET Core MVC
In ASP.NET Core MVC, a JsonResult represents an HTTP response containing JSON data
(i.e., key-value pairs). It is used when we want to return JSON-formatted data from a
controller action method to the client. JSON (JavaScript Object Notation) is a lightweight
data-interchange format that is easy for humans to read and write and for machines to
parse and generate.
When we return a JsonResult from a controller action, ASP.NET Core MVC serializes the
specified data into JSON format and sends it back to the client as the HTTP response body.
This is commonly used for AJAX requests where the client-side JavaScript code expects to
receive data in JSON format or when building APIs.
Now, if you go to the definition of JosnResult, you will see the following signature. This class
has two constructors, a few properties, and an overriding ExecuteResultAsync method.
The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People Know

How does the ExecuteResultAsync Method of the JsonResult class

Work in ASP.NET Core MVC?
The ExecuteResultAsync method executes the result of an action method that returns
JSON data. Here is how the ExecuteResultAsync method works within the JsonResult
class:
 Data Serialization: Before ExecuteResultAsync is called, the JSON data to
be returned is typically set within the Value property of the JsonResult object.
This data can be any object or primitive type that can be serialized into JSON
format.
 Execution: When the action method returns a JsonResult object, the
ASP.NET Core MVC framework calls the ExecuteResultAsync method of that
JsonResult object.
 Serialization and Output: Within the ExecuteResultAsync method, the
JSON data set in the Value property is serialized into a JSON string using the
configured JSON serializer (typically Newtonsoft.Json or System.Text.Json).
 258

Once serialized, this JSON string is written to the response body, along with
appropriate HTTP headers indicating that the content is JSON.
How Do We Use JsonResult in ASP.NET Core MVC?
In ASP.NET Core MVC, you can use the JsonResult class to return data in JSON format
from your controller actions. First, create a controller action that will return the JSON data
as follows:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
var jsonData = new { Name = "Pranaya", ID = 4, DateOfBirth = new DateTime(1988, 02,
29) }
return new JsonResult(jsonData);
}
}
}
Using JsonResult Helper Method:
Alternatively, you can use the Json helper method provided by the Controller class to create
a JsonResult. This method is commonly used to simplify the creation of JSON results:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
var jsonData = new { Name = "Pranaya", ID = 4, DateOfBirth = new DateTime(1988, 02,
29) }
return Json(jsonData);
}
}
}
 259

Returning a Collection of Objects:

using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
var jsonArray = new[]
{
new { Name = "Pranaya", Age = 25, Occupation = "Designer" },
new { Name = "Ramesh", Age = 30, Occupation = "Manager" }
};
return Json(jsonArray);
}
}
}
Specifying JSON Serializer Settings:
You can also customize the JSON serialization settings, such as formatting and property
name handling:
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
//Converting Key Name to Pascal case, by default it is Camel Case
var options = new JsonSerializerOptions();
options.PropertyNamingPolicy = null;
var jsonArray = new[]
{
new { Name = "Pranaya", Age = 25, Occupation = "Designer" },
 260

new { Name = "Ramesh", Age = 30, Occupation = "Manager" }

};
return Json(jsonArray, options);
}
}
}
Using Implicit JSON Result:
Sometimes, you don’t need to return a JsonResult instance explicitly. ASP.NET Core can
automatically serialize objects to JSON when you return them directly:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
var jsonArray = new[]
{
new { Name = "Pranaya", Age = 25, Occupation = "Designer" },
new { Name = "Ramesh", Age = 30, Occupation = "Manager" }
};
return Ok(jsonArray); // This will be automatically serialized to JSON
}
}
}
JSON with Complex Type in ASP.NET Core MVC Application:
First, Create a Model in the Models folder named Product.cs, then copy and paste the
following code into it.
namespace ActionResultInASPNETCoreMVC.Models
{
public class Product
{
public int Id { get; set; }
public string? Name { get; set; }
 261

public string? Description { get; set; }

}
}
Modify Home Controller:
Copy and paste the following code into the Home Controller.
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json.Serialization;
using System.Text.Json;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public JsonResult Index()
{
//Converting Key Name to Pascal case, by default it is Camel Case
var options = new JsonSerializerOptions();
options.PropertyNamingPolicy = null;
List<Product> products = new List<Product>
{
new Product{ Id = 1001, Name = "Laptop", Description = "Dell Laptop" },
new Product{ Id = 1002, Name = "Desktop", Description = "HP Desktop" }
};
return Json(products, options);
}
}
}
Calling JsonResult Action Method using jQuery AJAX:
Now, let us try to understand how we can call an action method in ASP.NET Core MVC,
which returns JSON data using jQuery AJAX. So, first, modify the Home Controller as
follows:
using ActionResultInASPNETCoreMVC.Models;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
 262

namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
public ActionResult Details(string Category)
{
//Converting Key Name to Pascal case, by default it is Camel Case
var options = new JsonSerializerOptions();
options.PropertyNamingPolicy = null;
try
{
//Based on the Category Fetch the Data from the database
//Here, we have hard coded the data
List<Product> products = new List<Product>
{
new Product{ Id = 1001, Name = "Laptop", Description = "Dell Laptop" },
new Product{ Id = 1002, Name = "Desktop", Description = "HP Desktop" },
new Product{ Id = 1003, Name = "Mobile", Description = "Apple IPhone" }
};
//Please uncomment the following two lines if you want see what happend when exception
occurred
//int a = 10, b = 0;
//int c = a / b;
return Json(products, options);
}
catch(Exception ex)
{
return new JsonResult(new { Message = ex.Message, StackTrace = ex.StackTrace,
ExceptionType = "Internal Server Error" }, options)
 263

{
StatusCode = StatusCodes.Status500InternalServerError // Status code here
};
}
}
}
}
Next, modify the Index.cshtml view as follows:
@{
ViewData["Title"] = "Home Page";
Layout = null;
}
<div>
<table id="tblProducts" class="tblProducts">
<thead>
<tr>
<th align="left" class="productth">ProductID</th>
<th align="left" class="productth">ProductName</th>
<th align="left" class="productth">Descrtption</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#tblProducts tbody tr").remove();
var rawdata = { 'Category': 'Electronics' };
$.ajax({
type: "GET",
url: "/Home/Details/",
 264

data: rawdata,
dataType: 'json',
success: function (data) {
var items = '';
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td class='prtoducttd'>" + item.Id + "</td>"
+ "<td class='prtoducttd'>" + item.Name + "</td>"
+ "<td class='prtoducttd'>" + item.Description + "</td>"
+ "</tr>";
$('#tblProducts tbody').append(rows);
});
},
error: function (errorData) {
//respone will be returned here
alert(errorData);
var ErrorResponse = jQuery.parseJSON(errorData.responseText);
alert("Message: " + ErrorResponse.Message);
alert("StackTrace: " + ErrorResponse.StackTrace);
alert("ExceptionType: " + ErrorResponse.ExceptionType);
}
});
});
</script>
Now, run the application, and you should get the expected output, as shown in the image
below.
 265

Why JSON Result in ASP.NET Core MVC?

 Lightweight Data Transfer: JSON (JavaScript Object Notation) is a
lightweight data-interchange format that efficiently transmits data between a
server and a client. JSON serialization is efficient and can help reduce the
data transfer size over the network.
 API Responses: JSON is the standard format for many Web APIs, making it
a natural choice for building RESTful APIs in ASP.NET Core Web API
projects.
 Client Compatibility: JSON is widely supported across various programming
languages and platforms, making it easy to consume JSON data in different
client applications, such as web browsers, mobile apps, and desktop
applications.

Content Result in ASP.NET Core MVC:

In this article, I will discuss the Content Result in ASP in ASP.NET Core MVC Application
with Examples. Please read our previous article discussing the JSON Result in ASP.NET
Core MVC Application.
Content Result in ASP.NET Core MVC:
In ASP.NET Core MVC, a ContentResult is an action result representing a user-defined
content type to be returned to the client. Unlike JsonResult, which returns JSON data, or
ViewResult and PartialViewResult, which returns HTML markup, a ContentResult allows
you to return a string of content, such as plain text, XML, or any other type of content,
directly to the client without needing to render a view. While returning the data from the
action method, all we need to specify the content and MIME type.
If you go to the definition of ContentResult, you will see the following signature. This class
has a few properties and overrides the ExecuteResultAsync method.
 266

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:07 / 03:1110 Sec
How Does the ExecuteResultAsync Method of ContentResult class Work
in ASP.NET Core MVC?
The ExecuteResultAsync method in the ContentResult class is responsible for executing
the result of an action method that returns custom content. Here is how the
ExecuteResultAsync method works within the ContentResult class:
 Setting Content and Encoding: Before ExecuteResultAsync is called, the
content and, optionally, the content type and encoding of the response are
typically set within the Content property of the ContentResult object.
 Execution: When the action method returns a ContentResult object, the
ASP.NET Core MVC framework calls the ExecuteResultAsync method of that
ContentResult object.
 Output: Within the ExecuteResultAsync method, the content set in the
Content property is written to the response body, along with any configured
content type and encoding.
What are MIME Types?
In ASP.NET Core MVC, MIME types (Multipurpose Internet Mail Extensions) indicate the
type of content the server serves. They are essential for correctly interpreting and displaying
content in web browsers.
MIME types enable browsers to recognize the file type of a file sent via HTTP by the
webserver. As a result, the browser can choose a suitable displaying method. Common
MIME types are, for example, text/html for HTML files or image/jpeg for JPEG files.
How Do We Use ContentResult in ASP.NET Core MVC?
In ASP.NET Core MVC, you can use the ContentResult class to return raw content, such as
text, HTML, XML, or JSON, directly to the client without involving view rendering. Start by
creating a controller action that will return the raw content. For example, let’s say you want
to return a simple plain text message. When returning Plain text, specify the MIME type
as “text/plain,” as shown in the example below.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
 267

public class HomeController : Controller

{
public ContentResult Index()
{
string plainText = "This is plain text content.";
return new ContentResult
{
ContentType = "text/plain",
Content = plainText
};
}
}
}
Using ContentResult Helper Method:
Alternatively, you can use the Content helper method provided by the Controller class to
create a ContentResult. This method simplifies the creation of content results. When
returning Plain text, specify the MIME type as “text/plain,” as shown in the example below.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ContentResult Index()
{
string plainText = "This is plain text content.";
return Content(plainText, "text/plain");
}
}
}
Returning HTML:
When returning HTML content, specify the MIME type as “text/html,” as shown in the
example below.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
 268

{
public class HomeController : Controller
{
public ContentResult Index()
{
string htmlContent = "<html><body><h1>Hello, Welcome to Dot Net
Tutorials</h1></body></html>";
return Content(htmlContent, "text/html");
}
}
}
Returning XML:
When returning XML data, specify the MIME type as “application/xml” as shown in the
example below.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ContentResult Index()
{
string xmlContent = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><data><item>Hello Dot
Net Tutorials</item></data>";
return Content(xmlContent, "application/xml");
}
}
}
Returning JSON:
When returning JSON data, specify the MIME type as “application/json” as shown in the
example below.
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
namespace ActionResultInASPNETCoreMVC.Controllers
{
 269

public class HomeController : Controller

{
public ContentResult Index()
{
var jsonData = new { Name = "Pranaya", Age = 35, Occupation = "Manager" };
return Content(JsonConvert.SerializeObject(jsonData), "application/json");
}
}
}
Using String Directly:
The default MIME type is “text/plain”. You can also directly return a string without
specifying a content type. In this case, the default content type will be used, which is
text/plain, as shown in the example below.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ContentResult Index()
{
string content = "This is a simple string.";
return Content(content);
}
}
}
Customizing Content:
You can customize various properties of the ContentResult, such as the content type, status
code, and more, according to your specific use case.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ContentResult Index()
{
 270

string customContent = "Custom content with specific settings.";

return new ContentResult
{
Content = customContent,
ContentType = "text/plain",
StatusCode = 200, // OK status code
};
}
}
}
Use Cases of Content Result in ASP.NET Core MVC:
ContentResult in ASP.NET Core MVC is used to return raw content, such as text, HTML,
XML, or JSON, directly to the client without view rendering. Here are some use cases for
ContentResult in ASP.NET Core MVC:
1. Static Text Responses: You can use ContentResult to return plain text
responses to the client. This is useful for displaying messages, instructions,
or simple notifications.
2. Static HTML Pages: You can return static HTML pages as raw content using
ContentResult. This can be useful for displaying simple information pages or
promotional content.
3. XML Responses: If your application provides data in XML format, you can
use ContentResult to return XML content, which can be useful when
integrating with systems that require XML data exchange.
4. JSON Responses: Like XML, you can use ContentResult to return JSON
content. While JsonResult might be a better choice for most JSON use cases,
ContentResult can still be employed when you need fine-grained control over
the JSON serialization process.
5. Raw JavaScript or CSS: You can return raw JavaScript or CSS code using
ContentResult. This can be useful for injecting dynamic scripts or styles
directly into the client’s webpage.
File Result in ASP.NET Core MVC:
In this article, I will discuss the File Result in an ASP.NET Core MVC Application with
Examples. Please read our previous article, which discussed the ContentResult in an
ASP.NET Core MVC Application.
File Result in ASP.NET Core MVC
In ASP.NET Core MVC, a FileResult is an action result representing a file to be returned to
the client for download or display. It’s used when you want to send a file (such as an image,
PDF, or any other type of file) as the response to an HTTP request. Now, if you go to the
definition of FileResult, you will see the following signature. This class has one constructor
and a few properties.
 271

How File Result Works in ASP.NET Core MVC

In ASP.NET Core MVC, the FileResult class represents an action result that sends binary
content to the response. Here is how the FileResult works in ASP.NET Core MVC
Application:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:09 / 03:1110 Sec
 Creating a FileResult Object: To return a file from a controller action, you
create a FileResult object.
 Setting File Information: Before returning the FileResult from the action
method, we need to set properties such as the file content, content type, and
file download name.
 Execution: When the action method returns a FileResult object, the
ASP.NET Core MVC framework handles it by calling the ExecuteResultAsync
method of the specific FileResult subclass.
 Writing Content to Response: Within the ExecuteResultAsync (Parent
ActionResult class ExecuteResultAsync) method, the file content is written to
the response body along with appropriate HTTP headers such as Content-
Disposition for specifying the filename and Content-Type for specifying the
file’s MIME type.
Understanding Different MIME Types:
When working with File Result, we need to understand the different MIME types that we
used to specify the file type being returned from the action method. The following are the
different MIME types:
Image MIME Types:
 JPEG: image/jpeg
 PNG: image/png
 272

 GIF: image/gif
 BMP: image/bmp
 SVG: image/svg+xml
 WebP: image/webp
Common File MIME Types:
 PDF: application/pdf
 Microsoft Word: application/msword
 Microsoft Excel: application/vnd.ms-excel
 Microsoft PowerPoint: application/vnd.ms-powerpoint
 ZIP Archive: application/zip
 JSON: application/json
 XML: application/xml
 Text: text/plain
 HTML: text/html
Audio and Video MIME Types:
 MP3 Audio: audio/mpeg
 WAV Audio: audio/wav
 OGG Audio: audio/ogg
 MP4 Video: video/mp4
 WebM Video: video/webm
 OGG Video: video/ogg
Example to Understand File Result in ASP.NET Core MVC:
Let us understand the FileResult in the ASP.NET Core MVC Application with a few
examples. When returning files or images from your ASP.NET Core MVC controller actions,
setting the appropriate MIME type is important to ensure the browser understands how to
handle the content. For example, you can set the mime type as image/jpeg for JPEG
images.
Before proceeding further, let us create a folder named PDFFiles within the wwwroot folder
and then add a PDF file named Sample.pdf to this PDFFiles folder. Your folder structure
should look like the one shown below.

Returning a File for Download:

Please modify the Home Controller as follows. Here, the Index action method in the
HomeController class is used to send a PDF file as a response to an HTTP request. The
following code is self-explained, so please go through the comment lines.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
 273

public class HomeController : Controller

{
public FileResult Index()
{
//Get the File Path
//Directory.GetCurrentDirectory() gets the current working directory of the application,
//\\wwwroot\\PDFFiles\\ is the relative path from the current directory to the file.
string filePath = Directory.GetCurrentDirectory() + "\\wwwroot\\PDFFiles\\" +
"Sample.pdf";
//Read File into a Byte Array
//This is necessary because the HTTP response needs the file content in a binary format (byte
array)
//to properly send it over the network to the client.
byte[] fileBytes = System.IO.File.ReadAllBytes(filePath);
//Return the File as a Response
//The File method is used to return the file to the client. It takes three parameters:
//fileBytes: The byte array containing the file data.
//"application/pdf": The MIME type of the file, specifying that it is a PDF. This helps the
browser or client understand how to handle the file.
//"Sample.pdf": The suggested filename for the file when the client saves it.This is what the
user will see as the filename by default when prompted to download or save the file.
return File(fileBytes, "application/pdf", "Sample.pdf");
}
}
}
Returning a PDF for Display
Please modify the Home Controller as follows. Here, the Index method effectively reads a
PDF file from the server’s file system, converts it into a byte array, and sends it to the client
as a PDF without setting a specific filename for the download. This approach is used when
the server needs to control the file delivery but does not need to suggest a save/download
filename. The following code is self-explained, so please go through the comment lines.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
 274

{
public FileResult Index()
{
//Determine File Path
//Directory.GetCurrentDirectory() gets the current working directory of the application,
//\\wwwroot\\PDFFiles\\ is the relative path from the current directory to the file.
string filePath = Directory.GetCurrentDirectory() + "\\wwwroot\\PDFFiles\\" +
"Sample.pdf";
//Read File into a Byte Array
//The method System.IO.File.ReadAllBytes is used to load the file from the disk into
memory.
//Reading the file into a byte array is essential for sending the file's content as part of the
HTTP response.
byte[] fileBytes = System.IO.File.ReadAllBytes(filePath);
//Return the File
//The File method is used to create a FileResult that encapsulates the file data to be sent to
the client.
//This method is called with two parameters:
//fileBytes: The byte array containing the data of the file.
//"application/pdf": The MIME type of the file, which informs the client about the type of file
being sent.
//Specifying "application/pdf" tells the browser or any client that the file is a PDF, which
helps the client to handle the file appropriately.
return File(fileBytes, "application/pdf");
}
}
}
This version of the File method does not include a third parameter for the filename in the
File method call. Without specifying a filename:
 Depending on the browser’s behavior and settings, the client (typically a
browser) may use the last part of the URL or generate a generic name for the
downloaded file.
 It simplifies scenarios where the actual file name does not need to be
exposed or suggested to the client for any particular reason.
Setting File Download Options:
 275

You can also provide additional options when returning files, such as specifying the file
download name, enabling browser caching, and specifying the content disposition. So,
please modify the Home Controller as follows. The Index action method sends a PDF file to
the client, with explicit control over how the file should be presented (either as a download
or directly browsed in the browser). The following code also sets the Content-Disposition
header directly to manage file delivery behaviors. The following code is self-explained, so
please go through the comment lines.
using Microsoft.AspNetCore.Mvc;
using System.Net.Mime;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public FileResult Index()
{
//Get the File Path
string filePath = Directory.GetCurrentDirectory() + "\\wwwroot\\PDFFiles\\" +
"Sample.pdf";
//Convert to Byte Array
byte[] fileBytes = System.IO.File.ReadAllBytes(filePath);
//Set Content Disposition
//creates a new instance of ContentDisposition,
//which is used to specify the presentation and filename of the file in the HTTP header
var contentDisposition = new ContentDisposition
{
//Sets the default filename for the file when the user downloads it.
FileName = "MySample.pdf",
//Indicates that the file should not be displayed inline in the browser window.
//Instead, it prompts the user to download the file.
//Setting this to true would display the file directly in the browser, if supported.
Inline = false
};
//Appends the Content-Disposition header to the HTTP response.
//The header's value is generated from the contentDisposition object,
 276

//instructing the browser how to handle the received file based on the Inline property and
FileName.
Response.Headers.Append("Content-Disposition", contentDisposition.ToString());
//Return the File
//The File method constructs a FileResult using the byte array (fileBytes) and the MIME type
("application/pdf").
//This tells the client that the file is a PDF, aiding the browser or client application in
handling the file appropriately.
return File(fileBytes, "application/pdf");
}
}
}
Using Physical Files:
You can also return physical files from the server’s file system. To better understand, please
modify the Home Controller as follows. The Index action method is used to serve a PDF file
directly from the file system to the client using the PhysicalFile method. The following code
is self-explained, so please go through the comment lines.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public FileResult Index()
{
//Get the File Path
string filePath = Directory.GetCurrentDirectory() + "\\wwwroot\\PDFFiles\\" +
"Sample.pdf";
//Return the Physical File
//The PhysicalFile method returns the file located at the specified filePath directly to the
client.
//The PhysicalFile method is a convenient way to return files without loading them into
memory:
//filePath: The path to the file that is to be served.
//"application/pdf": The MIME type of the file.
 277

return PhysicalFile(filePath, "application/pdf");

}
}
}
Use Cases of File Result in ASP.NET Core MVC:
FileResult in ASP.NET Core MVC is used to serve files to clients for download or display.
It’s particularly helpful when you want to allow users to access files from your application.
Here are some use cases for FileResult in ASP.NET Core MVC:
 File Downloads: The most common use case is allowing users to download
files from your application. These could include documents, images, audio
files, videos, software installers, etc.
 Exporting Data: You can generate data in your application and then use
FileResult to allow users to download the data in various formats, such as
CSV, Excel, or PDF.
 Serving Images: You can use FileResult to serve images to users. This is
especially useful if you want to control caching behavior, watermark images,
or dynamically generate images on the fly.
 Serving Documents: If your application provides documents such as PDFs,
Word documents, or PowerPoint presentations, FileResult can serve them to
users.
Redirect Results in ASP.NET Core MVC
In this article, I will discuss the Redirect Results in ASP.NET Core MVC Web Applications
with Examples. Please read our previous article about the File Result in ASP.NET Core
MVC Applications.
Redirect Results in ASP.NET Core MVC
Redirect Results in ASP.NET Core MVC are a type of action result that instructs the client’s
browser to navigate to a different URL (outside the application) or action within the
application. There are three main types of Redirect Results in ASP.NET Core MVC:
 RedirectResult: Redirects the client to another URL. It is useful in scenarios
where you want to redirect the user to an external URL.
 RedirectToRoute: This represents a response that redirects to a specific
route configured in your application.
 RedirectToActionResult: Represents a response that redirects to a specific
action and controller within the application.
Redirect Results are commonly used for scenarios like Post-Redirect-Get (PRG) Patterns,
where a form submission is followed by a redirection to prevent duplicate submissions.
They are also used to implement Authentication Flows, Process Data, and handle various
user interactions in your application. By using Redirect Results, we can implement proper
navigation within the application or to external resources.
Redirect Result in ASP.NET Core MVC
In ASP.NET Core MVC, the Redirect Result is an action result that instructs the client’s
browser to redirect to a different URL. You can use it when you want to redirect users to a
different location, whether it’s within the same application or to an external URL. This can
 278

be useful for scenarios like handling form submissions, processing data, and then
redirecting the user to a different page.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec
If you go to the definition of RedirectResult, you will see that it is a class with 3 constructors,
a few properties, and one overriding method, as shown in the image below.

How Does the ExecuteResultAsync Method of RedirectResult class

Work in ASP.NET Core MVC?
The ExecuteResultAsync method in the RedirectResult class is responsible for executing
the result of an action method that returns a RedirectResult. Here is how the
ExecuteResultAsync method works within the RedirectResult class:
 Setting Redirect URL: Before returning the RedirectResult from the action
method, we need to set the URL property to specify the URL where the client
should be redirected.
 Execution: When the action method returns a RedirectResult object, the
ASP.NET Core MVC framework handles it by calling the ExecuteResultAsync
method of that RedirectResult object.
 Redirecting: Within the ExecuteResultAsync method, the ASP.NET Core
MVC framework generates an HTTP redirect response (status code 302) with
the specified URL in the Location header. This instructs the client’s browser to
navigate to the specified URL.
Example to Understand Redirect Result in ASP.NET Core MVC
Let us understand this with an example. Suppose you want to redirect to a specific URL.
This method takes the URL to redirect. For example, if we want to redirect to the
URL https://dotnettutorials.net, we need to use the Redirect method, as shown below.
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

{
 279

public class HomeController : Controller

public RedirectResult Index()

return new RedirectResult("https://dotnettutorials.net");

}
Using RedirectResult Helper Method:
Alternatively, you can use the Redirect helper method provided by the Controller class to
create a RedirectResult. This method simplifies the creation of redirect results.
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

public class HomeController : Controller

public RedirectResult Index()

return Redirect("https://dotnettutorials.net");

}
Note: Don’t use the other overloaded constructor versions, or you will make your redirection
permanent.
RedirectToRouteResult in ASP.NET Core MVC
In ASP.NET Core MVC, RedirectToRouteResult is an action result that redirects the client
to a specified route. It allows you to redirect the user to a different action within the same
controller or to an action in a different controller. Routes in ASP.NET Core MVC define how
 280

URLs are mapped to controller actions. By using RedirectToRouteResult, you can take
advantage of these route definitions to dynamically redirect users based on the route
configuration.
How Does ExecuteResultAsync Method of RedirectToRouteResult class
Works in ASP.NET Core MVC?
The ExecuteResultAsync method in the RedirectToRouteResult class is responsible for
executing the result of an action method that returns a redirect to a route result. Here is how
the ExecuteResultAsync method works within the RedirectToRouteResult class:
 Setting Route Values: Before returning the RedirectToRouteResult from the
action method, we need to set the RouteValues property to specify the route
to which the client should be redirected. The route values typically include the
controller, action, and any additional parameters required by the route.
 Execution: When the action method returns a RedirectToRouteResult object,
the ASP.NET Core MVC framework handles it by calling the
ExecuteResultAsync method of that RedirectToRouteResult object.
 Redirecting: Within the ExecuteResultAsync method, the ASP.NET Core
MVC framework generates an HTTP redirect response (status code 302) with
the URL constructed based on the specified route values. This instructs the
client’s browser to navigate to the specified route.
Example to Understand RedirectToRouteResult in ASP.NET Core MVC
Let us understand RedirectToRouteResult with some examples. First, we need to create
a Route with the name AboutRoute within our Program.cs class file, which should
execute the About Action method of the Home Controller. So, modify the Home Controller
as follows. Here, you can see first, we have registered the AboutRoute and then the default
Route.
using Microsoft.AspNetCore.Http.Json;

using Microsoft.AspNetCore.Mvc;

using System;

namespace ActionResultInASPNETCoreMVC

public class Program

public static void Main(string[] args)

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

 281

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())

app.UseExceptionHandler("/Home/Error");

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.

app.UseHsts();

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

//URL Pattern: about

app.MapControllerRoute(

name: "AboutRoute",

pattern: "about",

defaults: new { controller = "Home", action = "About" }

);

//URL Pattern: Controller/Action

app.MapControllerRoute(

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");
 282

app.Run();

}
Modifying the Home Controller:
Next, modify the Home Controller as follows. Here, you can see within the Index action
method, we redirect to the AboutRoute using the RedirectToRoute method.
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

public class HomeController : Controller

public RedirectToRouteResult Index()

// Perform some logic

// Redirect to a different route

// You need to specify the Route Name, not the Route Pattern

return RedirectToRoute("AboutRoute");

public string About()

return "Hello and Welcome to Dot Net Tutorials";

}
 283

Remember that RedirectToRouteResult allows you to define more complex redirection

scenarios involving different controllers, actions, and route values. It is useful when
abstracting the route logic from the specific controller and action names. In the below
example, we are directing the user to the AboutRoute Route with some data.
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

public class HomeController : Controller

public RedirectToRouteResult Index()

// Perform some logic

// Redirect to a different route

// You need to specify the Route Name, not the Route Pattern

return RedirectToRoute("AboutRoute", new { name = "Index" });

public string About(string name)

return "Hello and Welcome to Dot Net Tutorials " + name;

}
The RedirectToRouteResult is also used whenever we need to move from one action
method to another within the same or different controller in an ASP.NET Core MVC
Application. For example, in the below code, we redirect to the Home Controller’s About
action method from the Home Controller’s Index action method.
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers
 284

public class HomeController : Controller

public RedirectToRouteResult Index()

// Perform some logic

// Redirect to a different route

// You need to specify the Route Name, not the Route Pattern

//return RedirectToRoute("AboutRoute", new { name = "Index" });

return RedirectToRoute(new { controller = "Home", action = "About", name="Index" });

public string About(string name)

return "Hello and Welcome to Dot Net Tutorials " + name;

}
Note: Specifying the controller’s name is optional if you redirect to an action method within
the same controller, but navigating to a different controller is mandatory.
RedirectToActionResult in ASP.NET Core MVC
In ASP.NET Core MVC, RedirectToActionResult is an action result that redirects the client
to another action within the same controller or a different controller. It allows you to redirect
users to a different action based on the action name and controller name. Specifying the
controller’s name is optional if you redirect to an action method within the same controller,
but navigating to a different controller is mandatory.
How Does the ExecuteResultAsync Method of RedirectToActionResult
class Work in ASP.NET Core MVC?
The ExecuteResultAsync method in the RedirectToActionResult class is responsible for
executing the result of an action method that returns a redirect to an action result. Here is
how the ExecuteResultAsync method works within the RedirectToActionResult class:
 285

 Setting Action and Controller Names: Before returning the

RedirectToActionResult from the action method, we need to set the
ActionName, ControllerName, and optionally RouteValues properties to
specify the action and controller to which the client should be redirected.
 Execution: When the action method returns a RedirectToActionResult object,
the ASP.NET Core MVC framework handles it by calling the
ExecuteResultAsync method of that RedirectToActionResult object.
 Redirecting: Within the ExecuteResultAsync method, the ASP.NET Core
MVC framework generates an HTTP redirect response (status code 302) with
the URL constructed based on the specified action, controller, and route
values. This instructs the client’s browser to navigate to the specified action.
Example to Understand RedirectToActionResult in ASP.NET Core MVC
Let us understand RedirectToActionResult with some examples. So, please modify the
Home Controller as follows:
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

public class HomeController : Controller

public RedirectToActionResult Index()

// Perform Some Logic

// Redirect to a different action within the same controller

// Specifying the Controller name is Optional

return RedirectToAction("AboutUs", "Home" );

// return RedirectToAction("AboutUs");

public string AboutUs(string name)

return "Hello and Welcome to Dot Net Tutorials " + name;

}
 286

}
In the above example, when the Index action is invoked, it performs some logic (which you
can replace with your logic). Then, it uses RedirectToAction to redirect the user to the
AboutUs action method within the same controller. You can also use additional overloads of
RedirectToAction to provide route values and query parameters:
using Microsoft.AspNetCore.Mvc;

namespace ActionResultInASPNETCoreMVC.Controllers

public class HomeController : Controller

public RedirectToActionResult Index()

// Perform Some Logic

// Redirect to the About action with a Route Parameter

//return RedirectToAction("About", new { id = 123 });

// Redirect to the About action with a Query String Parameter

return RedirectToAction("About", "Home", new { id = 123, name = "Index" });

public string About(int id, string name)

return $"Hello and Welcome to Dot Net Tutorials, Id{id}, Name:{name} ";

}
 287

Differences Between RedirectResult, RedirectToRoute Result, and

RedirectToActionResult in ASP.NET Core MVC
In ASP.NET Core MVC, RedirectResult, RedirectToRouteResult, and
RedirectToActionResult are all used to perform HTTP redirections. Still, they differ in terms
of how they handle the redirection. The following are the differences between these three
classes:
RedirectResult:
 Represents an HTTP redirection response to an absolute URL.
 You specify the URL you want to redirect to as a parameter.
 Typically used for external redirects or redirects to URLs that are not handled
by your application’s routing system.
 Example: return Redirect(“https://www.dotnettutorials.net”);
RedirectToRouteResult:
 Represents an HTTP redirection response to a named route defined in your
application’s routing configuration.
 You specify the name of the route you want to redirect to.
 Used to redirect to different controllers and actions while providing route
values and parameters.
 Example: return RedirectToRoute(“AboutRoute”);
RedirectToActionResult:
 Represents an HTTP redirection response to a specific action within a
specific controller.
 You specify the action and, optionally, the controller, along with any route
values, query parameters, and fragment identifiers.
 It offers the highest level of abstraction by allowing you to specify the action
and controller by name.
 Example: return RedirectToAction(“About”, new { id = 123 });
Status Results in ASP.NET Core MVC
In this article, I will discuss the StatusResult in ASP in ASP.NET Core MVC Web
Applications with examples. Please read our previous article discussing Redirect Results
in ASP.NET Core MVC Application.
HTTP Status Codes:
The Hyper Text Transport Protocol status code is one of the important components of an
HTTP Response. The server issues the status code and provides information about the
response. Whenever the client gets a response from the server, the response should have
one HTTP Status code.
Status codes are three-digit numbers returned by the server to provide information about
the outcome of a client’s request. These codes are grouped into different categories based
on their first digit, which helps understand the response. All the HTTP Status codes are
divided into five categories. Here, XX will represent the actual number.
 1XX: Informational Response (Example: 100, 101, 102, etc.). Status codes
in the 1xx range indicate that the server has received the client’s request and
is continuing the process. These codes are primarily used for informational
purposes and do not typically require any action from the client.
 2XX: Successful Response (Example. 200, 201, 203, 204, etc.). Whenever
you get 2XX as the response code, it means the request is successful. Status
codes in the 2xx range indicate that the server successfully received,
 288

understood, and accepted the client’s request. These codes typically indicate
that the requested action was successfully completed.
 3XX: Redirection Response (Example. 301, 302, 304, etc.). Whenever you
get 3XX as the response code, it means it is re-directional, i.e., some re-
directional is happening on the server. Status codes in the 3xx range indicate
that the client needs further action to complete the request. These codes are
used when a resource has been moved or is temporarily unavailable, and the
client needs to take additional steps to access the resource.
 4XX: Client Error Response (Example: 400, 401, 404, 405,
etc.). Whenever you get 4XX as the response code, it means there is some
problem with your request. Status codes in the 4xx range indicate that the
client’s request was unsuccessful due to an error on the client’s request.
These codes are often associated with issues such as invalid requests,
unauthorized access, or missing resources.
 5XX: Server Error Response (Example: 500, 502, 503, 504,
etc.). Whenever you get 5XX as the response code, it means there is some
problem in the server. Status codes in the 5xx range indicate that the server
encountered an error while processing the client’s request. These codes are
typically associated with issues on the server side, indicating that the
requested action could not be completed due to server-related problems.
Status Results in ASP.NET Core MVC
Status Results in ASP.NET Core MVC are action results that allow you to return HTTP
status codes along with optional content. Several types of Status Results are available in
ASP.NET Core MVC. They are as follows:
Ad
1/2
00:23
The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People Know
 StatusCodeResult: This represents a response with a specific HTTP status
code and no additional content.
 NotFoundResult: This represents a response with the HTTP status code
404 (Not Found).
 BadRequestResult: Represents a response with the HTTP status code 400
(Bad Request).
 OkResult: Represents a response with the HTTP status code 200 (OK).
 UnauthorizedResult: Represents an HTTP 401 (Unauthorized) response.
Status Results indicate success, failure, or various error conditions to the client. Using
Status Results, you can ensure that the client understands the result of their request based
on the provided HTTP status code.
StatusCodeResult in ASP.NET Core MVC:
In ASP.NET Core MVC, the class StatusCodeResult returns an HTTP status code without
any additional content or response body. But, using the StatusCode helper method, we can
return optional content. It’s typically used when you explicitly want to indicate a specific
HTTP status code for a response. Let’s modify the Home Controller as follows to
understand this concept in ASP.NET Core MVC.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
 289

{
public class HomeController : Controller
{
public IActionResult NotFoundExample()
{
// Return a 404 Not Found response
return new StatusCodeResult(404);
}
public IActionResult CustomStatusCodeExample()
{
// Return a custom status code
return new StatusCodeResult(403);
}
}
}
The NotFoundExample action method returns a 404 (Not Found) response using the
StatusCodeResult class with the status code 404. The CustomStatusCodeExample action
method returns a custom 403 (Forbidden) response using the StatusCodeResult class with
the status code 403. If you visit Home/NotFoundExample, you will get the 404 response we
set in the action method.

Now, if you inspect the request, you will see the server returns a 404 status code, as shown
in the image below.
 290

If you visit Home/CustomStatusCodeExample, you will get the 403 response we set in the
action method.

Now, if you inspect the request using the browser developer tool, you will see the server is
returning the 403 status code, as shown in the image below.
 291

Using StatusCodeResult Helper Method:

Alternatively, you can use the StatusCodeResult helper method provided by the Controller
class to create a StatusCodeResult. This method simplifies the creation of the Status Code
Result. For a better understanding, please modify the Home Controller class as follows:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public StatusCodeResult NotFoundExample()
{
// Return a 404 Not Found response
return StatusCode(404);
}
public IActionResult CustomStatusCodeExample()
{
// Return a custom status code
return StatusCode(403);
}
}
}
 292

If you want to return a message along with the HTTP Status Code, you need to use the
other overloaded version, which takes the object value as a parameter. In this case, we
must use the IActionResult and ActionResult as the action method’s return type. For a
better understanding, please modify the Home Controller class as follows:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult NotFoundExample()
{
// Return a 404 Not Found response
return StatusCode(404, new { message = "Resource Not Found" });
}
public IActionResult CustomStatusCodeExample()
{
// Return a custom status code
return StatusCode(403, "Resource Not Found");
}
}
}
The StatusCodeResult class is indeed used in ASP.NET Core MVC to create and return the
desired HTTP status code as a response from the controller action.
HttpUnauthorizedResult in ASP.NET Core MVC
In ASP.NET Core MVC, the UnauthorizedResult class returns an HTTP 401 (Unauthorized)
response. This is often used when a user is not authenticated and lacks the credentials to
access a particular resource or perform an action. Returning an UnauthorizedResult is the
same as returning StatusCodeResult with HTTP Status Code Unauthorized, i.e., 401; it’s
more readable.
In the example below, the UnauthorizedExample action returns a 401 (Unauthorized)
response using the UnauthorizedResult class. The shorthand method Unauthorized() can
also be used to achieve the same result.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
 293

public IActionResult UnauthorizedExample()

{
// Return a 401 Unauthorized response
return new UnauthorizedResult();
// Or use the shorthand helper method:
//return Unauthorized();
}
}
}
Now, if you want to return some message along with the 401 Status Code, you need to use
the other overloaded version of the helper method, which takes the object value as a
parameter. For a better understanding, please modify the Home Controller class as follows:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult UnauthorizedExample()
{
// Return a 401 Unauthorized response
return Unauthorized(new { Message = "You Have Not Access to This Page" });
}
}
}
Now, run the application and navigate to Home/UnauthorizedExample, and you should see
the following/
 294

This is useful when you want to indicate to the client that the request was not authorized
due to a lack of proper authentication or authorization credentials.
NotFoundResult in ASP.NET Core MVC
In ASP.NET Core MVC, the NotFoundResult class returns an HTTP 404 (Not Found)
response. This is often used when a requested resource is unavailable on the server.
For a better understanding, please modify the Home Controller class as follows. In the
example below, the NotFoundExample action method returns a 404 (Not Found) response
using the NotFoundResult class. The shorthand method NotFound() can also be used to
achieve the same result.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public NotFoundResult NotFoundExample()
{
// Return a 404 Not Found response
return new NotFoundResult();
// Or use the shorthand:
 295

// return NotFound();
}
}
}
Now, if you want to return some message along with the 404 Status Code, you need to use
the other overloaded version of the helper method, which takes the object value as a
parameter. For a better understanding, please modify the Home Controller class as follows:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult NotFoundExample()
{
// Return a 404 Not Found response
//return new NotFoundResult("Resource Not Found");
// Or use the shorthand:
return NotFound("Resource Not Found");
}
}
}
This is useful when you want to indicate to the client that the requested resource does not
exist on the server.
OkResult in ASP.NET Core MVC:
In ASP.NET Core MVC, the OkResult class returns an HTTP 200 (OK) response. This is
often used when the server successfully handles a requested resource. Along with
OKResult, you can also use the Ok method, which is also used to return an HTTP 200 (OK)
response, indicating that the request was successful.
For a better understanding, please modify the Home Controller class as follows. In the
example below, the OkExample action method returns a 200 (OK) response using the
OKResult class. The shorthand method OK() can also be used to achieve the same result.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
 296

public IActionResult OkExample()

{
// Return a 200 OK response
return new OkResult();
// Or use the shorthand:
// return Ok();
}
}
}
Now, if you want to return some message along with the 404 Status Code, you need to use
the other overloaded version of the OK helper method, which takes the object value as a
parameter. For a better understanding, please modify the Home Controller class as follows.
In this case, the Ok method will automatically serialize the object to JSON and set the
appropriate content type in the response.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult OkExample()
{
// Return a 200 OK response along with Custom Message
var data = new { Message = "Success" };
// Returns a JSON object with a 200 OK response
return Ok(data);
}
}
}

Object Result in ASP.NET Core MVC:

In this article, I will discuss the Object Result in ASP.NET Core MVC Web Application with
Examples. Please read our previous article discussing StatusResult in ASP.NET Core
MVC Application.
Object Result in ASP.NET Core MVC:
 297

In ASP.NET Core MVC, the ObjectResult is an action result that returns an arbitrary object
to the client. Unlike other result types such as JsonResult, ContentResult, or FileResult,
which have predefined formats, the ObjectResult allows you to return any object from a
controller action, and ASP.NET Core MVC will serialize it to the appropriate format based
on the request’s Accept header and the available formatters configured in the application.
This means that you can return various types of content, such as JSON, XML, or even
custom formats, depending on the client’s preferences and the configuration of your
application.
The ObjectResult class derives from the ActionResult base class and implements the
IStatusCodeActionResult interface. If you go to the definition of ViewResult class, then you
will see the following signature. As you can see, it is a concrete class with a few properties
and methods, and it overrides the ExecuteResultAsync method.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:08 / 03:1110 Sec
How Does the ExecuteResultAsync Method of ObjectResult class Work
in ASP.NET Core MVC?
The ExecuteResultAsync method in the ObjectResult class is responsible for executing the
result of an action method that returns an object result. Here is how the
ExecuteResultAsync method works within the ObjectResult class:
 Setting Response Data: Before returning the ObjectResult from the action
method, we need to set the Value property to specify the object that will be
serialized and sent as the HTTP response body. We can also optionally set
other properties such as StatusCode, SerializerSettings, etc.
 Execution: When the action method returns an ObjectResult object, the
ASP.NET Core MVC framework handles it by calling the ExecuteResultAsync
method of that ObjectResult object.
 Serialization and Writing to Response: Within the ExecuteResultAsync
method, the ASP.NET Core MVC framework serializes the Value object into
 298

the appropriate format (JSON, XML, etc.) based on the content negotiation
process and writes it to the response body along with the specified status
code and content type.
Example to Understand Object Result in ASP.NET Core MVC:
Let us understand ObjectResult in ASP.NET Core MVC with a few examples. First, modify
the Home Controller as follows. Here, you can see that while creating the ObjectResult
instance, we pass the person object to the constrictor. By default, ASP.NET Core will
serialize the person object to JSON because JSON serialization is the most common use
case.
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult GetPerson()
{
var person = new { FirstName = "Pranaya", LastName = "Rout", Age = 35 };
// Return an ObjectResult with JSON serialization
return new ObjectResult(person);
// Or use the shorthand:
// return Ok(person);
}
}
}
Setting ObjectResult Properties:
We can also set the status code, content type, and other properties of the response using
the properties of the ObjectResult class. For a better understanding, please modify the
Home Controller as follows. Here, while creating the ObjectResult instance, we are setting
the Status Code to 200 and ContentTypes to “application/json.”
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult GetPerson()
{
var person = new { FirstName = "Pranaya", LastName = "Rout", Age = 35 };
 299

var result = new ObjectResult(person)

{
StatusCode = 200, // HTTP status code
ContentTypes = new Microsoft.AspNetCore.Mvc.Formatters.MediaTypeCollection
{
"application/json" // Content type(s)
}
};
return result;
}
}
}
In most cases, if you’re returning data in JSON format, using the ObjectResult is not strictly
necessary, as the Ok method, which returns a 200 (OK) response, can be used as
shorthand:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult GetPerson()
{
var person = new { FirstName = "Pranaya", LastName = "Rout", Age = 35 };
// Return a 200 OK response with JSON serialization
return Ok(person);
}
}
}
This approach is cleaner and commonly used for returning data in JSON format for APIs
and similar scenarios.
Differences Between ObjectResult and OKResult in ASP.NET Core MVC:
In ASP.NET Core MVC, both ObjectResult and OkResult are used to return HTTP
responses, but they are used in different scenarios and offer different levels of
customization. Let’s understand the differences between these two result types:
ObjectResult
 300

 It is used to return an HTTP response containing an arbitrary object that will

be serialized and returned as the response body. It’s commonly used to
return data in various formats, such as JSON, XML, or other custom content
types.
 This can be used to return any status code, not just 200 OK. You can set
different status codes based on your application’s requirements.
If you need to return different status codes or provide custom content types, or if you are
building more complex APIs, then you need to use ObjectResult as shown in the below
example:
using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult GetPerson()
{
var person = new { FirstName = "Pranaya", LastName = "Rout", Age = 30 };
var result = new ObjectResult(person)
{
StatusCode = 201, // Created status code
ContentTypes = new Microsoft.AspNetCore.Mvc.Formatters.MediaTypeCollection
{
"application/json", // JSON content type
"application/xml" // XML content type
}
};
return result;
}
}
}
OKResult
 It is specifically used to return a standard HTTP 200 (OK) response.
 It always returns a 200 OK status code suitable for explicitly indicating
success.
 This does not allow you to provide content to be serialized directly. It’s a
simple way to indicate success without including a response body.
In most cases, if you are returning data in JSON format and you want to indicate a
successful response, you can use OK, as shown in the code below:
 301

using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult GetPerson()
{
var person = new { FirstName = "Pranaya", LastName = "Rout", Age = 35 };
// Return a 200 OK response with JSON serialization
return Ok(person);
}
}
}
Why Content Negotiation?
We know that there are three pillars of the internet and they are:
 The Resource
 The URL
 The Representation
The first two (i.e., the resource and the URL) are very straightforward, but the last one (i.e.,
the representation) is a little confusing to understand. Representation is very important in
the modern web. Why? because people are currently not only using Web Applications but
also various types of Mobile applications. The important and interesting fact is that these
devices expect data in various formats.
For example, a few clients want the data in normal HTML, while some want it in normal text
format. Others may need the data in JSON format, and others want it in XML format.
What is Content Negotiation in ASP.NET Core?
Content negotiation is a mechanism used in ASP.NET Core (and other web frameworks)
that allows clients and servers to determine the best way to exchange data. We can also
define Content Negotiation as the process of selecting the best representation for a given
response when multiple representations are available.
One of the REST service standards is that the client should be able to decide in which
format they want the response: XML, JSON, etc. This is called Content Negotiation.
Now, the fact should be clear: Content Negotiation means that the client and the server can
negotiate. It is always impossible to return data in the format requested by the client. That’s
why it is called negotiation, not demand. In such cases, the Web Server will return the data
in the default format. Now, the question that should come to your mind is, how does the
server know or identify in which format the client wants the response? Let us understand
this in detail.
How Content Negotiation Works in ASP.NET Core?
Here’s a basic overview of how content negotiation works in ASP.NET Core:
 302

 Client Request: When a client (like a web browser, mobile app, or other
server) requests an API endpoint, it can specify its preferred data formats
using the Accept header. For example, a client might
specify application/json if it prefers JSON data or application/xml for XML
data.
 Server Response: After processing the request, the server checks
the Accept header and tries to format the response data in one of the
formats specified by the client. If the server can’t fulfill any of the client’s
preferred formats, it will typically respond in its default format.
 Formatters: In ASP.NET Core, output formatters handle the actual
transformation of data into the desired format.
 Returning Results: In your controller actions, you can use methods like Ok(),
ObjectResult(), etc., and the content negotiation process will automatically
ensure that the returned data is in the format preferred by the client. If you
want to bypass content negotiation for a particular action and always return
data in a specific format, you can use methods like Json() to return JSON
data.
 Input Formatters: While output formatters deal with responses, input
formatters handle incoming request data. This allows the client to send data
in various formats (e.g., JSON, XML), and the input formatter will try to
deserialize it into the appropriate object type for use within the application.
How Do We Return XML Response in ASP.NET Core?
By default, ASP.NET Core returns the data in JSON format. If you want to return XML data,
then you need to configure XML Formatter as follows:
builder.Services.AddControllers().AddXmlSerializerFormatters();
Note: We must create an ASP.NET Core Web API Project to test this. We will discuss this
in detail in our ASP.NET Web API section.
When Should We Use Object Result in ASP.NET Core MVC?
The following are some of the scenarios when you might consider using ObjectResult:
 Custom Status Codes: You need to return a specific HTTP status code
other than the standard ones (e.g., 201 Created, 404 Not Found, etc.).
 Custom Content Types: You want to specify a non-standard content type for
the response, like XML, plain text, or a custom media type.
 API Responses: When building APIs, you might want to return responses
with a consistent structure, including status codes, data, and possibly
additional metadata.
 Multiple Formats: You want to provide different response formats (e.g.,
JSON, XML) based on the client’s content negotiation.
EmptyResult in ASP.NET Core MVC
In this article, I am going to discuss the EmptyResult in ASP.NET Core MVC Web
Application with Examples. Please read our previous article, where we discussed
the Object Result in ASP in ASP.NET Core MVC Application.
EmptyResult in ASP.NET Core MVC
In ASP.NET Core MVC, the EmptyResult class is used to return an empty HTTP response
with no content. This is commonly used when you want to indicate that a request has been
successfully processed, but there is no specific content to return in the response body.
Here’s how you can use EmptyResult in an ASP.NET Core MVC controller action:
 303

using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult ProcessRequest()
{
// Perform some processing
// Return an empty HTTP response
return new EmptyResult();
}
}
}
In the example above, the ProcessRequest action performs some processing and then
returns an EmptyResult to indicate the successful processing of the request. This can be
useful when you don’t need to send any data in the response body but still want to signal
that the request was handled successfully.
The EmptyResult is also often used in conjunction with other HTTP status codes to provide
meaningful responses. For example, you might return an EmptyResult with a 204 No
Content status code to indicate that the request was successful, but there’s no additional
content to send:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:03 / 03:1110 Sec

using Microsoft.AspNetCore.Mvc;
namespace ActionResultInASPNETCoreMVC.Controllers
{
public class HomeController : Controller
{
public IActionResult DeleteResource()
{
// Delete the resource
// Return a 204 No Content response with an EmptyResult
return NoContent();
}
}
 304

}
In this example, the NoContent method returns a 204 No Content response, which is
appropriate when you want to signal that the resource has been successfully deleted. Still,
there’s no content to include in the response body.
When to Use EmptyResult in ASP.NET Core MVC?
The EmptyResult class in ASP.NET Core MVC is used when you want to return an empty
HTTP response with no content in the response body. It’s typically used to indicate the
successful handling of a request where there’s no specific data to return. Here are some
scenarios where you might consider using EmptyResult:
 Deletion Operations: After successfully deleting a resource, you might want
to return an empty response to indicate that the deletion was successful. This
is often accompanied by an appropriate status code, such as 204 No
Content.
 Confirmation Responses: In cases where a request’s primary purpose is to
confirm or acknowledge an action, you can use EmptyResult to signal that the
confirmation has been processed.
 Webhooks: When receiving webhook notifications, you might perform certain
actions without needing to return any content. In such cases, an EmptyResult
can indicate that the webhook notification was successfully processed.
 Status or Heartbeat Endpoints: For endpoints that are used for checking
the status of a service or to ensure that the service is up and running, you
might return an empty response as a simple confirmation.
 Response Codes without Data: When you need to return specific HTTP
status codes (like 204 No Content) to indicate a certain outcome without any
additional response body.
Ultimately, using EmptyResult is a way to communicate that a request was successfully
processed without the need for returning any specific content in the response body.

HTML Helpers in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals
HTML Helpers in ASP.NET Core MVC
In this article, I will discuss HTML Helpers in ASP.NET Core MVC Applications with
Examples. The most important point is that using HTML Helpers in an ASP.NET Core MVC
Application greatly reduces the number of HTML tags you generally use to create HTML
Controls.
What are HTML Helpers in ASP.NET MVC?
In ASP.NET MVC, HTML Helpers are methods that generate HTML controls in a View.
They provide a convenient way to generate HTML markup using C# or VB.NET code.
HTML Helpers simplify the process of creating form controls such as textboxes, dropdown
lists, checkboxes, radio buttons, and more. They also provide a way to render HTML
controls in a strongly typed manner, ensuring that the controls are bound to the application’s
data model.
 305

Why HTML Helpers in ASP.NET Core MVC?

An HTML Helper in ASP.NET Core MVC is an extension method of the HTML Helper class,
which is used to generate HTML content in a view. For example, if you want to generate a
textbox with id=”firtsname” and name=”firtsname” then you can type all the required
HTML in a view as shown below.
<input type="text" name="firtsname" id="firstname" />
However, in ASP.NET Core MVC, you can use the TextBox HTML helper method to
generate a text box as follows.
Ad
1/2
00:17

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People Know

@Html.TextBox("firtsname")
You need to remember that several overloaded versions are available for the above
TextBox HTML helper method. To set the value and name, you can use the following
overloaded version of the TextBox helper method.
@Html.TextBox("firtsname", "Pranaya")
At runtime, the above TextBox HTML helper method generates the following HTML
<input id="firtsname" name="firtsname" type="text" value="Pranaya" />
It is also possible to set the HTML attributes of a text box. If you want to do so, you need to
use the following overloaded version of the TextBox HTML helper method.
@Html.TextBox("firtsname", "Pranaya", new { style = "background-color:Red; color:White;
font-weight:bold", title="Please enter your first name" })
Notice that here, we are passing the HTML attributes title and style as an anonymous type
to the TextBox helper method. Some HTML attributes are reserved keywords, such
as readonly, class, etc. If you want to use these attributes within a Helper method, you
must prefix them with the @ symbol, as shown in the example below.
@Html.TextBox("firtsname", "Pranaya", new { @class = "redtextbox", @readonly="true" })
Now, if you want to generate a label, use the Label HTML helper method as follows.
@Html.Label("Name", "Name")
If you want to generate a textbox to enter a password, use the Password HTML Helper
method.
@Html.Password("Password")
Now, if you want to generate a multi-line textbox with 6 rows and 30 columns, then you use
the following TextArea HTML Helper method.
@Html.TextArea("Comments", "", 6, 30, null)
 306

If you want to generate a hidden field, use the Hidden HTML Helper method.
@Html.Hidden("Id")
Types of HTML Helpers in ASP.NET Core MVC
There are different types of HTML Helpers available in ASP.NET MVC, such as:
 Standard HTML Helpers: These helpers generate HTML elements such as
text boxes, checkboxes, radio buttons, etc. Examples include Html.TextBox(),
Html.BeginForm(), Html.CheckBox(), etc.
 Strongly Typed HTML Helpers: These helpers are associated with a specific
data model and provide a type-safe rendering of HTML controls. They use
lambda expressions to refer to model properties directly. Examples include
Html.EditorFor(model => model.PropertyName), Html.DisplayFor(model =>
model.PropertyName), etc.
 Custom HTML Helpers: Developers can create their own HTML Helpers to
encapsulate complex or frequently used HTML markup.
Is it mandatory to use HTML Helpers in ASP.NET Core MVC?
No, using HTML Helpers in ASP.NET Core MVC is not mandatory. HTML Helpers simplify
the creation of HTML elements in your views by returning string representations of HTML
elements, making it easier to generate HTML content dynamically.
However, ASP.NET Core MVC also supports Tag Helpers, which are a newer syntax
introduced with ASP.NET Core. Tag Helpers are similar to HTML Helpers but use a more
HTML-like syntax.
Categories of HTML Helpers Methods in ASP.NET Core MVC Application
In ASP.NET Core MVC, HTML Helpers are categorized into various types based on the
type of HTML element they generate. Each type of HTML Helper is designed to simplify the
process of generating specific types of HTML elements within your views. The following are
some common types of HTML Helpers in ASP.NET Core MVC:
Form HTML Helpers:
Form HTML Helpers generate HTML forms and related elements, such as textboxes,
checkboxes, radio buttons, and dropdown lists. These helpers are used to create forms that
can be used to gather user input. The following are the examples:
 Html.BeginForm
 Html.TextBoxFor
 Html.CheckBoxFor
 Html.RadioButtonFor
 Html.DropDownListFor
 Html.TextAreaFor
Link HTML Helpers:
The Link HTML Helpers generate anchor (<a>) tags that create hyperlinks to different
pages within your application. The following are the examples:
 Html.ActionLink
 Html.RouteLink
Rendering HTML Helpers:
The Rendering HTML Helpers generate raw HTML content or render partial views within
your main view. The following are the examples:
 Html.Raw
 Html.Partial
 307

 Html.RenderPartial
List HTML Helpers:
The List HTML Helper generates HTML lists, such as unordered lists (<ul>) and ordered
lists (<ol>). The following is an example:
 Html.DisplayFor
Validation HTML Helpers:
The Validation HTML Helpers are used to display validation error messages associated with
model properties. The following is an example:
 Html.ValidationMessageFor
HiddenField HTML Helpers:
HiddenField HTML Helpers generate hidden input fields that store data but are not visible to
users.
Example:
 Html.HiddenFor
Editor HTML Helpers:
The Editor HTML Helpers generate input fields with specialized editors for specific data
types, such as dates or numbers. The following is an example:
 Html.EditorFor
Action HTML Helpers:
The Action HTML Helpers generate URLs for different controller actions. The following is an
example:
 Html.Action
Why HTML Helpers in ASP.NET MVC?
HTML Helpers in ASP.NET MVC are utility methods that help generate HTML markup. They
serve several purposes:
 Abstraction of HTML: HTML Helpers abstract the low-level details of HTML
markup generation. Instead of manually writing HTML tags in your views, you
can use HTML Helpers to generate them programmatically.
 Type Safety: HTML Helpers are strongly typed, meaning they are bound to
specific data types. This ensures type safety during compile time, reducing
the chances of runtime errors.
 Code Reusability: By encapsulating common HTML patterns into reusable
methods, HTML Helpers promote code reusability and maintainability. You
can use them across multiple views and share them among different projects.
 Intellisense Support: When you use HTML Helpers in your views, you
benefit from Intellisense support in your IDE. This support provides helpful
suggestions and auto-completion, making development faster and more
efficient.
 Security: Some HTML Helpers automatically handle the encoding of user
input, helping prevent common security vulnerabilities such as Cross-Site
Scripting (XSS) attacks.

TextBox HTML Helper in ASP.NET Core MVC

In this article, I will discuss the TextBox HTML Helper Method in ASP.NET Core
MVC Web Application with Examples. Please read our previous article discussing the basic
concepts of HTML Helpers in ASP.NET Core MVC Applications.
 308

What is TextBox in Web Application?

A TextBox in web applications is a form element that allows users to input text data. It’s a
basic yet essential component in creating web forms, enabling the collection of information
from users. TextBoxes can be used for various purposes, such as entering names, email
addresses, passwords, search queries, and other data. Here are some key points about
TextBoxes in web applications:
 Single-line TextBox: The most common type of TextBox allows users to
input a single line of text. It’s used for short text inputs like names, email
addresses, or search terms.
 Multiline TextBox: A multiline TextBox or textarea can be used for longer
inputs, such as comments or messages. This type of TextBox allows for the
input of text across multiple lines.
 HTML and CSS: In HTML, a single-line TextBox is created using the <input
type=”text”> tag, while a multiline TextBox uses the <textarea></textarea>
tag. These can be styled with CSS to match the design of the web
application.
 Attributes: TextBoxes can have various attributes to control their behavior
and appearance, such as placeholder for displaying hint text, readonly to
make the TextBox display-only, and maxlength to limit the number of
characters a user can input.
How Do We Create TextBox using HTML Helper in ASP.NET Core MVC?
To create a TextBox using the HTML Helper Method in the ASP.NET Core MVC
Application, we need to use the TextBox Helper method. In the ASP.NET Core MVC, we
can use two different types of TextBox Helper methods to generate a textbox in a Razor
view. These two extension methods are TextBox() and TextBoxFor().
The Html.TextBox method is used when you want to specify the name of the form field
manually, while Html.TextBoxFor is used with model properties, providing a strongly typed
approach. That means the TextBox() HTML Helper method is loosely typed, whereas the
TextBoxFor() HTML Helper method is strongly typed.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:16 / 03:1110 Sec

Example to Understand TextBox HTML Helper in ASP.NET Core MVC:

The TextBox HTML Helper in ASP.NET Core MVC is a server-side helper method that
renders an HTML input element of type text. It is used within Razor views to generate HTML
markup for a text box where users can input text. Let us understand how to create a text
box using the TextBox Helper method with an example. First, create a new ASP.NET Core
Web Application using the Model-View-Controller Project template named HTML_HELPER.
Creating Employee Model:
Once you create the project, create a class file with the name Employee.cs within the
Models folder and then copy and paste the following code into it.
namespace HTML_HELPER.Models

public class Employee

 309

public int EmployeeId { get; set; }

public string? EmployeeName { get; set; }

public string? Password { get; set; }

public string? Gender { get; set; }

public string? City { get; set; }

public decimal Salary { get; set; }

}
We will use the above Employee model with TextBox() and TextBoxFor() HTML Helper
methods.
Modifying Home Controller:
Modify the Home Controller as follows. The HomeController is created with one action
method, i.e., the Index action method.
using Microsoft.AspNetCore.Mvc;

namespace HTML_HELPER.Controllers

public class HomeController : Controller

public ActionResult Index()

return View();

}
TextBox() HTML Helper Method in ASP.NET Core MVC:
 310

The Html.TextBox() Helper method creates an element of <input type=”text”> with specified
name, value, and HTML attributes. There are 4 overloaded versions of this Html.TextBox()
Helper method is available, as shown in the image below. The following methods are
loosely typed methods.

Parameters:
 htmlHelper: The HTML helper instance that this method extends. It indicates
that it is an extension method that belongs to the IHtmlHelper class.
 expression: The name of the form field. Expression name, relative to the
current model.
 value: The value of the text input element. If non-null, the value is to be
included in the element.
 format: A string that is used to format the input. The format string is used to
format the “value” attribute unless it comes from model binding.
 htmlAttributes: An object that contains the HTML attributes for the element.
Returns: It returns a new IHtmlContent containing the <input> element of type text.
Modifying the Index View:
Please modify the Index View of the Home Controller as shown below to use the TextBox
Helper method.
@model HTML_HELPER.Models.Employee

@{

ViewData["Title"] = "Home Page";

Layout = null;

@Html.TextBox("EmployeeName", null, new { @class = "form-control" })

Here in @Html.TextBox(“EmployeeName”, null, new { @class = “form-control” })
 EmployeeName: The name of the input element. This should match the
property’s name in your model if you are binding to a model.
 null: This is where you can specify the value of the TextBox. Passing null
means it will be empty by default or filled with data from the model if the name
matches.
 new { @class = “form-control”}: This anonymous object contains HTML
attributes for the TextBox. In this example, it sets the CSS class.
Run the application and view the page source. The textbox will be produced using the
following HTML.
<input class=”form-control” id=”EmployeeName” name=”EmployeeName”
type=”text” value=”” />
 311

In the above example, the first parameter is EmployeeName, a property of the Employee
model that will be set as the name and id of the textbox. The second parameter is the value
that we need to display in the textbox, which is null in the above example because the
TextBox() method will automatically display the value of the EmployeeName property of the
Employee model. The third parameter will be set as the class attribute. The HTML attributes
parameter is an object type so that it can be an anonymous object, and the attributes name
will be its properties starting with @ symbol.
You can also specify any name for the textbox. However, it will not be bound to a model.
@Html.TextBox("myTextBox", "This is value", new { @class = "form-control" })
It will produce the following HTML
<input class=”form-control” id=”myTextBox” name=”myTextBox” type=”text”
value=”This is value” />
TextBoxFor() HTML Helper Method in ASP.NET Core MVC Application:
The TextBoxFor() HTML helper is a strongly typed HTML helper method in ASP.NET Core
MVC that generates a text input element for a form. This helper method binds a model
property to a text box, enabling the framework to handle data display, data posting, and
validation feedback for the associated property automatically. The TextBoxFor() HTML
Helper Method has 3 overloaded versions available in ASP.NET Core MVC, as shown in
the image below.

Parameters:
 htmlHelper: The IHtmlHelper instance that this method extends.
 expression: An expression to be evaluated against the current model.
 format: A string that is used to format the input. The format string is used to
format the expression value in the “value” attribute.
 htmlAttributes: An object that contains the HTML attributes for the element.
Type parameters:
 TModel: The type of the model.
 TResult: The type of expression results.
Returns: It returns a new IHtmlContent containing the <input> element whose type attribute
is set to “text”.
Example to understand the TextBoxFor() HTML Helper Method:
The Html.TextBoxFor method is used with a lambda expression that specifies the model
property to which to bind. This approach is strongly typed and helps prevent errors due to
typos in property names. Copy and paste the following code into Index.cshtml view.
@model HTML_HELPER.Models.Employee

@Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control" })

 312

Here,
 model => model.EmployeeName: A lambda expression that specifies the
property of the model to which this TextBox is bound.
 new { @class = “form-control” }: Similar to the Html.TextBox example sets
the HTML attributes for the TextBox.
Run the application and inspect the element, and you will see that it will produce the
following HTML
<input class=”form-control” id=”EmployeeName” name=”EmployeeName”
type=”text” value=”” />
In the above example, the first parameter in TextBoxFor() HTML Helper Method is a lambda
expression that specifies the EmployeeName property of the Model object to bind with the
textbox. It generates an input-type text element with id and name property, and the
property’s value is set to EmployeeName. The value attribute will be set to the value of the
EmployeeName property of the Model Object.
What are the Differences Between Html.TextBox and Html.TextBoxFor in
ASP.NET Core MVC?
In ASP.NET Core MVC, both Html.TextBox and Html.TextBoxFor are HTML helpers that
generate an HTML <input type=”text”> element. The following are the key differences
between Html.TextBox and Html.TextBoxFor:
Syntax and Usage
 TextBox: This helper is used to specify the name of the form field as a string.
It does not provide strong typing and compile-time checking since the field
name is specified as a string. Syntax: @Html.TextBox(“fieldName”,
(object)value, (object)htmlAttributes).
 TextBoxFor: This helper uses a lambda expression to specify the form field,
offering strong typing and compile-time checking. It is tied directly to a model
property. Syntax: @Html.TextBoxFor(model => model.Property,
(object)htmlAttributes).
Strong Typing
 TextBox is not strongly typed. The input field’s name is provided as a
string, which means you lose the benefits of compile-time checking. Mistyping
the field name results in a runtime error, not a compile-time error.
 TextBoxFor is strongly typed. It uses a lambda expression to refer to the
model property directly, ensuring that any changes to the property name are
reflected at compile time, thus reducing the risk of errors.
Model Binding
 TextBox requires manual association with model properties. Since it uses a
string to identify the field, you need to ensure it matches the model property
name so it binds correctly.
 TextBoxFor automatically binds to the model property specified in the lambda
expression, making it easier to maintain and refactor code as the model
changes.
IntelliSense and Refactoring
 TextBox does not support IntelliSense for the field names since they are just
strings. Refactoring tools will not update these strings if the associated model
property changes.
 313

 TextBoxFor, being strongly typed, supports IntelliSense in the lambda

expression and is automatically updated during refactoring, which helps
maintain code integrity.
Use Cases
 TextBox might be preferred in scenarios where the form field does not directly
correspond to a model property, when dynamic field names are required or
when you require more flexibility in specifying the form field’s name.
 TextBoxFor is generally preferred for most use cases, especially when
working with strongly typed views and models, as it ensures type safety,
reduces errors, and improves developer productivity through IntelliSense and
refactoring support. So, use Html.TextBoxFor for model-driven forms where
you want strong typing, automatic model binding, and validation. It ensures
that your view is tightly coupled with your model, making your code more
maintainable and less error-prone.

DropDownList HTML Helper in ASP.NET Core MVC

In this article, I will discuss the DropDownList HTML Helper Method in ASP.NET Core
MVC Application with Examples. Please read our previous article discussing the TextArea
HTML Helper in ASP.NET Core MVC Application.
What is DropDownList in Web Application?
A DropDownList in a web application is a user interface control that allows users to select a
single item from a list of items presented in a dropdown menu. When it is not activated, it
shows the currently selected item. When clicked or tapped, it displays a list of options from
which the user can select one.
This control is widely used in web forms and applications to save space on the screen, as it
only displays the selected item until interacted with. The DropDownList is particularly useful
for fields that have a fixed set of options, such as:
 Countries
 States or regions within a country
 Categories or types of items
 Settings options that have predefined choices
In HTML, a DropDownList can be created using the <select> element, where each option
within the dropdown is defined using an <option> tag. Here’s a basic example:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:16 / 03:1110 Sec

<select name="country" id="country-dropdown">

<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<!-- Additional countries can be added here -->
</select>
 314

In this example, the DropDownList allows users to select a country from the list. When a
user selects an option, the value of the <select> element (accessible through JavaScript or
on the server side after form submission) becomes the value of the selected <option>.
How Do We Create DropDownList using HTML Helper in ASP.NET Core
MVC?
To create a DropDownList using the HTML Helper Method in the ASP.NET Core MVC
Application, we need to use the DropDownList Helper method. In ASP.NET Core MVC, the
DropDownList HTML Helper generates an <select> element representing a dropdown list in
an HTML form. We can use two different types of DropDownList Helper methods to
generate a textbox in a Razor view. These two extension methods are DropDownList() and
DropDownListFor().
The Html.DropDownList method is used when you want to specify the name of the form
field manually, while Html.DropDownListFor is used with model properties, providing a
strongly typed approach. That means the DropDownList() HTML Helper method is loosely
typed, whereas the DropDownList() HTML Helper method is strongly typed.
What is DropDownList HTML Helper in ASP.NET Core MVC?
The DropDownList HTML Helper in ASP.NET Core MVC is a server-side helper method
that dynamically generates a dropdown list (HTML <select> element) on a web page.
When using the DropDownList HTML Helper, developers can specify the data source for
the dropdown list, the field to be displayed to the user, and the field that represents the
value of each option. This makes it straightforward to bind the dropdown list to data models
or collections, such as lists or enumerations, and to automatically select a value based on
the model’s current state.
Example to Understand DropDownList HTML Helper Method in ASP.NET
Core
A DropDownList in an ASP.NET Core MVC application is nothing but a collection of
SelectListItem objects. Depending on your business requirement, you may either hard code
the values or retrieve the values from a database table. In this article, I am going to discuss
both approaches. First, we will discuss creating the DropDownList using the hard-coded
values and then see how to create the DropDownList with the values from a database.
The following code will generate a department dropdown list. The first item in the drop-down
list will be “Select Department”. Here, we have used the Selected property to true for the
IT element, so elements will be selected by default when the page loads.
@Html.DropDownList("Departments", new List<SelectListItem>
{
new SelectListItem { Text = "IT", Value = "1", Selected=true},
new SelectListItem { Text = "HR", Value = "2"},
new SelectListItem { Text = "Payroll", Value = "3"}
}, "Select Department")
The downside of hard-coding the DropDownList value within the code itself is that if we
have to add or remove departments from the DropDownList, the code must be modified
every time.
How do you set the Dropdown list values from the database in the
ASP.NET Core MVC?
 315

Most of the time, or in real-time applications, we generally get the data from a database. To
understand this, let’s create a Department Class and then populate the values within the
controller. First, add a class file named Department.cs within the Models folder and then
copy and paste the following code into it.
namespace HTML_HELPER.Models
{
public class Department
{
public int Id { get; set; }
public string Name { get; set; } = null!;
}
}
Then, modify the Home Controller as follows. We store the list of departments in the
ViewBag to pass it from the controller action method to the index view.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
//Get the data from the database
//Here we are creating Department list
List<Department> ListDepartments = new List<Department>()
{
new Department() {Id = 1, Name="IT" },
new Department() {Id = 2, Name="HR" },
new Department() {Id = 3, Name="Payroll" },
};
// Retrieve departments and build SelectList
ViewBag.Departments = new SelectList(ListDepartments, "Id", "Name");
return View();
}
 316

}
}
You can also do the same thing in the following way:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<SelectListItem> items = new List<SelectListItem>()
{
new SelectListItem { Text = "IT", Value = "1" },
new SelectListItem { Text = "HR", Value = "2" },
new SelectListItem { Text = "Payroll", Value = "2" }
};
ViewBag.Departments = items;
return View();
}
}
}
Next, modify the Index.cshtml view as follows. In the Index view, access the Department list
from ViewBag.
@Html.DropDownList("Departments", @ViewBag.Departments as List<SelectListItem>,
"Select Department", new { @class = "form-control"})
In the above example, the first parameter is the property name for which we want to display
the list of items. The second parameter is the list of values that will be displayed within the
DropDownList. Here, we have used the ViewBag mechanism to get the department values.
The third parameter is the label, which is nothing but the first item in the drop-down list, and
the fourth parameter is for the HTML attributes like CSS to be applied on the drop-down list.
If you inspect the dropdown list, the code below will be generated.
<select class="form-control" id="Departments" name="Departments"><option
value="">Select Department</option>
<option value="1">IT</option>
 317

<option value="2">HR</option>
<option value="2">Payroll</option>
</select>
How Do We Use Enum to set the Dropdown list values in the ASP.NET
Core MVC Application?
Let’s see how to use Enum to set the Dropdown list values. In this example, we will set the
Gender Values from the enum. So, create a class file named Gender.cs and add the
following Gender enum.
namespace HTML_HELPER.Models
{
public enum Gender
{
Male,
Female
}
}
Copy and paste the following code into the index view.
@using HTML_HELPER.Models
@{
Layout = null;
}
@Html.DropDownList("EmployeeGender",
new SelectList(Enum.GetValues(typeof(Gender))),
"Select Gender",
new { @class = "form-control" })
In the above example, the first parameter is the property name for which we want to display
the list items. The second parameter is the list of values, which will be displayed in the drop-
down list. We have used Enum methods to get Gender enum values. The third parameter is
the label, which will be the first list item in the drop-down list, and the fourth parameter is for
the HTML attributes like CSS to be applied on the dropdown list.
When we run the application, it will generate the following HTML
<select class="form-control" id="EmployeeGender" name="EmployeeGender"><option
value="">Select Gender</option>
<option>Male</option>
<option>Female</option>
 318

</select>
DropDownListFor HTML Helper in ASP.NET Core MVC Application:
The DropDownListFor() is an HTML helper method in ASP.NET Core MVC that is used to
generate a <select> element (a drop-down list) for a web page from a model property. This
helper is strongly typed, meaning it is bound to a specific model property and helps display
a list of options the user can select from. The selected value from the drop-down list can
then be posted back to the server as part of the model during form submission. The
following is a basic example of how it might be used in a view:
@Html.DropDownListFor(model => model.SelectedItemId, new
SelectList(Model.Items, “Value”, “Text”))
In this example:
 model => model.SelectedItemId specifies the model property to which the
drop-down list is bound. This property holds the selected item’s value.
 new SelectList(Model.Items, “Value”, “Text”) creates a new SelectList
object where Model.Items are the collection of items you want to display in
the drop-down. “Value” and “Text” specify the names of the properties in the
Model.Items that contain the values and the display texts of the items,
respectively.
Example to Understand DropDownListFor HTML Helper Method
We will use the following models to understand the DropDownListFor HTML Helper in
ASP.NET Core MVC Application.
Employee.cs
namespace HTML_HELPER.Models
{
public class Employee
{
public int EmployeeId { get; set; }
public string EmployeeName { get; set; } = null!;
public string Gender { get; set; } = null!;
public int DepartmentID { get; set; }
}
}
Department.cs
namespace HTML_HELPER.Models
{
public class Department
{
public int Id { get; set; }
public string Name { get; set; } = null!;
 319

}
}
Gender.cs
namespace HTML_HELPER.Models
{
public enum Gender
{
Male,
Female
}
}
Modify the HomeController as shown below.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
//Let’s create list department for dropdownlist
List<Department> ListDepartments = new List<Department>()
{
new Department() {Id = 1, Name="IT" },
new Department() {Id = 2, Name="HR" },
new Department() {Id = 3, Name="Payroll" },
};
ViewBag.Departments = ListDepartments;
//let’s create one employee
Employee emp = new Employee()
{
EmployeeId = 1,
 320

EmployeeName = "Pranaya",
Gender = "Male",
DepartmentID = 2
};
//Pass that employee to the view
return View(emp);
}
}
}
Modify the Index.cshtml file as shown below:
@using HTML_HELPER.Models
@model Employee
@{
ViewData["Title"] = "Home Page";
Layout = null;
}
@Html.DropDownListFor(emp => emp.Gender,
new SelectList(Enum.GetValues(typeof(Gender))),
"Select Gender",
new { @class = "form-control" })
@Html.DropDownListFor(emp => emp.DepartmentID,
new SelectList(ViewBag.Departments, "Id", "Name"),
"Select Department",
new { @class = "form-control" })
In the above example, the first parameter in the DropDownListFor() HTML Helper method is
a lambda expression that specifies the model property to be bound with the select element.
We have specified the Gender property of the enum type and DepartmentID property. The
second parameter specifies the items to show in the dropdown list using SelectList. The
third parameter is the option Label, which will be the first item of the drop-down list.
Using DropDownList, if you want to show the selected Department of that particular
employee, then you need to use the following code.
@Html.DropDownList("DepartmentID",
new SelectList(ViewBag.Departments, "Id", "Name", Model.DepartmentID),
"Select Department",
new { @class = "form-control" })
 321

What are the Differences Between Html.DropDownListFor and

Html.DropDownList in ASP.NET Core MVC?
In ASP.NET Core MVC, both Html.DropDownList and Html.DropDownListFor helper
methods are used to create a <select> dropdown list element in a view. However, they differ
in syntax and how they bind data from the model to the view. Understanding these
differences can help you choose the right method for your scenario.
 Binding: Html.DropDownList requires manually specifying the name of the
form field and does not provide strong typing or compile-time checks.
Html.DropDownListFor, on the other hand, binds directly to a model property,
ensuring type safety and reducing potential errors.
 Use Cases: Html.DropDownList might be preferred when the dropdown list
does not correspond directly to a model property or when you need to specify
a custom name for the form field. Html.DropDownListFor is better suited for
standard data entry forms where each dropdown list corresponds directly to a
model property.
 Syntax and Type Safety: Html.DropDownListFor uses a lambda expression
to specify the binding property, offering type safety and integration with the
model’s properties. Html.DropDownList relies on a string name, which does
not offer compile-time error checking.
 IntelliSense Support: Html.DropDownList has Limited IntelliSense support
because the field name is a string literal, so there’s no direct link to the
model’s properties. Html.DropDownListFor offers full IntelliSense support due
to its strong typing. This can speed up development by providing quick
access to model properties and reducing errors caused by typos.
RadioButton HTML Helper in ASP.NET Core MVC
In this article, I will discuss How to Generate Radio Buttons using RadioButton HTML
Helper in ASP.NET Core MVC Application with Examples. Please read our previous
article discussing How to Generate DropDownList using HTML Helper in ASP.NET Core
MVC.
What is RadioButton in Web Application?
A Radio Button in web applications is an input element that allows users to select one
option from a predefined set of choices. Radio buttons are particularly useful when you want
the user to pick a single option from multiple choices, where displaying all possible options
at once is preferable for a quick decision. Radio buttons are typically circular or elliptical in
shape and are used to indicate the user’s selection. Here’s how a RadioButton works and is
typically used in web applications:
 Mutually Exclusive: Radio buttons in a group are designed to be mutually
exclusive, meaning that only one option can be selected at a time. When a
user selects a new option, any previously selected option within the same
group becomes deselected.
 Grouping: To enforce mutual exclusivity, radio buttons are grouped together
using the same name attribute in HTML. This ensures that they behave as a
single unit, and only one option can be selected within that group.
 Labels: Radio buttons are often accompanied by labels that describe each
option. Clicking on the label associated with a radio button can also select the
button, enhancing user experience by providing a larger clickable area.
 322

 User Interface: Visually, a radio button appears as a small circle that can be
filled or surrounded by a dot when selected. Unselected radio buttons are
empty circles.
 State Indicator: When selected, a radio button typically displays a small dot
or circle inside it to indicate the chosen option.
 HTML Structure: In HTML, a radio button is represented by an <input>
element with a type attribute set to “radio”. Each radio button within a group
should have the same name attribute and a unique value attribute.
 Use Cases: Radio buttons are commonly used when users need to make a
single choice from a predefined set of options, such as selecting a gender,
choosing a payment method, or indicating a preference.
Here’s a simple HTML example that demonstrates the use of radio buttons:
<form>
<p>Select your age range:</p>
<input type="radio" id="age1" name="age" value="under-18">
<label for="age1">Under 18</label><br>
<input type="radio" id="age2" name="age" value="18-30">
<label for="age2">18-30</label><br>
<input type="radio" id="age3" name="age" value="31-45">
<label for="age3">31-45</label><br>
<input type="radio" id="age4" name="age" value="over-45">
<label for="age4">Over 45</label>
</form>
In this example, users can select their age range from the provided options. Because all
radio buttons share the same name attribute (age), only one of these options can be
selected at a time, ensuring a clear and straightforward selection process.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec
How Do We Create Radio Buttons Using HTML Helper in ASP.NET Core
MVC?
To create a Radio button using the HTML Helper Method in the ASP.NET Core MVC
Application, we need to use the RadioButton Helper method. In the ASP.NET Core MVC,
we can use two different types of RadioButton Helper methods to generate a RadioButton in
a Razor view. These two extension methods are RadioButton() and RadioButtonFor().
The Html.RadioButton method is used when you want to specify the name of the form field
manually, while Html.RadioButtonFor is used with model properties, providing a strongly
typed approach. That means the RadioButton() HTML Helper method is loosely typed,
whereas the RadioButtonFor() HTML Helper method is strongly typed.
What is RadioButton HTML Helper in ASP.NET Core MVC?
The @Html.RadioButton() HTML Helper in ASP.NET Core MVC is a server-side helper
method to generate HTML radio button input elements for your web forms. The RadioButton
 323

helper is specifically designed to create radio buttons that allow users to select one option
from a group of choices.
The basic syntax of the @Html.RadioButton() helper method is as
follows: @Html.RadioButton(string name, object value, bool isChecked, object
htmlAttributes)
Here,
 name: The name attribute of the generated radio button, which is used to
group together multiple radio buttons. Only one radio button in the same
group (i.e., having the same name) can be selected at a time.
 value: The value attribute for the radio button, which represents the value
that will be submitted if this radio button is selected.
 isChecked: A boolean value indicating whether the radio button should be
initially selected (checked) when the page loads.
 htmlAttributes: An anonymous object that can be used to set HTML
attributes for the radio button, such as class, style, id, etc.
Example to Understand RadioButton HTML Helper Method in ASP.NET
MVC:
The Html.RadioButton() HTML Helper method in ASP.NET Core MVC Application is used to
create a radio button element with a specified name, isChecked boolean property, and the
HTML attributes. The Html.RadioButton() HTML Helper method is loosely typed.
Male: @Html.RadioButton("Gender", "Male")
Female: @Html.RadioButton("Gender", "Female")
If you inspect the HTML, then you will see the following HTML
Male: <input id="Gender" name="Gender" type="radio" value="Male" />
Female: <input id="Gender" name="Gender" type="radio" value="Female" />
In the above example, we have created two radio buttons, Male and Female, for the Gender
property. The first parameter is the group name. The point that you need to remember is
that you need to give the same name to both the radio buttons. The second parameter is
the value of the radio button, which will be sent to the server when the respective radio
button is checked. That means if the Male radio button is selected, the string value Male will
be assigned to a model property named Gender and submitted to the server.
What is RadioButtonFor HTML Helper in ASP.NET Core MVC?
The RadioButtonFor() HTML helper in ASP.NET Core MVC is a server-side helper that
generates an HTML radio button input element for a specified model property. This helper
binds a radio button to a model property in your view model, ensuring that the radio button’s
state reflects the current value of the model property when rendering the page, and also
facilitates the process of updating this property when the form is submitted back to the
server.
The RadioButtonFor() helper is strongly typed, meaning it is bound to a specific property of
a model passed to your view from a controller. This binding is established through a lambda
expression, making it more resistant to errors that can occur due to renaming properties in
your model because these changes are often detected at compile time rather than at
runtime.
Here’s a basic syntax example of using RadioButtonFor(): @Html.RadioButtonFor(model
=> model.PropertyName, value, htmlAttributes)
 324

Here,
 model => model.PropertyName: A lambda expression that specifies the
model property to bind to.
 value: The value to be assigned to the radio button when selected.
 htmlAttributes: (Optional) An object containing HTML attributes to set for the
element.
Example to Understand RadioButtonFor HTML Helper in ASP.NET Core
MVC
To understand this, let’s create a new model. Right-click on the Models folder and then add
two class files named Company.cs and Department.cs. Copy and paste the following
code once you create the class files.
Department.cs
namespace HTML_HELPER.Models
{
public class Department
{
public int Id { get; set; }
public string? Name { get; set; }
}
}
Company.cs
namespace HTML_HELPER.Models
{
public class Company
{
public int SelectedDepartment { get; set; }
public List<Department> Departments()
{
List<Department> ListDepartments = new List<Department>()
{
new Department() {Id = 1, Name="IT" },
new Department() {Id = 2, Name="HR" },
new Department() {Id = 3, Name="Manager" },
};
return ListDepartments;
}
}
 325

}
Modifying Home Controller:
Next, modify the Home Controller as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
Company company = new Company();
//company.SelectedDepartment = 2;
return View(company);
}
[HttpPost]
public string Index(Company company)
{
if (company.SelectedDepartment <= 0)
{
return "You did not select any department";
}
else
{
return "You selected department with ID = " + company.SelectedDepartment;
}
}
}
}
Modifying Index Views:
Next, modify the Index.cshtml view as follows.
@model HTML_HELPER.Models.Company
@{
 326

ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
foreach (var department in Model.Departments())
{
@Html.RadioButtonFor(m => m.SelectedDepartment, department.Id)
@department.Name
}
<br />
<br />
<input type="submit" value="Submit" />
}
In the above example, the first parameter in the RadioButtonFor() HTML Helper method is a
lambda expression that specifies the model property to be bound with the RadioButton
element. We have created radio buttons for the SelectedDepartment property in the above
example. So, it generates three <input type=”radio”> elements with id and name set to
property name SelectedDepartment. The second parameter is the value that will be sent to
the server when the form is submitted.
Note: The RadioButtonFor method takes two arguments: an expression to define the model
property and the radio button’s value. When the form is submitted, the selected value will be
bound to the specified model property.
Testing the Application:
Run the application and inspect the HTML. Once you inspect the HTML, you will see that
the following HTML codes are generated by the RadioButton helper method.
<input id="SelectedDepartment" name="SelectedDepartment" type="radio" value="1" />IT
<input id="SelectedDepartment" name="SelectedDepartment" type="radio" value="2"
/>HR
<input id="SelectedDepartment" name="SelectedDepartment" type="radio" value="3"
/>Manager
What are the Differences Between Html.RadioButton and
Html.RadioButtonFor in ASP.NET Core MVC?
In ASP.NET Core MVC, the Html.RadioButton and Html.RadioButtonFor helper methods
are used to generate radio button controls in a form that is tied to model properties.
Understanding the differences between these two methods can help you choose the right
one for your scenario. Here’s a breakdown of their main differences:
Purpose and Usage
 327

 Html.RadioButton: This method creates a radio button manually, specifying

its name and value directly as parameters. It doesn’t directly bind to a model
property. This method is useful when you want full control over the radio
button’s value or when it is not directly tied to a model property.
 Html.RadioButtonFor: This method is strongly typed and creates a radio
button that is automatically bound to a specific property of the model. It uses
a lambda expression to specify the model property. This ensures that the
radio button is directly tied to a model’s property, making it easier to process
form data upon submission.
Model Binding
 Html.RadioButton: Since it doesn’t bind directly to a model property, you
may need to manually handle the retrieval and assignment of values in your
controller actions.
 Html.RadioButtonFor: Provides automatic model binding to the specified
property. When the form is submitted, the value of the selected radio button is
automatically assigned to the corresponding model property.
Validation
 Html.RadioButton: This does not automatically participate in model
validation because it’s not directly tied to a model property.
 Html.RadioButtonFor: This method supports automatic model validation. If
validation attributes are applied to the model property it is bound to, those
validations will automatically be enforced on the client and server sides.
Strong Typing and Compile-Time Checking
 Html.RadioButton: Lacks strong typing since it does not bind directly to a
model property. This means there is no compile-time checking for the
existence or type of the property it represents, leading to potential runtime
errors if mismatches occur.
 Html.RadioButtonFor: Offers strong typing and compile-time checking,
reducing the risk of runtime errors due to property mismatches. This is
because it is directly tied to a model property through the lambda expression.
Use Cases
 Html.RadioButton: This is useful in scenarios where the radio buttons do not
directly map to model properties or when developing forms that combine data
from multiple sources.
 Html.RadioButtonFor: This is ideal for forms that are closely tied to the
model structure, especially when using model validation or when the form
fields directly correspond to model properties.
 328

Check Box HTML Helper in ASP.NET Core MVC

In this article, I will discuss How to Generate Check Boxes using CheckBox HTML
Helper in ASP.NET Core MVC Application with Examples. Please read our previous
article discussing How to Generate Radio Buttons using HTML Helper in ASP.NET Core
MVC.
What is a Check Box in a Web Application?
A CheckBox in a web application is a form input element that allows users to select one or
more options from a set of alternatives. It is typically represented as a small square box that
can be either checked (selected) or unchecked (not selected). CheckBoxes are used when
there is one or more options that can be selected independently, and submitting the form
can proceed with any combination of options selected or none at all.
The HTML element for creating a CheckBox is <input> with the attribute type=”checkbox”.
Each CheckBox in a form is associated with a specific value, and when the form is
submitted, the values of the checked (selected) CheckBoxes are sent to the server as part
of the form data. Here’s a simple example of HTML code using CheckBoxes:
<form action="/submit-form" method="post">

<label>

<input type="checkbox" name="interest" value="music">

Music

</label>

<label>

<input type="checkbox" name="interest" value="books">

Books

</label>

<label>

<input type="checkbox" name="interest" value="sports">

Sports

</label>

<input type="submit" value="Submit">

</form>
 329

In this example, users can select their interests among music, books, and sports. The form
will send the values of the selected interests to the server when submitted. CheckBoxes are
useful in web applications for various purposes, such as settings that can be turned on or
off independently, multiple selections from a list of options, and features like agreeing to
terms and conditions.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec

Key Characteristics of Check Boxes:

 Binary State: A checkbox has two possible states: checked and unchecked.
When a checkbox is checked, it usually displays a checkmark or a similar
indicator inside the checkbox.
 Independent Selection: Checkboxes are independent of each other,
meaning each checkbox represents a separate choice, and multiple
checkboxes can be checked simultaneously.
 HTML Structure: In HTML, a checkbox is represented by an <input> element
with a type attribute set to “checkbox”. The value attribute defines the value
that will be sent to the server when the checkbox is checked and the form is
submitted.
 Use Cases: Checkboxes are commonly used for scenarios where users must
indicate their preferences, select multiple items from a list, or enable/disable
certain features or options.
How Do We Create Check Boxes Using HTML Helper in ASP.NET Core
MVC?
To create a checkbox using HTML Helpers in ASP.NET Core MVC, we need to use
Html.CheckBox or Html.CheckBoxFor methods within our Razor views. The Html.CheckBox
method is used when you want to specify the name of the form field manually, while
Html.CheckBoxFor is used with model properties, providing a strongly typed approach. That
means the CheckBox() HTML Helper method is loosely typed, whereas the CheckBoxFor()
HTML Helper method is strongly typed.
What is CheckBox HTML Helper in ASP.NET Core MVC?
The CheckBox HTML Helper in ASP.NET Core MVC is a server-side helper used to
generate a checkbox input (a boolean input) in a form that is being rendered as HTML. The
CheckBox HTML Helper is specifically used for generating checkboxes that the user can
check or uncheck. These checkboxes are often used for true/false or yes/no options.
Generate a Single Checkbox using the CheckBox Helper Method:
You can use the CheckBox method to generate a single checkbox. This method generates
an HTML input element of type “checkbox” and associates it with a property in your model.
If you need more manual control or aren’t using a strongly-typed model, you can use
Html.CheckBox.
@Html.CheckBox("IsSubscribed")

Subscribe to Newsletter
It will generate the following HTML Element.
 330

<input id="IsSubscribed" name="IsSubscribed" type="checkbox" value="true" /><input

name="IsSubscribed" type="hidden" value="false" />
What is CheckBoxFor HTML Helper in ASP.NET Core MVC?
The CheckBoxFor HTML helper in ASP.NET Core MVC is a strongly typed helper method
used to generate a checkbox input element for a form. The CheckBoxFor helper binds a
model property to a checkbox input, making it easier to submit form data, including
validation and model binding back to the server.
The CheckBoxFor method is used within a Razor view and requires a lambda expression
specifying the model property to which it is bound. When the form is submitted, the value of
the checkbox (whether it is checked or not) is automatically bound to the model property,
facilitating the handling of user input on the server side.
Generate a Single Checkbox using the CheckBoxFor Helper Method:
To generate a single checkbox, you can use the CheckBoxFor method. This approach
binds the checkbox to a specific property on your model. It’s strongly typed and
recommended for most scenarios where you’re working with model data. This method
generates an HTML input element of type “checkbox” and associates it with a property in
your model. So, let us first create a class file named NewsLetter.cs and then copy and
paste the following code into it.
namespace HTML_HELPER.Models

public class NewsLetter

public bool IsSubscribed { get; set; }

}
Next, modify the Home Controller as follows:
using HTML_HELPER.Models;

using Microsoft.AspNetCore.Mvc;

namespace HTML_HELPER.Controllers

public class HomeController : Controller

{
 331

[HttpGet]

public ActionResult Index()

NewsLetter model = new NewsLetter();

model.IsSubscribed = false;

return View(model);

[HttpPost]

public string Index(NewsLetter model)

if (model.IsSubscribed)

return "You Subscribed to our Newsletter";

else

return "You Have Not Subscribed to our Newsletter";

}
Next, modify the Index.cshtml file as follows:
@model HTML_HELPER.Models.NewsLetter

@{
 332

ViewBag.Title = "Index";

Layout = null;

<h2>Index</h2>

@using (Html.BeginForm())

@Html.CheckBoxFor(model => model.IsSubscribed)

<label for="IsSubscribed">Subscribe to Newsletter</label>

<br/><br/>

<input type="submit" value="Submit" />

}
In this example, IsSubscribed is a boolean property in the model that will hold the
checked/unchecked state of the checkbox. The CheckBoxFor method takes an expression
as an argument to define the model property. When the form is submitted, the
checked/unchecked state will be bound to the specified model property.
Now, run the application and click the Submit button without checking the check box. Notice
that you are getting a message stating You Have Not Subscribed to our Newsletter. On the
other hand, if you check the check box and then click the Submit button, you will see the
You Subscribed to our Newsletter message.
Generating Multiple Check Boxes using CheckBoxFor Helper Method:
In ASP.NET Core MVC, you can generate multiple checkboxes using the CheckBoxFor
helper method by binding them to your model’s collection property. Here’s a step-by-step
guide to demonstrate how to achieve this: We want to create the interfaces with the
following checkboxes.
 333

Our requirement is when we select the checkboxes and click on the submit button. All the
selected checkbox values should display as “You selected – Checkbox Values,” if we
don’t select any checkbox, then the message should be “You have not selected any City”
displayed.
First, create a class file named City.cs and copy and paste the following code into it.
namespace HTML_HELPER.Models

public class City

public int CityId { get; set; }

public string? CityName { get; set; }

public bool IsSelected { get; set; }

}
Next, modify the Home Controller as follows:
using HTML_HELPER.Models;
 334

using Microsoft.AspNetCore.Mvc;

using System.Text;

namespace HTML_HELPER.Controllers

public class HomeController : Controller

[HttpGet]

public ActionResult Index()

List<City> CityList = new List<City>()

new City(){ CityId = 1, CityName = "London", IsSelected = false },

new City(){ CityId = 2, CityName = "New York", IsSelected = false },

new City(){ CityId = 3, CityName = "Sydney", IsSelected = true },

new City(){ CityId = 4, CityName = "Mumbai", IsSelected = false },

new City(){ CityId = 5, CityName = "Cambridge", IsSelected = false },

new City(){ CityId = 6, CityName = "Delhi", IsSelected = false },

new City(){ CityId = 7, CityName = "Hyderabad", IsSelected = true }

};

return View(CityList);

[HttpPost]

public string Index(IEnumerable<City> cities)

{
 335

if (cities.Count(x => x.IsSelected) == 0)

return "You have not selected any City";

else

StringBuilder sb = new StringBuilder();

sb.Append("You Selected - ");

foreach (City city in cities)

if (city.IsSelected)

sb.Append(city.CityName + ", ");

sb.Remove(sb.ToString().LastIndexOf(","), 1);

return sb.ToString();

}
Next, modify the Index.cshtml file as follows:
In the below view, CheckBoxFor is used inside a loop to render checkboxes for each item in
the collection. A hidden field is also used to maintain each item’s ID. When the form is
submitted, the selected checkboxes are sent to the corresponding action method.
@model List<HTML_HELPER.Models.City>
 336

@{

ViewBag.Title = "Index";

Layout = null;

@using (Html.BeginForm())

for (var i = 0; i < Model.Count(); i++)

<table>

<tr>

<td>

@Html.HiddenFor(it => it[i].CityId)

@Html.HiddenFor(it => it[i].CityName)

@Html.DisplayFor(it => it[i].CityName)

</td>

<td>

@Html.CheckBoxFor(it => it[i].IsSelected, new { Style = "vertical-align:3px}" })

</td>

</tr>

</table>

<input id="Submit1" type="submit" value="submit" />

}
Note:
 337

 HiddenFor: Hidden Field to maintain the ID.

 DisplayFor: DisplayFor displays the checkbox name (text).
 CheckboxFor: CheckBoxFor displays the checkbox.
That’s it. We are done with our implementation. Now, run the application and test the
requirements; you will see it works as expected.
What are the Differences Between Html.CheckBox and
Html.CheckBoxFor in ASP.NET Core MVC?
In ASP.NET Core MVC, CheckBox and CheckBoxFor are HTML helper methods that
generate HTML checkbox input elements. Despite their similar purpose, these two helpers
differ mainly in how they are used and their integration with model properties.
 Model Binding: The most significant difference is that CheckBoxFor uses a
lambda expression to bind the checkbox directly to a model property,
ensuring that the state of the checkbox is synced with that property.
CheckBox, on the other hand, requires manual handling of its state and does
not bind directly to a model property.
 Syntax and Usage: CheckBoxFor takes a lambda expression that points to a
model property, while CheckBox takes a string name and a boolean state.
This makes CheckBoxFor more strongly typed, reducing errors and
simplifying model binding.
 Intended Use: CheckBox is more flexible and can be used when the
checkbox does not directly correspond to a model property. CheckBoxFor is
specifically designed for scenarios where the checkbox is a direct
representation of a model property, facilitating easier data binding and
validation.
 Use Cases: If you are working with a view model and want to ensure strong
typing and model binding and simplify form submission and validation,
CheckBoxFor is the preferred option. If you need a checkbox that is not
directly tied to a model or requires more control over the input’s attributes,
CheckBox offers the necessary flexibility.
ListBox HTML Helper in ASP.NET Core MVC
In this article, I will discuss How to Generate a ListBox using ListBox HTML Helper in
ASP.NET Core MVC Application with Examples. Please read our previous article, where
we discussed How to Generate Check Boxes using CheckBox HTML Helper in
ASP.NET Core MVC.
What is a ListBox in Web Application?
A ListBox in web applications is one of the input elements that allows users to select one or
more items from a list displayed within a box. Users interact with a ListBox by clicking on
the items it contains, which can be plain text items or more complex elements depending on
the application’s requirements.
Key Characteristics of a ListBox:
 Multiple Selections: A ListBox can be configured to allow users to select
multiple items. This is typically achieved by holding down the Ctrl (or
Command on macOS) key while clicking to select or deselect individual items
or using the Shift key to select a range of contiguous items.
 Scrollable: If the number of items exceeds the space available to display
them, the ListBox can become scrollable, allowing users to navigate through
the list without changing its overall size or the layout of the page.
 338

Single-Select and Multi-Select Modes: A ListBox can operate in single-


select mode, where users can select only one item at a time, or multi-select
mode, where users can select multiple items simultaneously (usually by
holding down the Ctrl key or Shift key).
 HTML Structure: In HTML, a ListBox is created using the <select> element.
Inside the <select> element, you can include one or more <option> elements,
each representing an item in the list.
 Labeling and Values: Each <option> element can have both display text and
a corresponding value associated with it. The value is what gets sent to the
server when the form is submitted.
Example of a Single Select ListBox in HTML:
<label for="fruits">Select a fruit:</label>
<select id="fruits" name="selectedFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
Example of a Multi-Select ListBox in HTML:
<label for="colors">Select your favorite colors:</label>
<select id="colors" name="selectedColors" multiple>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
In the Multi Select ListBox example, the multiple attribute on the <select> element enables
users to select multiple colors at once. ListBoxes are valuable for gathering user choices,
allowing users to select preferences, and making multiple selections from a list of options.
How Do We Create a ListBox Using HTML Helper in ASP.NET Core MVC?
To create a ListBox using HTML Helpers in ASP.NET Core MVC, we need to use
Html.ListBox or Html.ListBoxFor methods within our Razor views. The Html.ListBox method
is used when you want to specify the name of the form field manually, while
Html.ListBoxFor is used with model properties, providing a strongly typed approach. That
means the ListBox() HTML Helper method is loosely typed, whereas the ListBoxFor() HTML
Helper method is strongly typed.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:11 / 03:1110 Sec
What is ListBoxFor HTML Helper in ASP.NET Core MVC?
 339

The ListBoxFor HTML helper in ASP.NET Core MVC is a server-side helper used to
generate a <select> HTML element with the “multiple” attribute, allowing users to select
multiple options from a list. The ListBoxFor helper is specifically designed to work with
model properties. It is strongly typed, meaning it binds directly to model properties in your
MVC application, ensuring compile-time checking of the property names you are binding to,
which reduces the risk of errors.
Syntax: @Html.ListBoxFor(model => model.SelectedIds, new
SelectList(Model.AvailableOptions, “Value”, “Text”))
Here,
 model => model.SelectedIds indicates the model property to which the
ListBoxFor will bind. This property should be a collection that will hold the
values of the selected options.
 new SelectList(Model.AvailableOptions, “Value”, “Text”) is used to
generate the list items for the <select> element. Model.AvailableOptions is a
collection within your model that holds the options to be displayed. “Value”
and “Text” specify the property names in AvailableOptions that will be used
for the option values and display texts, respectively.
List Box Example using ListBoxFor HTML Helper in ASP.NET Core MVC:
You can use the ListBoxFor HTML Helper Method in the ASP.NET Core MVC Application to
generate a list box. This method generates an HTML <select> element with <option>
elements representing the available options. We need to generate the following list box.

We want to allow the user to select one or more cities from the ListBox. Once the user
selects the cities and clicks on the Submit button, we need to display the names of the
selected cities separated by a comma. If the user doesn’t select any city and clicks on the
Submit button, then the No Cities are Selected message should be displayed.
Creating Models:
First, you need a model that contains a list of items to populate the ListBox and possibly a
property to hold the selected item(s). First, create a class file named City.cs and copy and
paste the following code into it.
namespace HTML_HELPER.Models
 340

{
public class City
{
public int CityId { get; set; }
public string? CityName { get; set; }
public bool IsSelected { get; set; }
}
}
Next, we need to create a View Model. In ASP.NET Core MVC, view models are nothing
but a mechanism to shuttle data between the controller and the view. To create the View
Model, right-click on the Models folder and add a new class file named CitiesViewModel.
Once you create the CitiesViewModel, copy and paste the following code. This class is
going to be the model for our view.
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Models
{
public class CitiesViewModel
{
public IEnumerable<int>? SelectedCities { get; set; }
public IEnumerable<SelectListItem>? Cities { get; set; }
}
}
Next, we need to modify the HomeController as follows:
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
private List<City> CityList;
public HomeController()
{
 341

CityList = new List<City>()

{
new City(){ CityId = 1, CityName = "London", IsSelected = false },
new City(){ CityId = 2, CityName = "New York", IsSelected = false },
new City(){ CityId = 3, CityName = "Sydney", IsSelected = false },
new City(){ CityId = 4, CityName = "Mumbai", IsSelected = false },
new City(){ CityId = 5, CityName = "Cambridge", IsSelected = false },
new City(){ CityId = 6, CityName = "Delhi", IsSelected = false },
new City(){ CityId = 7, CityName = "Hyderabad", IsSelected = false }
};
}
[HttpGet]
public ActionResult Index()
{
List<SelectListItem> citiesSelectListItems = new List<SelectListItem>();
foreach (City city in CityList)
{
SelectListItem selectList = new SelectListItem()
{
Text = city.CityName,
Value = city.CityId.ToString(),
Selected = city.IsSelected
};
citiesSelectListItems.Add(selectList);
}
CitiesViewModel citiesViewModel = new CitiesViewModel()
{
Cities = citiesSelectListItems
};
return View(citiesViewModel);
}
[HttpPost]
public string Index(IEnumerable<int> selectedCities)
 342

{
if (selectedCities == null)
{
return "No Cities Selected";
}
else
{
//First Fetch the Names of the Cities Selected
var CityNames = CityList
.Where(t => selectedCities.Contains(t.CityId))
.Select(item => item.CityName).ToList();
StringBuilder sb = new StringBuilder();
sb.Append("Your Selected City Names - " + string.Join(",", CityNames));
return sb.ToString();
}
}
}
}
Next, modify the Index.cshtml view file as follows.
@model HTML_HELPER.Models.CitiesViewModel
@{
ViewBag.Title = "Index";
}
<div style="font-family:Arial">
<h2>Index</h2>
@using (Html.BeginForm())
{
@Html.ListBoxFor(m => m.SelectedCities, Model.Cities, new { size = 7 })
<br />
<input type="submit" value="Submit" />
}
</div>
 343

Note: In order to select multiple items from the list box, you need to hold down the CTRL
Key. Run the application and see if everything is working as expected.
What is ListBox HTML Helper in ASP.NET Core MVC?
The ListBox HTML Helper in ASP.NET Core MVC is a server-side helper used to generate
a list box (a <select> element with the “multiple” attribute) on a web page. To use the
ListBox HTML Helper, you generally need to specify the name of the form field and a
selection list (usually provided as SelectList or IEnumerable<SelectListItem>). Optionally,
you can also include HTML attributes to customize the appearance or behavior of the list
box.
Syntax: @Html.ListBox(“MyListBox”, Model.MySelectListItems, new { @class = “my-
custom-class” })
Here:
 “MyListBox” is the name of the form field.
 Model.MySelectListItems is the collection that populates the list box, where
MySelectListItems is typically a property of the model passed to the view
containing a collection of SelectListItem objects.
 new { @class = “my-custom-class” } represents HTML attributes to add to
the generated <select> element, such as a CSS class.
ListBox Example using ListBox HTML Helper in ASP.NET Core MVC:
Let us understand How we can use the ListBox HTML Helper in ASP.NET Core MVC
Application, which is not a strongly typed HTML helper. We are going to do the same
example using ListBox HTML Helper. So, modify the Home Controller class as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
private List<City> CityList;
public HomeController()
{
CityList = new List<City>()
{
new City(){ CityId = 1, CityName = "London", IsSelected = false },
new City(){ CityId = 2, CityName = "New York", IsSelected = false },
new City(){ CityId = 3, CityName = "Sydney", IsSelected = false },
new City(){ CityId = 4, CityName = "Mumbai", IsSelected = false },
new City(){ CityId = 5, CityName = "Cambridge", IsSelected = false },
 344

new City(){ CityId = 6, CityName = "Delhi", IsSelected = false },

new City(){ CityId = 7, CityName = "Hyderabad", IsSelected = false }
};
}
[HttpGet]
public ActionResult Index()
{
List<SelectListItem> citiesSelectListItems = new List<SelectListItem>();
foreach (City city in CityList)
{
SelectListItem selectList = new SelectListItem()
{
Text = city.CityName,
Value = city.CityId.ToString(),
Selected = city.IsSelected
};
citiesSelectListItems.Add(selectList);
}
CitiesViewModel citiesViewModel = new CitiesViewModel()
{
Cities = citiesSelectListItems
};
ViewBag.CitiesViewModel = citiesViewModel;
return View();
}
[HttpPost]
public string Index(IEnumerable<int> selectedCities)
{
if (selectedCities == null)
{
return "No Cities Selected";
}
else
 345

{
//First Fetch the Names of the Cities Selected
var CityNames = CityList
.Where(t => selectedCities.Contains(t.CityId))
.Select(item => item.CityName).ToList();
StringBuilder sb = new StringBuilder();
sb.Append("Your Selected City Names - " + string.Join(",", CityNames));
return sb.ToString();
}
}
}
}
Next, modify the Index.cshtml file as follows:
@{
ViewBag.Title = "Index";
CitiesViewModel citiesViewModel = ViewBag.CitiesViewModel;
}
<div style="font-family:Arial">
<h2>Index</h2>
@using (Html.BeginForm())
{
@*@Html.ListBox("selectedCities", citiesViewModel.Cities,
citiesViewModel.SelectedCities)*@
@Html.ListBox("selectedCities", citiesViewModel.Cities, new { size = 7 })
<br />
<input type="submit" value="Submit" />
}
</div>
With the above changes in place, run the application, and you should get the expected
output.
What are the Differences Between ListBox and ListBoxFor in ASP.NET
Core MVC?
In ASP.NET Core MVC, ListBox and ListBoxFor are HTML helper methods used to create a
list box (a select element) that allows users to select one or more items. While both serve
 346

similar purposes, they differ primarily in their usage syntax and how they bind to model
properties. Here’s a breakdown of the differences:
ListBox:
 Usage: It creates a list box without strongly typed model binding. The name
parameter corresponds to the name of the form field, and it collects the
selected value(s) upon form submission.
 Flexibility: Since it is not strongly tied to a model property, ListBox offers
more flexibility in scenarios where you don’t have a direct model property to
bind or when working with dynamic views.
 Binding: The binding is manual. You must ensure that the selected values
match those in your model or data source, especially in postback scenarios.
ListBoxFor:
 Usage: It is used for strongly typed model binding. The expression parameter
is a lambda expression that identifies the model property to which to bind.
This approach integrates tightly with the model validation and binding
features of ASP.NET Core MVC.
 Strong Typing: ListBoxFor ensures compile-time checking of the expression
passed to it, reducing the risk of errors due to mistyped property names.
 Model Binding: It automatically binds the selected value(s) to the specified
model property. This is particularly useful for scenarios involving form
submissions and model validation, as it simplifies the process of capturing
and validating user input.
Choosing Between ListBox and ListBoxFor:
The choice between ListBox and ListBoxFor depends on the specific requirements of your
application:
 Use ListBox when you need a dropdown list that is not directly tied to a model
property or when working in a dynamically generated UI where model
properties might not be known at compile time.
 Use ListBoxFor when working with a strongly typed model where you want to
take advantage of MVC’s model binding and validation features. It’s
particularly useful in forms where capturing user input directly into a model is
desired.
Editor HTML Helper in ASP.NET Core MVC
In this article, I will discuss How to Use Editor HTML Helper in ASP.NET Core
MVC Application to generate input HTML elements. Please read our previous article, where
we discussed How to Generate a List Box using List Box HTML Helper in ASP.NET
Core MVC Application.
Editor HTML Helper in ASP.NET Core MVC
As of now, we have seen and used different types of HTML Helper methods to generate
different types of HTML elements in ASP.NET Core MVC applications. In ASP.NET Core
MVC, the Editor HTML Helper is a method used to generate an HTML input element based
on the data type and metadata of a model property. It is commonly used within views to
render input fields for properties of a model object.
Data Types and Its Equivalent HTML Elements:
The Editor HTML Helper automatically selects the appropriate editor template based on the
data type of the rendered property. It uses the model metadata to determine how to
generate the input field, taking into account factors such as data type, display format,
 347

validation attributes, etc. The following diagram lists the HTML element that is created for
each data type by the Editor() or EditorFor() method.

Conquering the clouds on a journey to Ta Xua with the team - Road Trip Vietnam Team
- Nếm TV00:05 / 02:5410 Sec
Editor HTML Helper Method in ASP.NET Core MVC:
Editor is a generic method that creates an input element for the specified model property. It
is used when you want to manually specify the type of input element or provide additional
attributes. The Editor HTML Helper method requires a string expression as a parameter to
specify the property name. This Editor() extension method creates the input HTML element
based on the data type of the specified expression. Syntax:
@Html.Editor(“PropertyName”)
Let’s understand how to use Editor HTML Helper in an ASP.NET Core MVC Application
with one example. First, create a class file named Employee.cs within the Models folder
and copy and paste the following code into it.
namespace HTML_HELPER.Models
{
public class Employee
{
public int EmployeeId { get; set; }
public string? Name { get; set; }
public Gender Gender { get; set; }
public int Age { get; set; }
public bool IsNewlyEnrolled { get; set; }
public DateTime? DOB { get; set; }
}
public enum Gender
{
Male,
 348

Female
}
}
Next, modify the HomeController as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Employee emp = new Employee()
{
EmployeeId = 101,
Name = "Pranaya",
Gender = Gender.Male,
Age = 30,
IsNewlyEnrolled = true,
DOB = Convert.ToDateTime("29-02-1988")
};
return View(emp);
}
}
}
Next, modify the Index.cshtml view file as follows.
@using HTML_HELPER.Models
@model Employee
<table>
<tr>
<td>EmployeeId</td>
<td>@Html.Editor("EmployeeId")</td>
</tr>
 349

<tr>
<td>Name</td>
<td>@Html.Editor("Name")</td>
</tr>
<tr>
<td>Gender</td>
<td>@Html.Editor("Gender")</td>
</tr>
<tr>
<td>Age</td>
<td>@Html.Editor("Age")</td>
</tr>
<tr>
<td>IsNewlyEnrolled</td>
<td>@Html.Editor("IsNewlyEnrolled")</td>
</tr>
<tr>
<td>DOB</td>
<td>@Html.Editor("DOB")</td>
</tr>
</table>
Now, run the application; it will give you the following output.
 350

In the above example, we have specified the property names of the Employee model. So,
the Editor HTML Helper method creates the appropriate input elements based on the
datatype of Employee model properties, as shown in the above image.
EditorFor HTML Helper Method in ASP.NET Core MVC:
EditorFor is a strongly typed method that generates an input element based on the type of
the model property. It infers the appropriate input type based on the data type of the
property. It is typically used when you want to use the model metadata or apply custom
display/editor templates. Example: @Html.EditorFor(model => model.PropertyName)
The EditorFor HTML Helper method is a strongly typed helper method. As it is a strongly
typed method, we must use a lambda expression to specify the name. Let us understand
this with an example. Please modify the index.cshtml view as shown below to use the
EditorFor extension method
@using HTML_HELPER.Models
@model Employee
<br />
<table>
<tr>
<td>EmployeeId</td>
<td>@Html.EditorFor(emp => emp.EmployeeId)</td>
</tr>
<tr>
<td>Name</td>
<td>@Html.EditorFor(emp => emp.Name)</td>
</tr>
<tr>
<td>Gender</td>
<td>@Html.EditorFor(emp => emp.Gender)</td>
</tr>
<tr>
<td>Age</td>
<td>@Html.EditorFor(emp => emp.Age)</td>
</tr>
<tr>
<td>IsNewlyEnrolled</td>
<td>@Html.EditorFor(emp => emp.IsNewlyEnrolled)</td>
</tr>
<tr>
 351

<td>DOB</td>
<td>@Html.EditorFor(emp => emp.DOB)</td>
</tr>
</table>
In the above example, we specified the property name using the lambda expression. The
result is the same whether you use the Editor() or the EditorFor() extension method. Now,
run the application; it will give you the same output.
What are the Differences Between Editor and EditorFor in ASP.NET Core
MVC?
In ASP.NET Core MVC, Editor, and EditorFor are HTML helper methods used to render
form fields for model properties in a Razor view. However, they differ in how they are used
and the level of control they provide.
Usage:
 Editor: This is a static method available in the HtmlHelper class. It’s generally
used when you want to render a form field for a specific property of a model
and don’t need to specify much about the rendering behavior.
 EditorFor: This is a strongly typed method based on the model’s metadata.
It’s used when you want to render a form field based on a property’s data
type and possibly use additional attributes specified in the model (like data
annotations).
Customization:
 Editor: It provides less customization as it directly renders an input field
based on the type of the property. You have to handle additional
customization manually.
 EditorFor: It provides more customization options. It renders the input field
based on the property’s data type and uses model metadata for additional
attributes like display name, validation attributes, etc. You can also create
custom editor templates for specific data or property types to customize
rendering further.
Strongly Typed:
 EditorFor is strongly typed, meaning it relies on the model type and its
metadata to render form fields. This helps catch errors at compile-time and
provides better IntelliSense support in Razor views.
 Editor is not strongly typed, so you need to manually specify the property
name or use a magic string to refer to model properties. This can lead to
runtime errors if the property name is mistyped.
 352

Password HTML Helper in ASP.NET Core MVC

In this article, I will discuss How to Use Password Field HTML Helper in ASP.NET Core
MVC Application to Generate Password Fields with Examples. Please read our previous
article, where we discussed How to Use Editor HTML Helper in ASP.NET Core
MVC Application.
What is Password Input Filed in Web Application?
A password input field in a web application is a type of form field specifically designed for
users to input their passwords securely. In HTML, the input element with the type attribute
set to “password” is used to create a password input field. When users type their passwords
into this field, the characters are usually masked (often displayed as asterisks or dots) to
prevent anyone nearby from seeing the password. This helps protect the confidentiality of
the user’s login credentials.
This type of input field is specifically designed for users to securely enter sensitive
information, such as passwords, PIN codes, or other confidential data. Here’s the basic
structure of a password input field in HTML:
<label for="password">Password:</label>
<input type="password" id="password" name="password">
In this example:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:03 / 03:1110 Sec
 <label for=”password”>Password:</label>: This is a label element that is
associated with the password input field. It helps improve accessibility by
providing a text description for the input.
 <input type=”password” id=”password” name=”password”>: This is the
password input field itself. The type attribute is set to “password”, which
specifies that it should behave as a password input. The id attribute
associates the input with the label, and the name attribute is used to identify
the field when the form is submitted.
The key feature of a password input field is its ability to mask the entered characters to
enhance security. This helps protect sensitive information from being easily visible to
others, especially when entered on shared or public computers. When the form containing
the password input is submitted, the entered value is sent to the server like any other form
input, and it’s the server’s responsibility to handle and store passwords securely.
How Do We Create Password Filed Using HTML Helper in ASP.NET Core
MVC?
To create a Password Input Field, i.e., <input type=”password”> using HTML Helpers in
ASP.NET Core MVC, we must use Password or PasswordFor methods within our Razor
views.
The Password method is used when you manually specify the form field’s name, while
PasswordFor is used with model properties, providing a strongly typed approach. That
means the Password() HTML Helper method is loosely typed, whereas the PasswordFor()
HTML Helper method is strongly typed.
What is the Password HTML Helper Method in ASP.NET Core MVC?
 353

The Html.Password() HTML Helper method in ASP.NET Core MVC generates an input
password element with a specified name, value, and HTML attributes. Two overloaded
Password() Helper Method versions are available.
IHtmlContent Password(this IHtmlHelper htmlHelper, string expression)
IHtmlContent Password(this IHtmlHelper htmlHelper, string expression, object value)
Let’s see an example of understanding the Password HTML Helper in ASP.NET Core
MVC. First, create a class file named LoginModel.cs and copy and paste the following
code into it.
namespace HTML_HELPER.Models
{
public class LoginModel
{
public int LoginId { get; set; }
public string? loginName { get; set; }
public string? LoginPassword { get; set; }
}
}
Next, modify the HomeController as follows:
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Next, modify the Index.cshtml file as follows:
@model HTML_HELPER.Models.LoginModel
@{
Layout = null;
}
 354

@Html.Password("LoginPassword")
Run the application and inspect the HTML for the password field text box. It will generate
the following HTML for the Password field.
<input id="LoginPassword" name="LoginPassword" type="password" />
PasswordFor() HTML Helper Method in ASP.NET Core MVC:
The PasswordFor() HTML helper method is the strongly typed extension method. In
ASP.NET Core MVC, Html.PasswordFor() is an HTML Helper method to render an HTML
input element of type “password” for a specified model property. It is typically used within a
form to provide a field for users to enter a password securely.
Syntax: @Html.PasswordFor(expression, htmlAttributes)
Parameters:
 expression: A lambda expression that identifies the model property to which
the password input field is bound.
 htmlAttributes: An object that contains HTML attributes to be included in the
rendered input element. These attributes can be specified as an anonymous
object.
Let us understand this with an example. Please modify the Index.cshtml file as shown
below.
@model HTML_HELPER.Models.LoginModel
@{
Layout = null;
}
@Html.PasswordFor(m => m.LoginPassword)
It will generate the following HTML Code.
<input id="LoginPassword" name="LoginPassword" type="password">
In the above example, the first parameter of the PasswordFor() helper method is a lambda
expression that specifies the model property to be bound with the password field textbox.
Customizing the Password Input:
You can customize the behavior and appearance of the password input by passing
attributes to the PasswordFor method. For example, modify the Index.cshtml file as
follows:
@model HTML_HELPER.Models.LoginModel
@Html.PasswordFor(m => m.LoginPassword, new { @class = "form-control", placeholder =
"Enter your password" })
Here:
 @Html.PasswordFor(m => m.Password): This generates a password input
field bound to the Password property in the model. The value entered by the
user will be assigned to the Password property when the form is submitted.
 @class = “form-control”: This is an example of adding a CSS class to the
password input for styling purposes.
 355

 placeholder = “Enter your password”: This adds a placeholder text that is

displayed in the input field before the user enters their password.
When Should We Use Password HTML Helper Method in ASP.NET Core
MVC?
Password input fields are commonly used when you want users to enter passwords or other
sensitive information, such as PIN codes or confidential data, securely. Here are some
scenarios where you should consider using the Password HTML Helper method:
 User Registration and Authentication: When users register for an account
or log in, you typically use password input fields to collect their passwords
securely. The password input field helps ensure that passwords are not easily
readable while being entered.
 Change Password Forms: If your application has a feature that allows users
to change their passwords, you should use the Password HTML Helper to
create the new password input field.
 Secure Data Collection: Whenever you need users to input sensitive
information, such as credit card details, PIN codes, or confidential data, you
should use the Password HTML Helper to create the input field. This ensures
the input is hidden and masked to prevent unauthorized users from viewing it.
 Password Reset Forms: When implementing a “Forgot Password”
functionality, the Password HTML Helper is used to create the input field
where users enter their new passwords.
What are the Differences Between Password and PasswordFor in
ASP.NET Core MVC?
In ASP.NET Core MVC, Password and PasswordFor are HTML Helper methods that render
input fields for password input in forms. However, they have different usage scenarios and
purposes:
Password Helper:
 This helper method is used to render a plain HTML <input> element of the
type password.
 It does not bind directly to a model property. Instead, it simply renders an
HTML <input type=”password”> element.
 It’s useful when you need a simple password input field without binding it to a
specific model property.
 Example: @Html.Password(“Password”, null, new { @class = “form-
control” })
PasswordFor Helper:
 This helper method is used to render a password input field that is bound to a
specific model property.
 It binds directly to a property of the model specified in the lambda expression.
 It’s useful when you want to create a password input field that automatically
binds its value to a property of the model when the form is submitted.
 Example: @Html.PasswordFor(model => model.Password, new { @class
= “form-control” })
So, the main difference between Password and PasswordFor is that PasswordFor is used
when you want to bind the password input field to a specific property of a model, while
Password is used for creating a simple password input field without binding it to a model
property.
 356

Hidden Field HTML Helper in the ASP.NET Core MVC

In this article, I will discuss Hidden Field HTML Helper in ASP.NET Core MVC
Application with Examples. Please read our previous article discussing Password Field
HTML Helper in ASP.NET Core MVC Application.
What is Hidden Field in HTML
A hidden input field in a web application is an HTML <input> element that is not visible to
the user. It stores data that can be sent with a form to the server upon submission. Although
the user cannot see or interact with a hidden input field, it can hold values developers want
to pass to the server without needing user interaction or display. The basic syntax for a
hidden input field looks like this: <input type=”hidden” name=”hiddenFieldName”
value=”someValue”>
Here, type=”hidden” specifies that the input field is hidden from the user. The name attribute
is used to identify the input field in the server-side script processing the form data. The
value attribute contains the data that will be sent to the server when the form is
submitted. Hidden fields are often used for various purposes, such as:
 Passing Data: This is storing data that is needed for processing on the
server side but shouldn’t be modified by the user.
 Maintaining State: Tracking certain states or identifiers, especially in multi-
step forms or when working with sessions.
 Security: Storing tokens or unique identifiers to prevent cross-site request
forgery (CSRF) attacks.
 Client-Side Calculations: Storing intermediate values for client-side
calculations that must be returned to the server.
Note: While hidden input fields are not directly visible or editable by the user through the
interface, they can still be viewed and potentially modified by users who inspect the page’s
HTML source code or use developer tools. Therefore, sensitive information should not be
stored in hidden input fields or should be properly encrypted or handled securely to prevent
security vulnerabilities.

NextStaySynthesize Beautiful Scenes of Ha Giang Via Super Quality Travel Video -

Flycam Nem TV00:28 / 03:1710 Sec
How Do We Create Hidden Filed Using HTML Helper in ASP.NET Core
MVC?
To create a Hidden Field, i.e., <input type=”Hidden”> using HTML Helpers in ASP.NET
Core MVC, we must use Hidden or HiddenFor methods within our Razor views. The Hidden
method is used when you manually specify the form field’s name, while HiddenFor is used
with model properties, providing a strongly typed approach. That means the Hidden() HTML
Helper method is loosely typed, whereas the HiddenFor() HTML Helper method is strongly
typed.
What is the Hidden HTML Helper Method in ASP.NET Core MVC?
The Hidden HTML helper method in ASP.NET Core MVC generates a hidden input field in
an HTML form. You can manually specify the field’s name and value. This method is useful
 357

when you need to include data in the form submission that is not directly related to model
properties or when you want to specify the field’s name and value explicitly.
Syntax: @Html.Hidden(“fieldName”, “value”)
Here, “fieldName” is the name of the hidden field, and “value” is the value assigned to it.
When the form is submitted, the value of this hidden field is sent to the server along with the
other form data.
Example to Understand Hidden HTML Helper in ASP.NET Core MVC
In this demo, we will use the following Student model to understand the Hidden() and
HiddenFor() HTML Helper methods. First, create a class file named Student.cs within the
Models folder and copy and paste the following code into it.
namespace HTML_HELPER.Models
{
public class Student
{
public int Id { get; set; }
public string? Name { get; set; }
public string? Branch { get; set; }
}
}
Next, modify the Home Controller as follows:
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Student student = new Student() { Id = 1, Name = "Pranaya", Branch = "CSE" };
return View(student);
}
[HttpPost]
public string Index(Student student)
{
return $"Id: {student.Id}, Name: {student.Name}, Branch: {student.Branch}";
}
 358

}
}
Modify the Index.cshtml file as follows:
The following example creates a hidden field ID with the Id property of the Student model. It
binds the ID to the hidden field so that it can assign the ID value to it.
@model HTML_HELPER.Models.Student
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.Hidden("Id", Model.Id)
<label for="Name">Name</label>
@Html.TextBox("Name", Model.Name, new { @class = "form-control", placeholder =
"Enter your Name" })
<label for="Branch">Branch</label>
@Html.TextBox("Branch", Model.Branch, new { @class = "form-control", placeholder =
"Enter your Branch" })
<input type="submit" value="Submit" />
}
</div>
Understanding the code:
 Html.BeginForm: This creates the form element with the specified action
and controller names and the form submission method (in this case, POST).
 @Html.Hidden: This generates a hidden input field. The first parameter (“Id”)
is the input element’s name, which will be used to identify the data on the
server. The second parameter (Model.Id) is the value you want to send along
with the form.
Now, run the application, and you will see the following output. Please note that it shows the
name and branch but not the student’s ID value.
 359

Now, if you inspect the HTML element, you will see that it is generating the following HTML
element for the hidden field.
<input data-val=”true” data-val-required=”The Id field is required.” id=”Id” name=”Id”
type=”hidden” value=”1″ />
Now, when you click on the Submit button, you will see, along with the Name and Brach, it
is also sending the ID value to the server, and you will get the following output.

Using the Hidden HTML Helper, you can ensure that the hidden input fields are generated
correctly with the necessary attributes and values. This approach also promotes cleaner
and more maintainable code.
Note: Please note that hidden fields can still be manipulated by users with some technical
knowledge, so sensitive or critical information should always be validated and processed
securely on the server side.
What is the HiddenFor() HTML Helper Method in ASP.NET Core MVC?
The HiddenFor helper method in ASP.NET Core MVC, on the other hand, is strongly typed
and is used with model properties. It generates a hidden input field for a specific property of
the model bound to the view. This approach ensures type safety and enables direct
mapping between the form field and the model property, reducing the errors due to
mistyped field names.
The HiddenFor() method is strongly typed. which means it is tied to a model property. It
takes a lambda expression as an argument, which specifies the property of the model that
the hidden input element represents. Let us understand this with an example. please modify
the Index.cshtml file as follows:
 360

@model HTML_HELPER.Models.Student
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.HiddenFor(m => m.Id)
<label for="Name">Name</label>
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Enter
your Name" })
<label for="Branch">Branch</label>
@Html.TextBoxFor(m => m.Branch, new { @class = "form-control", placeholder = "Enter
your Branch" })
<input type="submit" value="Submit" />
}
</div>
In this example:
 Html.BeginForm: This creates the form element as before.
 Html.HiddenFor(m => m.Id): This generates a hidden input field based on
the model’s Id property. The lambda expression m => m.ID specifies the
property for which you want to create the hidden field. When the form is
submitted, the ID value will be included in the POST data.
Run the application, and you will get the same output as the previous example.
What are the Differences Between Hidden and HiddenFor Helper
Methods in ASP.NET Core MVC?
In ASP.NET Core MVC, both Hidden and HiddenFor generate hidden input fields.
Understanding the differences between them is important for effective data handling and
manipulation in MVC applications.
Hidden Helper Method in ASP.NET Core MVC
 Usage: The @Html.Hidden helper generates a hidden input field that is not
visible to the user but can be used to store and post data back to the server.
It’s useful for storing data that you want to pass back to the server without
displaying it or allowing modification by the user.
 Syntax: You can use @Html.Hidden by specifying the name of the data you
want to store and, optionally, the value. For
example, @Html.Hidden(“UserId”, “123”) would generate a hidden input
field for storing a user ID value of “123”.
 Flexibility: This method allows for a more flexible naming convention since
you can explicitly specify the input field’s name. This can be useful in
situations where the name of the field doesn’t directly correspond to a
property on your model.
HiddenFor Helper Method in ASP.NET Core MVC
 361

 Usage: The @Html.HiddenFor helper is strongly typed and generates a

hidden input field for a specific model property. This ensures that the field
name and value are directly tied to model properties, which helps with model
binding upon form submission.
 Syntax: You use @Html.HiddenFor with a lambda expression that specifies
the model property. For example, @Html.HiddenFor(model =>
model.UserId) would generate a hidden input field that is bound to the
UserId property of your model.
 Strongly Typed: Since @Html.HiddenFor is strongly typed to your model
properties, it provides compile-time checking of the property names. This
reduces the risk of errors due to typos or property name changes not being
reflected in your views.

Custom HTML Helper in the ASP.NET Core MVC?

In this article, I will discuss How We Create Custom HTML Helpers in ASP.NET Core
MVC Applications with Examples. Please read our previous article discussing Hidden Field
HTML Helper in ASP.NET Core MVC. As part of this article, we will discuss the following
two important pointers.
1. How can we Display Images in an ASP.NET Core MVC Application?
2. How do we Create Custom HTML Helpers in ASP.NET Core MVC to
Display Images?
The ASP.NET Core MVC Framework provides many built-in HTML helper methods that we
can directly use in a Razor View. The ASP.NET Core MVC Framework also allows the
creation of a Custom HTML Helper Method. Once you create the custom HTML helper
method, you can reuse it many times in your application.
Example to Understand Custom HTML Helpers in ASP.NET Core MVC:
In this demo, we will display the employee details and the Employee photo, as shown in the
image below.
 362

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:18 / 03:1110 Sec

Creating Employee Model:

First, create one class file with the name Employee.cs within the Models Folder and then
copy and paste the following code into it.
namespace HTML_HELPER.Models

public partial class Employee

public int Id { get; set; }

public string? FullName { get; set; }

public string? Designation { get; set; }

public string? Department { get; set; }

public string? Photo { get; set; }

 363

public string? AlternateText { get; set; }

}
Creating Images Folder within the wwwroot Folder:
Next, add a folder with the Name Images within the wwwroot Folder. To do so, Right-click
on the wwwroot, select Add Folder, and then rename the folder as Images. Then download
and add the following image to the Images Folder. Rename the image name as
MyPhoto.png.

Modifying Home Controller:

Next, modify the Home Controller as follows.
using HTML_HELPER.Models;

using Microsoft.AspNetCore.Mvc;

namespace HTML_HELPER.Controllers

public class HomeController : Controller

public ActionResult Index()

//Here we hardcoded the Employee Details

 364

//In Realtime, you will get the data from any data source

Employee employee = new Employee()

Id = 106724,

FullName = "Pranaya Rout",

Designation = "Manager",

Department = "IT",

Photo = "/Images/MyPhoto.png",

AlternateText = "Pranaya Rout Photo Not Available"

};

return View(employee);

}
Modifying the Index.cshtml view file of Home Controller:
Next, open the Index.cshtml view file and then copy and paste the following code into it.
@model HTML_HELPER.Models.Employee

@{

ViewBag.Title = "Employee Details";

<div>

<h4>Employee Details</h4>

<hr />

<p>

Employee ID: @Html.DisplayFor(model => model.Id)

 365

</p>

<p>

Full Name: @Html.DisplayFor(model => model.FullName)

</p>

<p>

Designation: @Html.DisplayFor(model => model.Designation)

</p>

<p>

Department: @Html.DisplayFor(model => model.Department)

</p>

<p>

Photo: @Html.DisplayFor(model => model.Photo)

</p>

<p>

AlternateText: @Html.DisplayFor(model => model.AlternateText)

</p>

</div>
Now, Run the application and navigate to the URL Home/Index. It will produce the following
output. Notice that the Photo and AlternateText property values are displayed instead of
rendering the photo.
 366

To display the image, modify the Index.cshtml file as follows:

@model HTML_HELPER.Models.Employee

@{

ViewBag.Title = "Employee Details";

<div>

<h4>Employee Details</h4>

<hr />

<p>

Employee ID: @Html.DisplayFor(model => model.Id)

</p>

<p>

Full Name: @Html.DisplayFor(model => model.FullName)

</p>

<p>

Designation: @Html.DisplayFor(model => model.Designation)

 367

</p>

<p>

Department: @Html.DisplayFor(model => model.Department)

</p>

<p>

Photo: <img src="@Model.Photo" alt="@Model.AlternateText" height="200" width="200"

/>

</p>

</div>
Notice that we are using an image HTML tag here. Now, run the application and notice that
the image is displayed as expected, as shown in the image below.
 368

We use the code below to render Images in the ASP.NET MVC application. We are building
the image tag by passing the values for the src and alt attributes.
<img src=”@Model.Photo” alt=”@Model.AlternateText”/>
Though the above code is not very complex, moving this logic into its own helper method
still makes sense. We don’t want any complicated logic in our views. Views should be as
simple as possible. Don’t you think it would be very nice if we could render the image using
the Image() HTML helper method as shown below?
@Html.Image(Model.Photo, Model.AlternateText)
But, ASP.NET Core MVC does not provide any built-in Image() HTML helper. So, let’s build
our own custom image HTML helper method.
Custom HTML Helper in ASP.NET Core MVC
Custom HTML helpers are user-defined methods that extend the functionality of built-in
HTML helpers or provide new functionality altogether. They allow developers to encapsulate
common HTML markup patterns or generate complex HTML structures and reuse them
across multiple views.
Custom Image HTML Helper in ASP.NET Core MVC
In ASP.NET Core MVC, we can create a custom HTML Helper method to generate a <img>
tag with additional attributes or behavior. The Custom HTML Helper methods allow us to
encapsulate reusable HTML generation logic in our application. Let us proceed and
understand How We Can Create a Custom Image HTML Helper Method in ASP.NET Core
MVC.
Create a Helper Method:
To create a custom HTML helper in ASP.NET Core MVC, we need to follow the below
steps:
 Create a Helper Class: Start by creating a static class to contain your
custom HTML helper methods.
 Create Extension Methods: Define extension methods within your helper
class. These methods should extend the IHtmlHelper interface or any derived
interface, allowing you to access HTML generation methods.
 Implement Helper Methods: Write the logic for your custom HTML helper
methods within the extension methods. These methods should generate
HTML markup based on the provided parameters.
 Register the Helper Class: Register your custom HTML helper class with
the MVC framework during application startup. This step ensures that your
helper methods are available for use throughout your application.
So, create a class file named CustomHTMLHelper.cs (you can give it any name) within
the Models folder (you can create it inside any folder or directory) and then copy and paste
the following code into it.
using Microsoft.AspNetCore.Mvc.Rendering;

namespace HTML_HELPER.Models

public static class CustomHTMLHelper

{
 369

public static TagBuilder Image(this IHtmlHelper helper, string src, string alt, string height,
string width, string cssClass)

var imgTag = new TagBuilder("img");

imgTag.MergeAttribute("src", src);

if (alt != null)

imgTag.MergeAttribute("alt", alt);

if (Convert.ToInt32(height) > 0)

imgTag.MergeAttribute("height", height);

if (Convert.ToInt32(width) > 0)

imgTag.MergeAttribute("width", width);

if (cssClass != null)

//imgTag.MergeAttribute("class", cssClass);

imgTag.AddCssClass(cssClass);

return imgTag;

}
 370

}
Explanation of the above class:
The above class defines a CustomHTMLHelper class in C# that extends the capabilities of
ASP.NET’s IHtmlHelper interface, specifically for generating HTML image tags. The Image
method is an extension method for IHtmlHelper, enabling the dynamic creation of <img>
HTML elements with specified attributes. Here’s a breakdown of its functionality:
Class Definition (public static class CustomHTMLHelper): The class is declared public
and static, meaning it is accessible globally and cannot be instantiated. It’s meant to contain
static methods only, without any instance members.
Extension Method (public static TagBuilder Image(this IHtmlHelper helper, …)): This
method is an extension method, as indicated by the “this” keyword in its first parameter. It
allows the method to be called on any object of type IHtmlHelper, effectively extending that
interface with new functionality. This is useful for adding methods to an interface without
modifying its original definition.
Parameters: The method takes several parameters for constructing an image tag:
 src (string): The URL of the image to be displayed.
 alt (string): The alternative text for the image, which is displayed when the
image cannot be loaded.
 height (string) and width (string): Dimensions for the image. These are set
as attributes only if their converted integer value is greater than 0, which is a
basic validation to ensure that dimensions are positive.
 cssClass (string): An optional CSS class to be applied to the image tag for
styling.
TagBuilder Usage: TagBuilder is a utility class for building HTML tags in a structured way.
The code creates a new TagBuilder instance for an <img> tag and sets its attributes based
on the method’s parameters.
Conditional Attributes: The method checks if certain parameters (alt, height, width, and
cssClass) are provided and valid before adding them as attributes to the <img> tag. For
example, it only adds the height and width attributes if their values can be converted to
integers greater than 0. This prevents the generation of invalid HTML.
CSS Class Application: Instead of directly merging the class attribute, the code uses
AddCssClass for the cssClass parameter, which is a more appropriate method for adding
CSS classes as it handles the class attribute’s unique behavior in HTML (e.g., appending to
existing classes).
Return Value: The method returns the constructed TagBuilder object representing the
<img> tag, which can then be rendered to HTML.
Use the Custom HTML Helper:
In your Razor view, you can use the custom HTML Helper to generate the custom image
tag by calling the Image Helper method. So, modify the Index.cshtml file as shown below. In
the below example, the Image Custom HTML Helper method generates a <img> tag with
the specified src, alt, width, height, and CSS class.
@model HTML_HELPER.Models.Employee

@{
 371

ViewBag.Title = "Employee Details";

<div>

<h4>Employee Details</h4>

<hr />

<p>

Employee ID: @Html.DisplayFor(model => model.Id)

</p>

<p>

Full Name: @Html.DisplayFor(model => model.FullName)

</p>

<p>

Designation: @Html.DisplayFor(model => model.Designation)

</p>

<p>

Department: @Html.DisplayFor(model => model.Department)

</p>

<p>

Photo: @Html.Image(Model.Photo, Model.AlternateText, "150", "150", null )

</p>

</div>
After making the above changes, run the application, and you will get the output as
expected, as shown in the image below.
 372

Custom HTML Helpers provide a convenient way to encapsulate complex HTML generation
logic, making your views cleaner and more maintainable. They can be especially useful
when generating custom HTML elements that require specific attributes or behaviors.
Another Way to Use Custom HTML Helper Method:
Now, instead of creating the Image method as an extension method, we can also create this
as a non-extension method and use it inside our views. For example, modify the
CustomHTMLHelper class as follows:
using Microsoft.AspNetCore.Mvc.Rendering;

namespace HTML_HELPER.Models

public static class CustomHTMLHelper

public static TagBuilder Image(string src, string alt, string height, string width, string
cssClass)

var imgTag = new TagBuilder("img");

 373

imgTag.MergeAttribute("src", src);

if (alt != null)

imgTag.MergeAttribute("alt", alt);

if (Convert.ToInt32(height) > 0)

imgTag.MergeAttribute("height", height);

if (Convert.ToInt32(width) > 0)

imgTag.MergeAttribute("width", width);

if (cssClass != null)

//imgTag.MergeAttribute("class", cssClass);

imgTag.AddCssClass(cssClass);

return imgTag;

}
Explanation of the above Code:
 374

The above code defines a static class called CustomHTMLHelper with a static method
Image that generates an HTML img tag with specified attributes. Here’s a breakdown of the
method:
Parameters:
 src: The URL of the image.
 alt: The alternate text for the image.
 height: The height of the image.
 width: The width of the image.
 cssClass: The CSS class for the image.
Creating TagBuilder: TagBuilder is a class used to generate HTML tags programmatically.
In this code, a new TagBuilder object for the img tag is created.
Setting Attributes: The mergeAttribute method sets attributes like src, alt, height, and
width of the img tag based on the parameters provided.
 The src attribute is always set.
 The alt attribute is set only if a non-null value is provided.
 The height and width attributes are set only if their corresponding parameters
are greater than 0.
Adding CSS Class: The cssClass parameter is added as a CSS class to the img tag using
the AddCssClass method.
Returning TagBuilder: Finally, the method returns the TagBuilder object representing the
img tag with the specified attributes.
This method provides a convenient way to generate HTML img tags with specified attributes
in a structured manner. It abstracts away the complexity of manually creating and setting
attributes for the img tag, making the code more readable and maintainable. The above
Image method is not an extension method, so we cannot invoke this method using the
@Html property. Instead, we can call this method using the class name, i.e.,
CustomHTMLHelper. So, modify the Index.cshtml file as follows.
@model HTML_HELPER.Models.Employee

@{

ViewBag.Title = "Employee Details";

<div>

<h4>Employee Details</h4>

<hr />

<p>

Employee ID: @Html.DisplayFor(model => model.Id)

</p>
 375

<p>

Full Name: @Html.DisplayFor(model => model.FullName)

</p>

<p>

Designation: @Html.DisplayFor(model => model.Designation)

</p>

<p>

Department: @Html.DisplayFor(model => model.Department)

</p>

<p>

Photo: @CustomHTMLHelper.Image(Model.Photo, Model.AlternateText, "150", "150", null

)

</p>

</div>
Now, run the application, and you should get the same output.
When Should We Use Custom HTML Helper in ASP.NET Core MVC?
Here are some scenarios where using custom HTML Helpers can be advantageous:
 Reusable UI Components: If you have UI components that are reused
across multiple views or even multiple projects, creating custom HTML
Helpers can help encapsulate the HTML generation logic, promoting code
reusability and maintainability.
 Complex Markup Generation: When you need to generate complex HTML
markup involving multiple elements or conditional logic, custom HTML
Helpers can provide a cleaner and more maintainable way to generate such
markup than embedding the HTML directly within the Razor view.
 Consistent Output and Centralized Updates: By centralizing the HTML
generation logic within custom HTML Helpers, you ensure consistency in the
generated output across your application. Additionally, any updates or
modifications to the markup can be made in a centralized location, simplifying
maintenance and reducing the risk of inconsistencies.
Real-Time Examples of Custom HTML Helpers in
ASP.NET Core MVC
 376

I will discuss Real-Time Examples of Custom HTML Helpers in ASP.NET Core

MVC Applications with Examples in this article. Please read our previous article
discussing How to Create Custom HTML Helpers in ASP.NET Core MVC.
Real-Time Examples of Custom HTML Helpers in ASP.NET Core MVC
In ASP.NET Core MVC, HTML helpers are methods you can use in Razor views to
generate HTML content. The built-in HTML helpers are provided by the HtmlHelper class.
However, you can also create custom HTML helpers by defining extension methods for the
IHtmlHelper interface. Let us proceed and try to understand a few real-time examples of
using Custom HTML Helpers in ASP.NET Core MVC Application.
Example1: Form Control with Validation
Often, form controls come with validation messages, tooltips, and specific CSS styles.
Instead of repeating the same structure, a custom HTML helper can encapsulate this
pattern. Example: An input field that automatically displays validation errors next to it
Let us create a Custom HTML Helper to render an input with validation attributes. So,
create a class file with the name FormControlHelpers.cs within the Models folder and copy
and paste the following code.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:21 / 03:1110 Sec

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Models
{
public static class FormControlHelpers
{
public static IHtmlContent CustomInputWithValidation(this IHtmlHelper htmlHelper,
string modelPropertyName, string labelText)
{
var fullHtml = $@"
<div class='form-group'>
<label for='{modelPropertyName}'>{labelText}</label>
<input type='text' class='form-control' id='{modelPropertyName}'
name='{modelPropertyName}' asp-for='{modelPropertyName}' />
<span asp-validation-for='{modelPropertyName}' class='text-danger'></span>
</div>";
return new HtmlString(fullHtml);
}
}
 377

}
Next, modify the Home Controller as follows:
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Next, modify the Index.cshtml view file as follows. As you can see, we are using the
CustomInputWithValidation HTML Helper method here.
@Html.CustomInputWithValidation("UserName", "User Name")
Example2: Breadcrumb Helper
Displaying navigational breadcrumbs on a site can be streamlined using a custom helper
that takes the current path or a list of paths and then renders the breadcrumb navigation.
Generate breadcrumb navigation based on the provided list of paths. So, create a class file
with the name BreadcrumbHelpers.cs within the Models folder and copy and paste the
following code.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Models
{
public static class BreadcrumbHelpers
{
public static IHtmlContent Breadcrumbs(this IHtmlHelper htmlHelper, List<(string Url,
string Name)> paths)
{
var stringBuilder = new StringBuilder();
stringBuilder.Append("<nav aria-label='breadcrumb'>");
stringBuilder.Append("<ol class='breadcrumb'>");
 378

foreach (var path in paths)

{
stringBuilder.AppendFormat("<li class='breadcrumb-item'><a href='{0}'>{1}</a></li>",
path.Url, path.Name);
}
stringBuilder.Append("</ol></nav>");
return new HtmlString(stringBuilder.ToString());
}
}
}
Next, modify the Index.cshtml view as follows. As you can see, we are using the
Breadcrumbs HTML Helper method here.
@{
var breadcrumbs = new List<(string Url, string Name)>
{
("/", "Home"),
("/products", "Products"),
("/products/1", "Product 1")
};
}
@Html.Breadcrumbs(breadcrumbs)
Example3: SEO Meta Tag Helper
Helpers can be created to generate SEO-friendly meta tags, structured data, or other SEO-
specific elements to be added to a page dynamically.
A helper that outputs meta tags for SEO. So, create a class file with the name
SeoHelpers.cs within the Models folder and then copy and paste the following code.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Models
{
public static class SeoHelpers
{
public static IHtmlContent MetaDescription(this IHtmlHelper htmlHelper, string content)
{
 379

return new HtmlString($"<meta name='description' content='{content}'>");

}
}
}
Next, modify the Index.cshtml view as follows. As you can see, we are using the
MetaDescription HTML Helper method here.
@Html.MetaDescription("This is a sample page description for SEO.")
Example4: Theming Helper
When supporting multiple themes or brands, a custom helper can determine the current
theme or brand and generate the appropriate CSS links, logos, and other related assets.
Render a CSS link based on the current theme. So, create a class file with the
name ThemeHelpers.cs within the Models folder and then copy and paste the following
code into it.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Models
{
public static class ThemeHelpers
{
public static IHtmlContent RenderThemeCss(this IHtmlHelper htmlHelper, string
currentTheme)
{
var cssLink = $"/css/themes/{currentTheme}.css";
return new HtmlString($"<link rel='stylesheet' href='{cssLink}'>");
}
}
}
Next, modify the Index.cshtml view as follows. As you can see, we are using the
RenderThemeCss HTML Helper method.
@Html.RenderThemeCss("dark-theme")
Example5: Pagination Controls
For displaying large lists, pagination is essential. A custom helper can generate a standard
pagination control based on the current page, total items, and items per page. A helper to
create pagination controls. So, create a class file named PaginationHelpers.cs within the
Models folder and copy and paste the following code.
using Microsoft.AspNetCore.Html;
 380

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Models
{
public static class PaginationHelpers
{
public static HtmlString CreatePagination(this IHtmlHelper htmlHelper, int currentPage, int
totalPages)
{
StringBuilder result = new StringBuilder();
result.Append("<nav><ul class='pagination'>");
for (int i = 1; i <= totalPages; i++)
{
if (i == currentPage)
{
result.Append($"<li class='page-item active'><span class='page-link'>{i}</span></li>");
}
else
{
result.Append($"<li class='page-item'><a class='page-link' href='?page={i}'>{i}</a></li>");
}
}
result.Append("</ul></nav>");
return new HtmlString(result.ToString());
}
}
}
Next, modify the Index.cshtml view as follows. As you can see here, we are using the
CreatePagination HTML Helper method.
@Html.CreatePagination(2, 10)
Example6: Dynamic Menus
Menus that change based on user roles, permissions, or other criteria can be encapsulated
within a custom HTML helper, ensuring consistent rendering across views.
 381

Dynamic Menus using Custom HTML Helper Methods in ASP.NET Core MVC. Dynamic
menus often depend on user roles, permissions, or other dynamic criteria. You can
consistently generate these menus across views using a custom HTML helper. Here’s an
example of creating and using a custom HTML helper to generate dynamic menus in
ASP.NET Core MVC.
Step 1: Define Your Menu Model
First, let’s create a class file with the name MenuItem.cs within the Models folder and then
copy and paste the following code into it. This is a simple model for menu items:
namespace HTML_HELPER.Models
{
public class MenuItem
{
public string Text { get; set; }
public string Url { get; set; }
public bool IsActive { get; set; }
public List<MenuItem> SubItems { get; set; } = new List<MenuItem>();
}
}
Step 2: Create a Custom HTML Helper for the Dynamic Menu
Next, create another class file with the name MenuHtmlHelpers.cs within the Models folder
and copy and paste the following code into it. This helper will generate the necessary HTML
based on a list of MenuItem:
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Models
{
public static class MenuHtmlHelpers
{
public static HtmlString DynamicMenu(this IHtmlHelper htmlHelper, List<MenuItem>
menuItems)
{
StringBuilder result = new StringBuilder();
result.Append("<ul class='menu'>");
foreach (var item in menuItems)
{
result.AppendFormat("<li class='{0}'>", item.IsActive ? "active" : "");
 382

result.AppendFormat("<a href='{0}'>{1}</a>", item.Url, item.Text);

if (item.SubItems.Count > 0)
{
result.Append("<ul class='submenu'>");
foreach (var subItem in item.SubItems)
{
result.AppendFormat("<li class='{0}'><a href='{1}'>{2}</a></li>",
subItem.IsActive ? "active" : "", subItem.Url, subItem.Text);
}
result.Append("</ul>");
}
result.Append("</li>");
}
result.Append("</ul>");
return new HtmlString(result.ToString());
}
}
}
Step 3: Use the Custom HTML Helper in a Razor View
Let’s say you’ve populated a List<MenuItem> based on some logic (e.g., user permissions).
You can then pass this list to the custom helper to generate the dynamic menu. So, modify
the Index.cshtml file as shown below.
@using HTML_HELPER.Models
@model List<MenuItem>
@Html.DynamicMenu(Model)
Step 4: Populate the List<MenuItem> Dynamically
The actual list of MenuItem objects might be generated in your controller based on user
roles, permissions, or other criteria, and here we have hard-coded the same. So, modify the
Home Controller class as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
 383

public IActionResult Index()

{
List<MenuItem> menu = new List<MenuItem>
{
new MenuItem
{
Text = "Home",
Url = "/Home/Index",
IsActive = true
},
new MenuItem
{
Text = "Admin",
Url = "/Admin",
SubItems = new List<MenuItem>
{
new MenuItem { Text = "Users", Url = "/Admin/Users" },
new MenuItem { Text = "Settings", Url = "/Admin/Settings", IsActive = true }
}
}
};
return View(menu);
}
}
}
In this example, the Index method populates the menu and passes it to the view. The view
then uses the custom HTML helper to render the dynamic menu. This approach allows you
to adapt and extend the menu generation logic to fit various scenarios and requirements.
Example7: Reusable Widgets
Components like sidebars, content cards, or user profile boxes that appear across various
views can be generated using custom HTML helpers. Using custom HTML helpers to create
reusable widgets is a great way to maintain a clean and organized codebase and ensure
consistent rendering across views. Here’s an example to demonstrate creating and using
such reusable widgets.
Example: Profile Card Widget
 384

Imagine you have a profile card that displays a user’s name, profile image, and a short bio.
This card might be reused in different parts of your website: user lists, comments section,
article authors, etc.
Define a Model for the Profile Card
First, let’s create a simple model for the profile card. So, create a class file with the
name ProfileCardModel.cs within the Models folder and copy and paste the following code
into it.
namespace HTML_HELPER.Models
{
public class ProfileCardModel
{
public string Name { get; set; }
public string ProfileImageUrl { get; set; }
public string Bio { get; set; }
}
}
Define Custom HTML Helper:
Create the Custom HTML Helper for the Profile Card. So, create a class file with the
name WidgetHtmlHelpers.cs within the Models folder and copy and paste the following
code into it.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Models
{
public static class WidgetHtmlHelpers
{
public static HtmlString ProfileCard(this IHtmlHelper htmlHelper, ProfileCardModel
model)
{
StringBuilder result = new StringBuilder();
result.Append("<div class='profile-card'>");
result.AppendFormat("<img src='{0}' alt='{1}' class='profile-img'/>",
model.ProfileImageUrl, model.Name);
result.AppendFormat("<h2>{0}</h2>", model.Name);
result.AppendFormat("<p>{0}</p>", model.Bio);
 385

result.Append("</div>");
return new HtmlString(result.ToString());
}
}
}
Using the Custom HTML Helper
Use the Custom HTML Helper in a Razor View. So, modify the Index.cshtml file as follows.
To use the profile card widget, we can invoke the custom helper:
@using HTML_HELPER.Models
@model ProfileCardModel
@Html.ProfileCard(Model)
Modifying Home Controller:
We need to populate the ProfileCardModel from our controller and send it to the view. So,
modify the Home Controller class as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
ProfileCardModel model = new ProfileCardModel
{
Name = "Pranaya Rout",
ProfileImageUrl = "/path/to/image.jpg",
Bio = "Software Developer at ABC Corp."
};
return View(model);
}
}
}
Benefits:
 Consistency: By defining the widget’s structure and styling in one place, you
ensure it looks and behaves consistently everywhere it’s used.
 386

 Easier Maintenance: Changes to the widget (e.g., adding an email field) only
need to be made in one location.
 Cleaner Views: Your Razor views are tidier as they can leverage the helper
instead of repeating HTML structures.
 Flexibility: By designing your widgets to accept configurations or additional
parameters, you can make them versatile to handle different scenarios or
styles.
Remember, if the widget becomes too complex, or you want to utilize more MVC features,
turning the widget into a View Component might be better than using an HTML helper. View
Components in ASP.NET Core allow you to encapsulate view and logic into a reusable unit,
which is perfect for complex widgets.
Example8: Configurable Data Tables
A table displaying data from various sources with options for sorting, filtering, and specifying
columns. A custom helper can take in this configuration and render the table accordingly.
Creating configurable data tables using custom HTML helper methods can provide a flexible
and reusable way to display tabular data across your application. Here’s a basic example to
illustrate the process.
Define a Model for the Data Table Configuration
Firstly, define the configuration for the data table, specifying the columns you want to
display and any other properties you may need. So, create a class file with the
name DataTableConfig.cs within the Models folder and copy and paste the following code
into it.
namespace HTML_HELPER.Models
{
public class DataTableConfig
{
public List<string> Columns { get; set; }
public string TableClass { get; set; } = "table"; // default CSS class
}
}
Create another class file named MyCustomDataType.cs and copy and paste the following
code into it. This is the class that is going to hold the model data.
namespace HTML_HELPER.Models
{
public class MyCustomDataType
{
public string Name { get; set; }
public int Age { get; set; }
public string Address { get; set; }
}
 387

}
Create the Custom HTML Helper for the Data Table
Next, design your custom HTML helper. So, create a class file
named DataTableHtmlHelpers.cs within the Models folder and copy and paste the
following code into it.
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text;
namespace HTML_HELPER.Models
{
public static class DataTableHtmlHelpers
{
public static HtmlString DataTable<T>(this IHtmlHelper htmlHelper, IEnumerable<T>
data, DataTableConfig config)
{
StringBuilder result = new StringBuilder();
// Table start
result.AppendFormat("<table class='{0}'>", config.TableClass);
// Header
result.Append("<thead><tr>");
foreach (var column in config.Columns)
{
result.AppendFormat("<th>{0}</th>", column);
}
result.Append("</tr></thead>");
// Body
result.Append("<tbody>");
foreach (var item in data)
{
result.Append("<tr>");
foreach (var column in config.Columns)
{
var value = item.GetType().GetProperty(column)?.GetValue(item, null);
result.AppendFormat("<td>{0}</td>", value);
 388

}
result.Append("</tr>");
}
result.Append("</tbody>");
// Table end
result.Append("</table>");
return new HtmlString(result.ToString());
}
}
}
Use the Custom HTML Helper in a Razor View
Now, you can use the data table widget in a Razor view. So, modify the Index.cshtml file as
follows.
@using HTML_HELPER.Models
@model IEnumerable<MyCustomDataType>
@{
var config = new DataTableConfig
{
Columns = new List<string> { "Name", "Age", "Address" }
};
}
@Html.DataTable(Model, config)
Modifying Home Controller:
From your controller, you need to populate a list of MyCustomDataType and send it to the
view. So, modify the Home Controller as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
List<MyCustomDataType> data = new List<MyCustomDataType>
 389

{
new MyCustomDataType { Name = "Pranaya", Age = 35, Address = "123 ABC St." },
new MyCustomDataType { Name = "Kumar", Age = 34, Address = "456 PQR St." },
new MyCustomDataType { Name = "Rout", Age = 33, Address = "789 XYZ St." }
};
return View(data);
}
}
}
Notes:
 Flexibility: This example provides a basic structure. You can extend the
DataTableConfig class with more configuration options (e.g., specifying which
columns are sortable, adding custom classes for specific columns, etc.).
 Complex Columns: This example assumes each column is tied to a direct
property on the data type. If you have more complex columns, adjustments
would be needed.
Consider using View Components or integrating a dedicated front-end library for large,
complex, or highly interactive tables.
By implementing custom HTML helpers for these use cases, developers can ensure
consistency, reduce errors, and simplify the process of making global changes to the
application’s views.

Creating Form Using HTML Helpers in ASP.NET Core

MVC
In this article, I will discuss Creating Form Using HTML Helpers in ASP.NET Core
MVC Applications with an Example. Please read our previous article discussing Real-Time
Examples of Custom HTML Helpers in ASP.NET Core MVC Applications with Examples.
Creating Form Using HTML Helpers in ASP.NET Core MVC
Creating forms in ASP.NET Core MVC with HTML Helpers simplifies the process of
generating HTML elements tied to the data model properties. HTML Helpers are server-side
methods that return HTML strings that are then rendered in the browser. This approach
allows for clean, maintainable, and reusable code. Here’s a step-by-step guide to creating a
form using HTML Helpers in an ASP.NET Core MVC application.
Create a Model
First, define a model class that represents the data you want to collect in the form. For
example, consider a simple User Profile model. So, create a class file
named UserProfile.cs under the Models folder and then copy and paste the following code:
using System.ComponentModel.DataAnnotations;
namespace HTML_HELPER.Models
 390

{
public class UserProfile
{
public int? Id { get; set; }
[Required(ErrorMessage ="Name Field is Required")]
public string Name { get; set; }
[Required(ErrorMessage = "Biography Field is Required")]
public string Biography { get; set; }
public string Gender { get; set; }
public List<string> Skills { get; set; } = new List<string>();
public bool NewsLetter { get; set; }
public string Preference { get; set; }
[Required(ErrorMessage = "Password is Required")]
public string Password { get; set; }
}
}
Create a Controller
Create a controller with actions to display and process the form. The controller will have two
actions: one for displaying the form (HTTP GET) and another for processing the form input
(HTTP POST). So, create an Empty MVC Controller named UserProfileController under
the Controllers folder and copy and paste the following code.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:07 / 03:1110 Sec

using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace HTML_HELPER.Controllers
{
public class UserProfileController : Controller
{
[HttpGet]
public IActionResult Index()
{
// You can populate this with data from a database in a real app.
 391

ViewBag.SkillsList = new SelectList(new List<string> { "C#", "JavaScript", "Python",

"SQL Server", "AWS" });
ViewBag.PreferenceList = new SelectList(new List<string> { "Email", "SMS", "Phone
Call", "WhatsApp" });
return View();
}
[HttpPost]
public IActionResult Index(UserProfile userProfile)
{
if (ModelState.IsValid)
{
// Save userProfile to the database or process it further here
// For demonstration, just redirect back to the form with a success message
TempData["Success"] = "UserProfile submitted successfully!";
return RedirectToAction("Index");
}
// If we got this far, something failed; redisplay form
ViewBag.SkillsList = new SelectList(new List<string> { "C#", "JavaScript", "Python",
"SQL Server", "AWS" });
ViewBag.PreferenceList = new SelectList(new List<string> { "Email", "SMS", "Phone
Call", "WhatsApp" });
return View(userProfile);
}
}
}
Create a View
Create a view (Index.cshtml) for the Index action in the UserProfileController. Use HTML
Helpers to create form fields bound to the model properties. Add a new Razor
view Index.cshtml under the Views/UserProfile directory, and then please copy and paste
the following code. To make the HTML form responsive, we are using Bootstrap and
applying its grid system and form control classes to our elements.
@model HTML_HELPER.Models.UserProfile
@{
ViewBag.Title = "User Profile Form";
Layout = "~/Views/Shared/_Layout.cshtml";
 392

}
<h2>User Profile Form</h2>
@using (Html.BeginForm("Index", "UserProfile", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-row">
<div class="col-md-6 mb-3">
@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
@Html.LabelFor(model => model.Biography)
@Html.TextAreaFor(model => model.Biography, new { @class = "form-control", rows =
3 })
@Html.ValidationMessageFor(model => model.Biography, "", new { @class = "text-
danger" })
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
@Html.RadioButtonFor(model => model.Gender, "Male", new { @class = "form-check-
input" })
@Html.LabelFor(model => model.Gender, "Male", new { @class = "form-check-label" })
</div>
<div class="form-check form-check-inline">
@Html.RadioButtonFor(model => model.Gender, "Female", new { @class = "form-check-
input" })
@Html.LabelFor(model => model.Gender, "Female", new { @class = "form-check-label" })
</div>
</div>
 393

<div class="form-row">
<div class="col-md-6 mb-3">
@Html.LabelFor(model => model.Skills)
@Html.ListBoxFor(model => model.Skills, (SelectList)ViewBag.SkillsList, new { @class =
"form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.NewsLetter)
<div class="form-check">
@Html.CheckBoxFor(model => model.NewsLetter, new { @class = "form-check-input" })
@Html.LabelFor(model => model.NewsLetter, "", new { @class = "form-check-label" })
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
@Html.LabelFor(model => model.Preference)
@Html.DropDownListFor(model => model.Preference, (SelectList)ViewBag.PreferenceList,
"Please Select", new { @class = "form-control" })
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
@Html.LabelFor(model => model.Password)
@Html.PasswordFor(model => model.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-
danger" })
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
@Html.HiddenFor(model => model.Id)
</div>
 394

</div>
<button class="btn btn-primary" type="submit">Submit</button>
}
@if (TempData["Success"] != null)
{
<div>@TempData["Success"]</div>
}
Using HTML Helpers
 BeginForm: Starts the form using the specified action method.
 TextBoxFor: Renders an input of type text for a specified model property.
 TextAreaFor: Renders a textarea for a specified model property.
 DropDownListFor: This function renders a select list (dropdown) for a
specified model property using a provided list of values.
 RadioButtonFor: Renders a radio button for a specified model property.
 CheckBoxFor: Renders a checkbox for a specified model property.
 ListBoxFor: Renders a list box for a specified model property.
 HiddenFor: Renders a hidden input for a specified model property, useful for
storing IDs that are not changed by the user.
 PasswordFor: Renders an input of type password for a specified model
property.
How It Works
 GET Request: When a user navigates to the /UserProfile/Index, the Index
action method with [HttpGet] is invoked, which displays the form to the user.
 POST Request: Upon form submission, the browser sends a POST request
to the server, hitting the Index action method with [HttpPost]. The method
attempts to save the data and, upon success, redirects to the same Index
action method, which displays the message from the TempData. If an error
occurs, then it will display the error message.
Key Points of Bootstrap:
 Form and Grid: The form uses the Bootstrap grid system (form-row and col-
md-6 mb-3) to organize the form fields. This ensures that the layout is
responsive and adapts to different screen sizes.
 Form Controls: Form elements are styled with Bootstrap’s form-control class
for a unified and attractive appearance.
 Buttons: The submit button uses the btn btn-primary class for styling
consistent with the Bootstrap theme.
Running the Application
When you run the application and navigate to /UserProfile/index, you’ll see the UserProfile
form, as shown below.
 395

Submitting the form with valid data should display a success message, indicating that the
POST action in the UserProfileController processed the form submission.

Different Ways to Generate Links in ASP.NET Core

MVC
In this article, I will discuss Different Ways to Generate Links in ASP.NET Core MVC
Applications with Examples. Please read our previous article discussing Creating Form
Using HTML Helpers in ASP.NET Core MVC Applications with Examples. Creating links in
ASP.NET Core MVC is essential for navigating between different parts of your web
application.
Different Ways to Generate a Link in ASP.NET Core MVC
 396

In ASP.NET Core MVC, generating links is a common task that can be achieved in several
ways. These techniques enable you to create URLs that can lead to different parts of your
application, such as controller actions, static files, or external websites. Here are some of
the most common methods for generating links in ASP.NET Core MVC:
 Html.ActionLink
 Html.RouteLink
 Action Tag Helper
 Url.Action
 Url.RouteUrl
Html.ActionLink
Html.ActionLink is an HTML helper method used in ASP.NET Core MVC views to generate
an anchor (<a>) element that links to a specific action method on a controller.
Syntax: Html.ActionLink(“Link Text”, “ActionName”, “ControllerName”, new { id =
“Parameter” }, new { @class = “cssClass” })

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:17 / 03:1110 Sec
 “Link Text”: The text to display for the link.
 “ActionName”: The name of the action method in the controller.
 “ControllerName”: The name of the controller (without the “Controller”
suffix).
 new { id = “Parameter” }: Route values for the action method parameters.
This is optional.
 new { @class = “cssClass” }: HTML attributes for the anchor tag. This is
optional.
When to use: Generates a hyperlink to an action method by using the action name and
controller name. Use Html.ActionLink when you need to generate a straightforward link to
an action method from within a Razor view. It’s useful when the link text and the action are
straightforward to define inline.
Html.RouteLink
The Html.RouteLink method is one of the ways to generate links to different routes within
your application. This method is especially useful when you want to generate a link based
on route name and parameters rather than controller and action names directly.
Syntax: @Html.RouteLink(“Link Text”, “RouteName”, new { id = 1 }, new { @class =
“css-class” })
Here,
 “Link Text” is the display text for the link.
 “RouteName” is the name of the route.
 The third parameter is for route values. This is optional.
 The fourth parameter is for HTML attributes. This is optional.
When to use: Generates a hyperlink based on a route name and route values. Use
Html.RouteLink when you have complex routing requirements that cannot be easily
addressed by specifying action and controller names alone. It is particularly useful when
you want to generate a link that adheres to a specific routing configuration defined in your
Program.cs.
 397

Action Tag Helper

Creating links in ASP.NET Core MVC applications can be easily managed using Tag
Helpers, specifically the Anchor Tag Helper. This helper allows you to generate links by
using controller and action names, and it helps create a strongly typed link generation
mechanism that reduces errors in manually specifying URLs. The asp-action and asp-
controller tag helpers can be used to generate links.
Syntax: <a asp-action=”ActionName” asp-controller=”ControllerName” asp-route-
id=”1″ class=”css-class”>Link Text</a>
Here,
 asp-action specifies the action method.
 asp-controller specifies the controller.
 asp-route-id specifies the route data (if any).
 class is a standard HTML attribute for CSS styling.
When to use: An HTML tag helper that generates a hyperlink to an action method. Use the
Action Tag Helper when working with Razor Pages or MVC views where you prefer to work
with HTML-like syntax instead of the Razor HTML helpers. Tag helpers are generally
preferred for their clarity and HTML-friendly approach.
Url.Action
Generates a URL string to an action method. This is useful in scenarios where you need the
URL itself rather than an anchor tag. It will only generate the URL, so additional HTML or
Razor syntax is needed to create the anchor tag or other elements where the URL will be
used. The Url.Action can be used within Razor views to generate URLs, which can then be
embedded into anchor tags or other elements as needed.
Syntax: <a href=”@Url.Action(“ActionName”, “ControllerName”, new { id = 1 })”
class=”css-class”>Link Text</a>
Here,
 <a>: This is the HTML anchor tag used to create hyperlinks. Anything
enclosed between the opening <a> and closing </a> tags becomes clickable
and can navigate the user to another view or website.
 href=: This attribute within the anchor tag specifies the URL to which the link
should navigate when clicked.
 @Url.Action(…): This is a Razor syntax feature used within an ASP.NET
Core MVC view. It invokes the Url.Action method, which generates a URL to
an action method within a controller.
 “ActionName”: The first parameter specifies the name of the action method
you want to link to. This action method should exist within the specified
controller and be responsible for returning a view or performing some
operations when the link is clicked.
 “ControllerName”: The second parameter is the name of the controller
where the action method resides. Controllers in ASP.NET Core MVC serve as
an intermediary between models and views, handling user inputs and
returning responses.
 new { id = 1 }: This is an anonymous object that represents route values.
Here, it specifies any additional parameters that the action method requires.
In this example, an id parameter with a value of 1 is passed to the action
method. This is useful for specifying which resource you want to access or
manipulate when the link is clicked.
 398

 class=”css-class”: This is a standard HTML attribute that applies CSS

classes to the anchor tag. In this example, “css-class” is a placeholder for
whatever CSS class you want to apply to style the link.
 Link Text: This is the visible text of the hyperlink that users see on the web
page. When clicked, it will navigate the user to the URL specified in the href
attribute.
When to use: Use Url.Action when you need to generate a URL to an action method but
don’t necessarily want to render it as a hyperlink at that moment. This is useful for scenarios
like passing URLs to JavaScript for AJAX calls or when setting the src attribute of an <img>
tag dynamically.
Url.RouteUrl
Generates a URL string that corresponds to a route defined in the routing configuration. It
generates only the URL, requiring additional syntax to incorporate the URL into an HTML
element. The Url.RouteUrl can be used within Razor views to generate URLs, which can
then be embedded into anchor tags or other elements as needed.
Syntax: <a href=”@Url.RouteUrl(“RouteName”, new { id = 1 })” class=”css-
class”>Link Text</a>
Here,
 <a>: This is the HTML anchor tag, used to define hyperlinks that, when
clicked, will navigate the user to the specified URL.
 href=: This attribute within the anchor tag specifies the URL the link points to.
 @Url.RouteUrl(…): This is a Razor syntax feature within an ASP.NET Core
MVC view. It calls the Url.RouteUrl method to generate a URL to a route
defined in the routing configuration of the ASP.NET Core MVC application.
 “RouteName”: The first parameter is the name of the route you want to
generate a URL for. This route name must match one of the named routes
defined in your application’s route configuration.
 new { id = 1 }: The second parameter is an anonymous object that specifies
route values. In this case, it provides a route value id with the value of 1. This
is used to populate parameters in the route’s template.
 class=”css-class”: This is a standard HTML attribute used to apply CSS
classes to the anchor tag. It allows you to style the link using CSS. “css-class”
is a placeholder for whatever CSS class you wish to apply.
 Link Text: This is the text displayed for the hyperlink on the web page. Users
can click on this text to follow the link generated by @Url.RouteUrl.
When to use: Use Url.RouteUrl when you need to generate a URL that adheres to a
specific routing configuration, similar to Html.RouteLink, but without immediately rendering it
as a hyperlink. This is useful for more complex routing scenarios where you need the URL
for purposes other than directly linking, such as in AJAX calls or other dynamic client-side
operations.
Example to Understand How to Generate Links in ASP.NET Core
MVC:
Let us see an example of the above-discussed approaches to generate links in ASP.NET
Core MVC Views. First, create a class file named Product.cs within the Model folder and
then copy and paste the following code:
namespace HTML_HELPER.Models
 399

public class Product

public int Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public string Category { get; set; }

public decimal Price { get; set; }

public int Quantity { get; set; }

}
ProductsController
Let’s assume we have a Products controller with two actions: List (to display a list of
products) and Details (to display details of a specific product). We want to create links in our
views that direct users to these actions. So, create an empty MVC Controller
named ProductsController and then copy and paste the following code:
using HTML_HELPER.Models;

using Microsoft.AspNetCore.Mvc;

namespace HTML_HELPER.Controllers

public class ProductsController : Controller

private static readonly List<Product> _products = new List<Product>

new Product { Id = 1, Name = "Laptop", Description = "A powerful laptop.", Category =

"Electronics", Price = 1200.00m, Quantity = 10 },
 400

new Product { Id = 2, Name = "Smartphone", Description = "A high-end smartphone.",

Category = "Electronics", Price = 800.00m, Quantity = 20 },

new Product { Id = 3, Name = "Desktop", Description = "A Performance Desktop", Category

= "Electronics", Price = 1000.00m, Quantity = 15 }

};

public IActionResult List()

return View(_products);

public IActionResult Details(int id)

var product = _products.Find(p => p.Id == id);

return View(product);

}
Creating a Route:
Next, add the following code to the Program.cs class file. Here, we are adding a new route
with the name ProductDetails. We will use this route name inside a view to generate the
link.
app.MapControllerRoute(

name: "ProductDetails",

pattern: "Products/Details/{id}",

defaults: new { controller = "Products", action = "Details" });

Creating Views
Now, let’s create views for these actions and demonstrate different link-generation methods.
List View (List.cshtml)
 401

This view displays a list of product names and uses different mechanisms to generate links
to the details of each product:
@model IEnumerable<HTML_HELPER.Models.Product>

@{

ViewData["Title"] = "List";

<h2>Product List</h2>

<table class="table">

<thead>

<tr>

<th>

Name

</th>

<th>

ActionLink

</th>

<th>

RouteLink

</th>

<th>

Tag Helper

</th>

<th>

Action

</th>
 402

<th>

RouteUrl

</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model)

<tr>

<td>

@item.Name

</td>

<td>

@Html.ActionLink("View", "Details", "Products", new { id = item.Id }, new { @class =

"product-link" })

</td>

<td>

@Html.RouteLink("View", "ProductDetails", new { id = item.Id }, new { @class = "link-

class" })

</td>

<td>

<a asp-controller="Products" asp-action="Details" asp-route-id="@item.Id" class="link-

class">View</a>

</td>

<td>
 403

<a href="@Url.Action("Details", "Products", new { id = item.Id })" class="link-

class">View</a>

</td>

<td>

<a href="@Url.RouteUrl("ProductDetails", new { id = item.Id })" class="link-

class">View</a>

</td>

</tr>

</tbody>

</table>
Details View (Details.cshtml)
This view displays the details of a single product. The DisplayNameFor helper methods
display the model property’s name, and the DisplayFor method displays the associated
value of a model property.
@model HTML_HELPER.Models.Product

@{

ViewData["Title"] = "Details";

<div>

<h4>Product Details</h4>

<hr />

<dl class="row">

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Id)

</dt>
 404

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Id)

</dd>

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Name)

</dt>

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Name)

</dd>

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Description)

</dt>

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Description)

</dd>

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Category)

</dt>

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Category)

</dd>

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Price)

</dt>
 405

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Price)

</dd>

<dt class = "col-sm-2">

@Html.DisplayNameFor(model => model.Quantity)

</dt>

<dd class = "col-sm-10">

@Html.DisplayFor(model => model.Quantity)

</dd>

</dl>

</div>

<div>

<a asp-action="List">Back to List</a>

</div>
Now, run the application and navigate to the Products/List URL, and you should see the
following page:

Now, if you click any of the links, then it should open the Details Page as shown in the
below image:
 406

Differences Between Html.ActionLink, Html.RouteLink, Action Tag

Helper, Url.Action, Url.RouteUrl
ASP.NET Core MVC offers various mechanisms to generate links in views, each with its
specific use case and flexibility level. Understanding the differences between these
mechanisms can help you choose the most appropriate one for your needs. Here’s an
overview:
Html.ActionLink
Generates a fully qualified URL to an action method by using the specified action name and
controller name.
 Syntax: @Html.ActionLink(“Link Text”, “ActionName”, “ControllerName”)
 Pros: Easy to use for generating links to controller actions directly from Razor
views. It also allows setting HTML attributes directly.
 Cons: Less flexible compared to using tag helpers because it requires
specifying parameters as method arguments, which can be error-prone if
there are many parameters or route values.
Html.RouteLink
Generates a hyperlink (anchor tag) that corresponds to a route defined in the routing
configuration.
 Syntax: @Html.RouteLink(“Link Text”, “RouteName”, new { id = 1 })
 Pros: Offers more control over the generated URL by allowing you to specify
a route name and route values. It’s useful when you want to link to a specific
route rather than an action method.
 Cons: Like Html.ActionLink, specifying parameters as method arguments can
be less intuitive compared to using tag helpers.
Action Tag Helper
A newer, more flexible way to generate links using tag helpers. You specify the action and
controller names directly as attributes of an <a> tag.
 407

 Syntax: <a asp-action=”ActionName” asp-controller=”ControllerName”>Link

Text</a>
 Pros: Integrates directly into HTML, making the code more readable and
maintainable. Allows for the use of ASP.NET Core’s tag helpers, which can
provide IntelliSense in supported IDEs.
 Cons: Requires understanding of tag helpers and how they work in ASP.NET
Core. May not be as straightforward for developers used to traditional HTML
or Razor syntax.
Url.Action
Generates a URL string to an action method. Useful in scenarios where you need the URL
itself rather than an anchor tag.
 Syntax: @Url.Action(“ActionName”, “ControllerName”)
 Pros: Provides flexibility in generating URLs for use in various contexts, not
just for anchor tags. Can be used in JavaScript or for redirect purposes.
 Cons: Only generates the URL, so additional HTML or Razor syntax is
needed to create the anchor tag or other elements where the URL will be
used.
Url.RouteUrl
Generates a URL string that corresponds to a route defined in the routing configuration.
 Syntax: @Url.RouteUrl(“RouteName”, new { id = 1 })
 Pros: Similar to Url.Action but provides more control over the generated URL
by specifying a route name and values. Useful for generating URLs based on
routing rather than controller actions.
 Cons: As with Url.Action, it generates only the URL, requiring additional
syntax to incorporate the URL into an HTML element.
Conclusion
The choice between these mechanisms depends on your specific scenario:
 Use Html.ActionLink or Html.RouteLink for straightforward link generation
within Razor views when you want to include the anchor tag directly with
minimal fuss.
 Use Action Tag Helper when you prefer a more HTML-like syntax and the
flexibility of tag helpers.
 Choose Url.Action or Url.RouteUrl when you need the URL for purposes other
than directly creating an anchor tag, such as generating links in scripts or for
redirects.

Tag Helpers in ASP.NET Core MVC

In this article, I will discuss Tag Helpers in ASP.NET Core MVC Applications with
Examples. Tag helpers are one of the new features introduced in ASP.NET Core MVC.
Please read our previous article discussing How to Create Custom HTML Helpers in
ASP.NET Core MVC Applications. As part of this article, we will discuss the following
pointers.
1. What are Tag Helpers in ASP.NET Core MVC?
2. Key Characteristics of Tag Helpers in ASP.NET Core MVC
3. Types of Tag Helpers in ASP.NET Core MVC
4. Built-in Tag Helpers Type in ASP.NET Core MVC
 408

5. How to Use Tag Helpers in ASP.NET Core MVC?

6. Example to Understand Built-in Tag Helpers in ASP.NET Core MVC
7. Generating Links using Tag Helpers in ASP.NET Core MVC Application
8. Understanding Anchor Tag Helper in ASP.NET Core MVC
What are Tag Helpers in ASP.NET Core MVC?
Tag Helpers in ASP.NET Core MVC allow us to write HTML-like code that is closely
associated with C# backend code. They simplify the process of generating HTML elements
in views. Tag Helpers are useful because they allow you to keep your HTML clean and
readable while still providing powerful data-binding and server-side logic capabilities directly
within your views.
Types of Tag Helpers in ASP.NET Core MVC:
ASP.NET Core MVC has two main types of Tag Helpers: Built-in Tag Helpers
and Custom Tag Helpers. Both types of Tag Helpers contribute to simplifying the process
of generating HTML elements in views, but they serve different purposes.
Built-in Tag Helpers:
These Tag Helpers are provided by default as part of the ASP.NET Core framework. They
cover common scenarios and tasks, such as generating links, creating forms, showing
validation messages, etc. Some examples of built-in Tag Helpers include:

Conquering the clouds on a journey to Ta Xua with the team - Road Trip Vietnam Team
- Nếm TV00:03 / 02:5410 Sec
 <a asp-controller=”Home” asp-action=”Index”>Link</a>: Generates a
link with a URL that’s generated by routing based on the specified controller
and action.
 <img src=”~/images/pic.jpg” asp-append-version=”true” />: Generates a
<img> tag with a cache-busting query string to ensure the latest version of the
image is fetched.
 <form asp-controller=”Account” asp-action=”Login” method=”post”>…
</form>: Generates a form element with the appropriate action attribute for
the specified controller and action.
 <input asp-for=”Username” />: Generates an input field with attributes
based on the model property specified by asp-for.
Custom Tag Helpers:
Custom Tag Helpers allow us to encapsulate complex UI logic and generate HTML output
based on our application’s requirements. They are defined by extending the TagHelper
class and overriding its methods.
To create a custom Tag Helper, we need to define a class that derives from
the TagHelper base class and override the Process/ProcessAsync method to generate
the desired HTML output. You can then use your custom Tag Helper in your Razor views by
referencing it with the appropriate HTML-like syntax.
Note: In this article, I will give an overview of Built-in Tag Helpers, and in our upcoming
articles, I will discuss How to Create Custom Tag Helpers.
Built-in Tag Helpers Type in ASP.NET Core MVC:
In ASP.NET Core MVC, several built-in HTML Tag Helpers cover common HTML elements
and scenarios. These tag helpers simplify generating HTML markup while still allowing you
to incorporate server-side logic. Here are some of the types of HTML Tag Helpers available:
 409

Anchor Tag Helpers (<a>):

These tag helpers generate hyperlinks. You can use them to create links to different
actions, controllers, or URLs. Examples include:
<a asp-controller="Home" asp-action="Index">Home</a>

<a asp-controller="Home" asp-action="Details" asp-route-id="42">Details</a>

Form Tag Helpers (<form>):
These tag helpers generate HTML forms. They help create forms that post data to actions
in your controllers. Examples include:
<form asp-controller="Account" asp-action="Login" method="post">

<!-- form fields -->

</form>
Image Tag Helper (<img>):
This tag helper generates image elements with the appropriate src attribute. You can use it
to include images in your views. Example:
<img src="~/images/pic.jpg" alt="Picture">
Input Tag Helpers (Various Input Elements):
These tag helpers generate various types of input elements such as text boxes,
checkboxes, radio buttons, etc. Examples include:
<input asp-for="Name" />

<input asp-for="IsAdmin" type="checkbox" />

Cache Tag Helpers (<cache>):
These help cache portions of your views to improve performance by reducing the need to
recompute content on every request. Example:
<cache>

<!-- Content to be cached -->

</cache>
Localization Tag Helpers:
These help render content based on the current culture and provide localized strings.
Example:
<localized asp-culture="en-US">Hello!</localized>
Environment Tag Helper:
This tag helper conditionally renders content based on the hosting environment. It can be
useful for including different content for development and production environments.
Partial Tag Helper:
This tag helper renders a partial view within another view. It’s useful for breaking down
complex views into smaller components.
 410

View Component Tag Helper:

This tag helper renders a view component within a view. View components are similar to
partial views but offer more encapsulation and flexibility.
How to Use Tag Helpers in ASP.NET Core MVC?
Using Tag Helpers in ASP.NET Core MVC is relatively straightforward. Here’s a step-by-
step guide on how to use Tag Helpers in your ASP.NET Core MVC application:
1. Create a New ASP.NET Core MVC Project: If you haven’t already, create a
new ASP.NET Core MVC project using your preferred development tools.
2. Add Views and Controllers: Set up your controllers and views as needed for
your application.
3. Understand Built-in Tag Helpers: Familiarize yourself with the built-in Tag
Helpers provided by ASP.NET Core. These include helpers for generating
links, forms, images, and more.
4. Using Built-in Tag Helpers: To use a built-in tag helper, include the
appropriate HTML-like syntax in your Razor views.
Example to Understand Built-in Tag Helpers in ASP.NET Core MVC:
Let us understand how to use built-in tag helpers with an example from an ASP.NET Core
MVC application. So, create a new ASP.NET Core Application
named TagHelpersDemo using the Model-View-Controller Project template. To make the
Built-in Tag Helpers available for all views of our application, we need to import them inside
the _ViewImports.cshtml file using the @addTagHelper directive, as shown below.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
The line @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers is a directive that brings
in a set of Tag Helpers from the specified assembly, making them available to the view in
which the directive is declared. Let’s break this down for clarity:
 @addTagHelper: This is the directive used to add Tag Helpers to a view. Tag
Helpers enable server-side code to participate in creating and rendering
HTML elements in Razor files.
 *: The asterisk (*) is a wildcard character that specifies that all Tag Helpers
from the given assembly should be available for the view. This means you
don’t have to add each Tag Helper individually; instead, you can include them
all at once with this wildcard.
 AspNetCore.Mvc.TagHelpers: This specifies the assembly containing the
Tag Helpers you are adding to your view.
Microsoft.AspNetCore.Mvc.TagHelpers is the assembly that comes with
ASP.NET Core MVC and provides a set of built-in Tag Helpers for common
tasks like creating forms, links, loading scripts, etc. By adding this assembly,
you get access to these helpers, which can make your Razor views more
readable and easier to maintain by reducing the amount of explicit HTML and
JavaScript code you need to write.
Generating Links using Tag Helpers in ASP.NET Core MVC Application:
Let us understand this with an example. First, create a class file named Student.cs within
the Models folder. Once you create the Student.cs class file, then copy and paste the
following code into it. As you can see, this is a very simple Student Model having only five
properties holding the Student ID, Name, Branch, Section, and Gender.
namespace TagHelpersDemo.Models
 411

public class Student

public int StudentId { get; set; }

public string? Name { get; set; }

public string? Branch { get; set; }

public string? Section { get; set; }

public string? Gender { get; set; }

}
Modifying Home Controller:
Modify the HomeController as shown below. Here, we have created two action methods. To
simplify things and keep the focus on Tag helpers, we have hard-coded the required
student data using the action method. The Index action method returns a list of students to
the view, whereas the Details action method takes the student ID as a parameter and
returns that student information to the view.
using TagHelpersDemo.Models;

using Microsoft.AspNetCore.Mvc;

namespace TagHelpersDemo.Controllers

public class HomeController : Controller

private List<Student> listStudents;

public HomeController()

//Create a List of Students

//In Real-Time, you will get the data from the database
 412

listStudents = new List<Student>()

new Student() { StudentId = 101, Name = "James", Branch = "CSE", Section = "A", Gender
= "Male" },

new Student() { StudentId = 102, Name = "Smith", Branch = "ETC", Section = "B", Gender
= "Male" },

new Student() { StudentId = 103, Name = "David", Branch = "CSE", Section = "A", Gender
= "Male" },

new Student() { StudentId = 104, Name = "Sara", Branch = "CSE", Section = "A", Gender =
"Female" },

new Student() { StudentId = 105, Name = "Pam", Branch = "ETC", Section = "B", Gender =
"Female" }

};

public ViewResult Index()

//Pass the Student List to the View to make the view as a Strongly Typed View

return View(listStudents);

public ViewResult Details(int Id)

//Fetch the Student Details

var studentDetails = listStudents.FirstOrDefault(std => std.StudentId == Id);

//Pass the Student model to the View to make the view as a Strongly Typed View

return View(studentDetails);
 413

}
Creating Details View:
Create a view named Details.cshtml within the Views=>Home folder, then copy and paste
the following code.
@model TagHelpersDemo.Models.Student

@{

ViewBag.Title = "Student Details";

Layout = "~/Views/Shared/_Layout.cshtml";

<div class="row m-3">

<div class="col-sm-8">

<div class="card">

<div class="card-header text-center">

<h1>@Model?.Name</h1>

</div>

<div class="card-body text-center">

<h4>Studnet ID : @Model?.StudentId</h4>

<h4>Branch : @Model?.Branch</h4>

<h4>Section : @Model?.Section</h4>

<h4>Gender : @Model?.Gender</h4>

</div>

<div class="card-footer text-center">

<a href="#" class="btn btn-primary">Back</a>

 414

</div>

</div>

</div>

</div>
Modifying Index View:
Now, in the index view, we have to provide the View button as a link. When we click the
View button, we need to display the Student Details. For example, we need to generate the
following hyperlink. The number 101 is the ID of the student whose details we want to view.
/home/details/101
There are many different methods for generating a link in the ASP.NET Core MVC
Application. Let’s discuss all the possible options, and then we will discuss why we should
use Tag Helper over others.
Method 1: Using HTML Element:
In this case, we need to use the anchor tag, and in the href attribute, we need to specify the
path of the details action method along with the student id like <a
href=”/home/details/@student.StudentId”>View</a>. So, modify the Index action
method of the Home Controller as follows.
@model List<TagHelpersDemo.Models.Student>

@{

ViewBag.Title = "Student List";

Layout = "~/Views/Shared/_Layout.cshtml";

<div class="table-responsive">

<table class="table">

<thead>

<tr>

<th>ID</th>

<th>Name</th>

<th>View</th>

</tr>
 415

</thead>

<tbody>

@foreach (var student in Model)

<tr>

<td>@student.StudentId</td>

<td>@student.Name</td>

<td><a href="/home/details/@student.StudentId" class="btn btn-primary">View</a></td>

</tr>

</tbody>

</table>

</div>
With the above changes in place, run the application and navigate to the Root URL
or Home/Index URL. You should see the following page on the web browser.
 416

Once you click on the View button, it will execute the Details action method of the Home
Controller by passing the Student ID value 101, and hence, you will see the following
Details view of the Home Controller showing the Student details.

Method 2: Using HTML Helpers

 417

Using HTML Helper methods, we can also generate the link. In this case, we need to use
the ActionLink Helper method to generate the link like @Html.ActionLink(“View”,
“Details”, “Home”, new {id = student.StudentId}).
Here, the parameter View is nothing but the link text; the second parameter Details is the
Action method name; the third parameter Home is the controller’s name, and the fourth
parameter is object routeValues, which specifies the id parameter value. So, modify
the Index.cshtml view of the Home Controller as follows to use the HTML Helper Method to
generate the link.
@model List<TagHelpersDemo.Models.Student>

@{

ViewBag.Title = "Student List";

Layout = "~/Views/Shared/_Layout.cshtml";

<div class="table-responsive">

<table class="table">

<thead>

<tr>

<th>ID</th>

<th>Name</th>

<th>View</th>

</tr>

</thead>

<tbody>

@foreach (var student in Model)

<tr>

<td>@student.StudentId</td>

<td>@student.Name</td>
 418

<td>@Html.ActionLink("View","Details","Home", new {id = student.StudentId})</td>

</tr>

</tbody>

</table>

</div>
With the above changes in place, run the application and see if everything is working as
expected.
Method 3: Using Tag Helpers:
To use Tag Helpers, first, we need to import the @addTagHelper directive in
the _ViewImport.cshtml file. We also add the model namespace using
the @using directive. So, modify the _ViewImport.cshtml file as shown below, which you
can find within the Views folder.
@using TagHelpersDemo

@using TagHelpersDemo.Models

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
With these changes in place, you can now access the types defined with the above-using
namespace throughout the application without re-specifying the namespace and all the tag
helpers you can access from all the views. Next, modify the Index view of the Home
Controller as shown below. Here, we are using Tag Helpers.
@model List<TagHelpersDemo.Models.Student>

@{

ViewBag.Title = "Student List";

Layout = "~/Views/Shared/_Layout.cshtml";

<div class="table-responsive">

<table class="table">

<thead>

<tr>
 419

<th>ID</th>

<th>Name</th>

<th>View</th>

</tr>

</thead>

<tbody>

@foreach (var student in Model)

<tr>

<td>@student.StudentId</td>

<td>@student.Name</td>

<td>

<a asp-controller="Home"

asp-action="Details"

asp-route-id="@student.StudentId">View</a>

</td>

</tr>

</tbody>

</table>

</div>
Now, run the application, and it should work as expected.
Understanding Anchor Tag Helper in ASP.NET Core MVC:
The Anchor Tag Helper in ASP.NET Core creates the standard HTML anchor (<a … ></a>)
tag by adding attributes such as:
 420

 asp-controller: It is used to specify the controller to target based on the

routing system. If you omitted this, then the controller of the current view is
used by default.
 asp-action: It is used to specify the Action method to target based on the
routing system. If you omit this attribute, the action rendering the current view
is the default.
 asp-route-{value}: It specifies the additional segment value for the URL. For
example, asp-route-id provides value for the ‘id’ segment.
The value of the rendered anchor element’s “href” attribute is determined by the values of
these “asp-“ attributes. As the name says, asp-controller specifies the controller’s name,
whereas asp-action specifies the name of the action name. Similarly, the asp-route-{value}
attribute includes route data in the generated href attribute value. {value} can be replaced
with route parameters such as id, name, etc. Let us have a look at the following image for a
better understanding.

As you can see in the above image, manually generating the links is much easier than using
HTML Helpers or Tag Helpers. So why should we use HTML helpers or Tag Helpers
instead of manually generating these links in ASP.NET Core?
Why should we use Tag Helpers over manually generating these links in
ASP.NET Core?
In ASP.NET Core MVC, Tag Helpers generate links based on the application routing
templates. That means if we change routing templates in the future, the links generated by
tag helpers will automatically reflect those changes. So, the generated links work as
expected without any trouble.
On the other hand, if we have hard-coded the URL paths manually, we need to change the
code wherever we have hard-coded the path in our application when the application routing
templates change. Let’s understand this with an example. The following is the Main method
of the Program class of our application.
namespace TagHelpersDemo

public class Program

{
 421

public static void Main(string[] args)

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())

app.UseExceptionHandler("/Home/Error");

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.

app.UseHsts();

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

}
 422

}
As you can see in the above code, currently, we have the route template pattern
as {controller=Home}/{action=Index}/{id?}.
Generating Link Manually: We can generate the link manually using the following code by
hard-coding the URL paths as /Home/Details.
<a href=”/Home/Details/@student.StudentId”>View</a>
Generating Link using Tag Helper: In the following code, we generate the link using
anchor tag helper.
<asp-controller=”Home” asp-action=”Details” asp-route-
id=”@student.StudentId”>View</a>
As you can see with Tag Helper, we have not hardcoded the URL paths. Here, we only
specify the controller and action name, route parameters, and their values. When the tag
helpers are executed on the server, they automatically look at the route templates and
generate the correct URLs.
Here, both the techniques generate the same URL path, i.e. (/Home/Details/101), and it
also works with the current route template, i.e. ({controller=Home}/{action=Index}/{id?})
Now, let us change the routing template as shown below. Notice here the route template
pattern. We have added the string literal “dotnet”.

So, with the above changes in place, manually generating the link will not work if you run
the application, whereas the link generating with Tag Helpers will work as expected.

Image Tag Helper in ASP.NET Core MVC Application

I will discuss the Image Tag Helper in ASP.NET Core MVC Web Application with Examples
in this article. Please read our previous article, discussing the basics of Tag Helpers in
ASP.NET Core MVC Application. As part of this article, we will discuss the following
pointers. As part of this article, we will discuss the following pointers.
1. Understanding the Browser Cache
2. How to Disable Browser Cache?
3. Why do we need an Image Tag Helper in ASP.NET Core?
4. How Do We Use Image Tag Helper in ASP.NET Core?
5. Understanding ASP.NET Core Image Tag Helper with an example
6. How Does the Image Tag Helper Work in ASP.NET Core?
Understanding the Browser Cache:
When we visit a web page containing some images, most modern web browsers cache the
images for future use. In the future, when we revisit the same web page, the browser loads
the images from the cache instead of downloading the images from the server. This is not
an issue in most cases, as the images are not often changed for a web page.
How to Disable Browser Cache?
 423

You can also disable the browser cache. Once you disable the browser cache, the images
will not be cached; instead, they will be downloaded from the server each time you visit the
page. To disable the browser cache in Google Chrome, follow the steps below.
Press the F12 key to launch the Browser Developer Tools. Then click on
the “Network” tab, and finally, check the “Disable Cache” checkbox as shown in the
below image.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:09 / 03:1110 Sec

Why do we need an Image Tag Helper in ASP.NET Core?

If you disable the browser cache, it will download the image from the server each time. If
you don’t disable the browser cache, it will serve the image from the browser cache.
However, the problem with this approach is that if you change the image in the server, you
will not get the updated image if the browser cache is not disabled.
To overcome the above problems, i.e., download the image from the server only when it
has changed, or else serve the image from the browser cache, we need to use the Image
Tag helper in the ASP.NET Core MVC Application.
The Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static
image files. A cache-busting string is a unique value representing the hash of the static
image file appended to the asset’s URL. The unique string prompts clients to reload the
image from the host web server, not the browser’s cache. If this is not clear at the moment,
then don’t worry. We will understand this concept with an example.
What is an Image Tag Helper?
The Image Tag Helper in ASP.NET Core MVC simplifies the process of generating <img>
elements for displaying images on your web pages. It helps ensure that image URLs are
correctly generated, which is especially useful when dealing with dynamic content or
different environments.
How Do We Use Image Tag Helper in ASP.NET Core MVC?
The primary usage of the Image Tag Helper is similar to the regular HTML <img> tag, but it
allows you to specify the image source using the src attribute.
<img src="~/images/Image1.jpg" alt="My Image" />
Cache-Busting:
One of the benefits of the Image Tag Helper is that it can automatically append a cache-
busting query string to the image URL. This ensures that browsers fetch the latest version
of the image when it has been updated on the server.
<img src="~/images/Image1.jpg" alt="My Image" asp-append-version="true" />
The asp-append-version=”true” attribute will add a query string based on the image’s last
modified timestamp, ensuring that the URL changes when the image changes.
Width and Height Attributes:
You can specify the image’s dimensions using the width and height attributes. This helps
 424

improve page loading performance by indicating the image dimensions to the browser
before the image is fully loaded.
<img src="~/images/Image1.jpg" alt="My Image" width="200" height="150" />
Additional Attributes:
The Image Tag Helper supports other attributes you might want to use with the <img> tag,
such as class, style, alt, and more.
<img src="~/images/Image1.jpg" alt="My Image" class="img-thumbnail" style="border:
1px solid #ccc;" />
Using Model Binding:
You can also use the Image Tag Helper with model binding. If your view model has an
image property, you can bind it directly to the src attribute. Assuming your view model has a
property named ImageUrl:
<img asp-src="@Model.ImageUrl" alt="Image">
In this case, the asp-src attribute binds to your model’s ImageUrl property, generating the
appropriate src attribute.
Understanding ASP.NET Core Image Tag Helper With an Example:
First, create a folder with the name images within the wwwroot folder of your application.
Once you create the images folder, add images with the
names Image1.jpg and Image2.jpg. For better understanding, add two different images, as
shown in the below image.
 425

Once you add the above two images, your wwwroot folder should look as shown below.

Modifying Home Controller:

Next, modify the Home Controller as shown below. We have modified the HomeController
to use the Index Action method, which returns a View.
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
}
}
Modifying Program Class:
Next, modify the Main method of the Program class to include static files middleware before
the MVC middleware.
namespace TagHelpersDemo
{
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
 426

// Add services to the container.

builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
//Adding Static Files Middleware to Serve the Static Files
//This Should be added before the MVC Middleware
app.UseStaticFiles();
//This should be included as want to use End Point Routing
app.UseRouting();
app.UseAuthorization();
//Adding MVC Middleware to the Request processing Pipeline
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
}
}
}
Modifying _ViewImports.cshtml file:
Next, make sure to include the @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
inside the _ViewImports.cshtml file. So, modify the _ViewImports.cshtml file as follows.
@using TagHelpersDemo
@using TagHelpersDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Modifying Index View:
 427

Next, modify the Index View as shown below. Here, we have only the img tag, which loads
the image Image1.jpg from the images folder. Along with the src attribute, where we set the
path of the image, we have also used the asp-append-version attribute and set its value to
true.
@{
ViewBag.Title = "Index";
Layout = null;
}
<img src="~/images/Image1.jpg" asp-append-version="true" />
With the above changes in place, run the application, and you should get the output as
expected, as shown in the image below. Next, right-click on the page and then click on view
the page source, as shown in the image below.

Once you view the page source code, you will find the following code for the image tag.
 428

How Does the Image Tag Helper Work in ASP.NET Core?

The ASP.NET Core Image Tag Helper enhances the <img> tag to provide cache-
busting behavior for static image files. That means based on the image’s content, a unique
hash value is calculated and then appended to the image URL, as you can see in the above
image. This unique hash value decides whether to load the image from the server or load
the image from the browser cache. If the hash value changes, it will reload the image from
the server; otherwise, it will reload the image from the cache.
Now, reload the page multiple times, and you will see the hash will not change; hence, it will
load the image from the browser cache.
Now, rename Image1 as Image3 and Image2 as Image1 within your application’s images
folder and reload the page. You will see a different hash value as well as the updated
image, which proves that it loads the image from the server, as shown in the image below.

When Should We Use Image Tag Helper in ASP.NET Core MVC?

The Image Tag Helper in ASP.NET Core MVC is useful in scenarios where you need to
include images in your views and want to take advantage of its features to simplify image
handling and improve performance. Here are situations when you should consider using the
Image Tag Helper:
 Dynamic Image URLs: When you need to display images with URLs that
change dynamically based on data from your application or user input, the
Image Tag Helper can automatically generate the correct URLs.
 Including Images in Views: The primary purpose of the Image Tag Helper is
to simplify the process of including images in your HTML views. If you have
images that need to be displayed on your web pages, using the Image Tag
Helper can make the markup cleaner and more readable.
 Cache-Busting and Versioning: If your application frequently updates
images, using the Image Tag Helper with the asp-append-version=”true”
attribute helps ensure that browsers fetch the latest version. This is
particularly important for preventing users from seeing outdated cached
images.
 Performance Optimization: You can improve page loading performance by
specifying the width and height attributes in the Image Tag Helper. The
browser can allocate space for the image before it’s fully loaded, reducing
layout shifts and improving user experience.
 429

 Simplifying Markup: The Image Tag Helper simplifies the markup by

handling the correct generation of the src attribute. This can be especially
helpful when working with dynamic paths or URLs.
 Model Binding: If your view model has an image property, you can bind it
directly to the src attribute of the Image Tag Helper, making it easier to
display images from your model.

Environment Tag Helper in ASP.NET Core MVC

Application
I will discuss the Environment Tag Helper in ASP.NET Core MVC Application with
Examples in this article. Please read our previous article, discussing the Image Tag Helper
in ASP.NET Core MVC Application with Examples. As part of this article, we will discuss
the following pointers.
1. What is Environment Tag Helper in ASP.NET Core MVC?
2. Different Environments in Software Development
3. How Do We Use the Environment Tag Helper in ASP.NET Core MVC?
4. Real-Time Example of Environment Tag Helper in ASP.NET Core
5. How to Set Environment in ASP.NET Core Application?
6. Real-Time Use Cases of Environment Tag Helper in ASP.NET Core MVC
What is Environment Tag Helper in ASP.NET Core MVC?
The Environment Tag Helper in ASP.NET Core provides a way to conditionally render
content in your views based on the hosting environment. That means the Environment Tag
Helper is used to include or exclude portions of the Razor view markup based on the
current hosting environment. It’s useful for adding or removing links to CSS stylesheets,
scripts, or other elements that should only be rendered in specific environments like
Development, Staging, or Production.
Different Environments in Software Development:
Software development environments refer to the stages through which a software product
goes during its development lifecycle. These environments are designed to manage the
development process in a structured way, allowing for testing, development, deployment,
and maintenance of software. Nowadays, most software development organizations
typically have the following three environments.
1. Development Environment
2. Staging Environment
3. Production Environment
Development Environment:
The “Development Environment” refers to a specific stage in the software development
lifecycle where developers create and test software applications before they are released to
production. It’s the environment in which developers write and debug code, integrate
different components, and ensure the application behaves as expected.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:17 / 03:1110 Sec
 430

As software developers, we generally use this development environment for our day-to-day
development work. In this environment, we generally use non-minified JavaScript and
CSS files for easy debugging. Another use of this environment is that we want to show
the developer exception page if there is an unhandled exception so that we can understand
the root cause of the exception and then take necessary action to fix the issue.
 Who Works Here: Software developers primarily work in this environment.
It’s their playground for writing code, developing features, and performing
initial unit tests.
 Responsibilities: Developers are responsible for implementing new features,
fixing bugs, and ensuring their code meets initial quality standards before it’s
moved to the next environment.
Testing Environment
The Testing Environment is Dedicated to testing and quality assurance. Here, the software
is tested for bugs, errors, and issues that weren’t caught during initial development. This
Environment Mirrors the production environment as closely as possible to ensure that
testing conditions resemble the final usage scenario. This environment may also be referred
to as the QA (Quality Assurance) environment.
 Who Works Here: QA engineers and testers are the primary users of this
environment. Their expertise is in systematically finding and reporting bugs,
as well as verifying bug fixes.
 Responsibilities: QA professionals run various tests, including functional
tests, regression tests, and sometimes automated tests, to ensure the
software meets all requirements and is free of defects.
Staging Environment:
A “Staging Environment” is a phase in the software development lifecycle that comes after
the development/testing environment and before the production environment. The staging
environment serves as an intermediate testing ground where the application is tested in an
environment that closely resembles the production environment. Its primary purpose is to
identify and address any issues, bugs, or discrepancies before the application is deployed
to actual users in the production environment.
The staging environment is very much similar to the production environment. Nowadays,
many organizations use this staging environment to identify any deployment-related issues.
Again, if you are developing a B2B (business-to-business) application, you may use
services provided by other service providers. So, many organizations set up their staging
environment to check the service providers as well for complete end-to-end testing.
We usually do not perform the debugging and troubleshooting in the staging environment,
so we need to use the minified JavaScript and CSS files to perform better. Again, if there is
an exception, we need to show a friendly error page instead of showing the developer
exception page. The friendly error page will not contain any details about the exceptions.
Instead, it shows a generic error message like the one below.
“Something went wrong. Our IT team is working to solve this as soon as possible. If
you need further details, please Email, Chat, or Call our support team using the
contact details below.”
 Who Works Here: A mix of QA engineers, developers, and sometimes
product managers or clients. This environment is a pre-production mirror
used for final checks.
 431

 Responsibilities: Conducting User Acceptance Testing (UAT), performance

testing, security testing, and ensuring the software runs as expected in a
production-like environment.
Production Environment:
The “Production Environment” is the final phase in the software development lifecycle. The
fully developed and thoroughly tested software application is deployed and made available
to actual users or customers. The production environment is the live or operational
environment where users interact with the application, and its stability, performance, and
security are of utmost importance.
This is the live environment for the client or users to use for day-to-day business. The
Production environment should be configured for maximum security and performance. So,
in this environment, we should use the minified JavaScript and CSS files. For better
security, we need to show a User-Friendly Error Page instead of the Developer Exception
Page when an unhandled exception occurs in our application.
 Who Works Here: While not a development or testing environment in the
traditional sense, operations teams, DevOps, and sometimes developers
have roles in managing and monitoring the production environment.
 Responsibilities: Ensuring the application is running smoothly, deploying
new releases, monitoring performance, and quickly addressing any
production issues or bugs that arise.
How Do We Use the Environment Tag Helper in ASP.NET Core?
First, ensure your view includes the necessary directive to use Tag Helpers. This is usually
already included in _ViewImports.cshtml:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Attributes:
 include: Specifies the environment names in which the content should be
included.
 exclude: Specifies the environment names from which the content should be
excluded. If the current environment matches one of the names in the
exclude attribute, the content will not be rendered.
Determining the Current Environment: ASP.NET Core uses the
ASPNETCORE_ENVIRONMENT environment variable to determine the current
environment. This variable can be set in various places like the project properties,
launchSettings.json, or directly in the system’s environment variables.
Basic Usage:
The basic usage of the Environment Tag Helper involves wrapping the content you want to
render within <environment> tags conditionally. You can specify the environment(s) for
which the content should be rendered using the include attribute.
<environment include="Development">
<!-- Content only visible in the Development environment -->
</environment>
Specifying Multiple Environments:
You can specify multiple environments using a comma-separated list in the include
attribute. The content will be rendered if the application runs in any specified environment.
<environment include="Development,Staging">
 432

<!-- Content visible in the Development and Staging environments -->

</environment>
Negating Environments:
You can use the exclude attribute to negate the environments for which the content should
be rendered. The content will be rendered if the application is not running in the specified
environment(s).
<environment exclude="Production">
<!-- Content not visible in the Production environment -->
</environment>
Real-Time Example of Environment Tag Helper in ASP.NET Core:
In our ASP.NET Core MVC Web Application, we use Bootstrap to style the web page. For
ease of debugging, i.e., on our local development (i.e., Development Environment), we want
to load the non-minified bootstrap CSS file, i.e., bootstrap.css.
On the Staging and Production or any other environment except the Development
environment, we want to load the minified bootstrap CSS file, i.e., bootstrap.min.css, from a
CDN (Content Delivery Network) for better performance. Nowadays, most web applications
use CDN to load the minified bootstrap files.
However, if the CDN is down or, for some reason, our application cannot load the file from
the CDN, then we want our application to fall back and load the minified bootstrap file
(bootstrap.min.css) from our server.
We can easily achieve this using the Environment Tag Helper in the ASP.NET Core MVC
Application. But before we understand how to use the Environment Tag Helper, let us first
understand how we set the environment (i.e., Development, Staging, and Production) in the
ASP.NET Core Application.
How to Set Environment in ASP.NET Core Application?
The ASPNETCORE_ENVIRONMENT variable is used to set the Application Environment,
i.e., Development, Staging, or Production. As shown below, the launchsettings.json file
allows us to set the value of the ASPNETCORE_ENVIRONMENT variable to Development.
You can find the launchsettings.json file within your application’s properties folder.
 433

The other possible values for the ASPNETCORE_ENVIRONMENT variable

are Staging and Production. It is also possible to create our environment, which we will
discuss in our upcoming article.
Installing Bootstrap in ASP.NET Core MVC Application:
Please install Bootstrap with the wwwroot folder using Library Manager (LibMan). We
have already discussed installing BootStrap into our ASP.NET Core Application using
Library Manager. So, please read our article on How to install Bootstrap in ASP.NET
Core Application.
Modifying _ViewImports.cshtml file:
Please modify the _ViewImports.cshtml file as shown below to include the tag helpers
globally for our application. This @addTagHelper *,
Microsoft.AspNetCore.Mvc.TagHelpers statement will enable us to use the ASP.NET
Core MVC Tag Helpers in all of our application’s views.
@using TagHelpersDemo
@using TagHelpersDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
ASP.NET Core Environment Tag Helper with Examples:
The Environment Tag Helper in ASP.NET Core supports rendering different content based
on the application’s environment. The environment of the application is set using the
ASPNETCORE_ENVIRONMENT variable within the launchsettings.json file with the
possible values of either Development, Staging, and Production, which we have already
discussed.
 434

Now, if you want to load the non-minified bootstrap CSS files from your server when the
application environment is in Development, then you need to set the environment tag helper
as shown below.

Suppose you want to load the minified bootstrap CSS files from the CDN (Content Delivery
Network) when the application environment is Staging or Production. In that case, you need
to set the environment tag helper, as shown below. As you can see, we have specified
multiple environments separated by a comma.

To get the bootstrap CDN link, please visit the following URL.
https://getbootstrap.com/
Once you visit the above URL, you will see the following page. From here, you need to copy
either CSS, JS, or both as per your application’s requirements. In our example, we only
need CSS, so copy the Bootstrap CDN path of CSS only.
 435

Using the Include attribute of the Environment Tag Helper, we can set a single hosting
environment name or a comma-separated list of hosting environment names like Staging
and Production. Along with the include attribute, we can also use the exclude attribute.
The Exclude attribute is basically used to render the content of the environment tag when
the hosting environment does not match the environment specified in the exclude attribute.
The following example loads the minified CSS file from the CDN when the application
environment is not in Development.

Let’s break down the attributes of the Bootstrap CDN:

 href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css”: This attribute specifies the URL of the linked document.
In this case, it’s pointing to a minified CSS file for Bootstrap version 5.3.0
hosted on the jsDelivr CDN (Content Delivery Network). The min in the
filename indicates that it’s a minified version, which means all unnecessary
characters like whitespace and comments have been removed to reduce the
file size.
 rel=”stylesheet”: This attribute specifies the relationship between the current
document and the linked document. The value “stylesheet” indicates that the
linked document is a CSS file and should be treated as a stylesheet.
 integrity=”sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK
6FUUVM”: This attribute provides a way to allow browsers to verify the
fetched resource’s integrity. The value is a base64-encoded cryptographic
hash (in this case, SHA-384) of the resource’s contents. When the browser
downloads the file from the CDN, it regenerates the hash and compares the
regenerated hash value against the integrity attribute hash value. If both the
hash values match, then only the browser allows the file to be downloaded;
otherwise, it is blocked. This is a security feature that ensures the resource
hasn’t been tampered with.
 crossorigin=”anonymous”: This attribute is used in conjunction with the
CORS (Cross-Origin Resource Sharing) headers of the requested resource. It
allows the browser to make cross-origin requests to the jsDelivr CDN without
sending credentials like cookies or HTTP authentication. The value
“anonymous” means that no user credentials are included in the request to
the CDN. This attribute is necessary for the integrity attribute to work properly
when requesting resources from a different origin.
What if the CDN is Down?
If the CDN is down or, for some reason, our application cannot reach the CDN, then we
want our application to fall back and load the minified bootstrap file (bootstrap.min.css)
from our server. For a better understanding, please have a look at the following code.
 436

Explanation of the above Code:

If the environment is “Development,” we load the non-minified bootstrap CSS file (e.g.,
bootstrap.css) from our server. If the application environment is other than
“Development,” we try to load the minified bootstrap CSS file (e.g.,
bootstrap.min.css) from the CDN.
At the same time, we have also specified a fallback source using the asp-fallback-
href attribute. This attribute is used when the CDN is down or, for some reason, if our
application cannot reach the CDN. In that case, our application returns and downloads the
minified bootstrap file (i.e., bootstrap.min.css) from our server.
 asp-fallback-href=”~/lib/twitter-bootstrap/css/bootstrap.min.css”: This
attribute specifies the path to a local copy of the resource to use as a fallback.
This attribute is essential for ensuring that your web application can still use
Bootstrap even if the CDN is down or inaccessible. The value ~/lib/twitter-
bootstrap/css/bootstrap.min.css is the local path within your ASP.NET Core
web application where a copy of the Bootstrap CSS file is stored. The tilde ~
symbol represents the root of the web application. So, if the CDN fails to
deliver the Bootstrap CSS file, the application will instead load it from the
local path specified.
We use the following 3 attributes and their associated values to check whether the CDN is
down.
1. asp-fallback-test-class=”sr-only”
2. asp-fallback-test-property=”position”
3. asp-fallback-test-value=”absolute”
asp-fallback-test-class, asp-fallback-test-property, asp-fallback-test-value: These
attributes work together to test if the primary CSS file has loaded correctly. ASP.NET Core
does this by attempting to apply a style rule (defined by these attributes) and checking if it
takes effect. If not, it concludes that the primary resource failed to load and applies the
fallback.
asp-suppress-fallback-integrity=”true”: Indicates whether to skip the integrity check for
the fallback resource. When set to true, this attribute means that the integrity check (similar
to the integrity attribute for external resources) will not be performed on the fallback
 437

resource. This is useful when you have complete control over the fallback content and are
less concerned about its integrity being compromised (e.g., hosted on your own server).
Modifying the _Layout.cshtml file:
Please modify the _Layout.cshtml file as shown below. Here, we are loading the
bootstrap.css files based on the application environment. We also specify the fallback path
if the environment is other than Development and the CDN is down. If the Environment is
Development, it will load the non-minified bootstrap.css file from our server. If the
Environment is other than Development, first, it will try to load the minified bootstrap.min.css
file from CDN, and if the CDN is down, it will load the minified bootstrap.min.css file from
our server.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<environment include="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" />
</environment>
</head>
<body>
<div class="container">
@RenderBody()
</div>
</body>
 438

</html>
Modifying Home Controller:
Next, modify the Home Controller as shown below. Here, we are simply creating one action
method.
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
}
}
Modifying Index.cshtml View:
Next, modify the Index.cshtml view as follows.
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Index View</h1>
Run the application and view the page source code; you should see the following.
 439

As you can see in the above image, the boostrap.css file is loaded from our server, i.e.,
from wwwroot folder of our application. This makes sense because we have set the
application environment as Development in the launchsettings.json file. Let us change the
environment to Staging and see whether or not it loads the minified version of the Bootstrap
file from CDN.
Modify the Environment as Staging:
Open the launchsettings.json file and modify
the ASPNETCORE_ENVIRONMENT variable value to staging, as shown below. We are
making changes for both IIS Express and Kestrel Web Server.

With the above changes in place, run the application and view the page source code. It
should now show the bootsrap.css file being downloaded from the CDN, as shown below.
 440

Making the CDN Down:

Let’s intentionally change the CDN’s integrity value to ensure that if the CDN fails, it loads
the minified bootstrap.css file from our local server. To do this, add some random value to
the end of the integrity attribute of the CDN link. Modify the _Layout.cshtml file as shown
below, and add abcdef at the end of the integrity property value of the link attribute.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<environment include="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVMabcdef
"
crossorigin="anonymous"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
 441

asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" />
</environment>
</head>
<body>
<div class="container">
@RenderBody()
</div>
</body>
</html>
With the above changes in place, run the application. To confirm whether it is loading
Bootstrap from the local server, open the Developer Browser Tool by pressing the F12 key,
navigate to the Network, and refresh the page. You should see there are two requests
for bootstrap.min.css. This is because the first request is made for CDN, and it gets a 200
success response from CDN, but while matching the integrity value, it failed, and hence it
again makes a call to the local server to download the bootstrap.min.css file, which is
shown in the below image.

The Environment Tag Helper in ASP.NET Core MVC is a built-in Tag Helper that allows you
to conditionally render content in your Razor views based on the current hosting
environment. This Tag Helper is useful when displaying different content or applying
different behaviors depending on whether your application runs in a development, staging,
or production environment.

Navigation-Menus in ASP.NET Core MVC Application

 442

In this article, I will discuss How to Create Responsive Navigation-Menus in ASP.NET

Core MVC Applications using Bootstrap and jQuery. Please read our previous article
discussing the Environment Tag Helper in ASP.NET Core MVC Web Application.
Responsive Navigation-Menus in ASP.NET Core MVC
Creating responsive navigation menus in ASP.NET Core MVC involves using CSS and
JavaScript alongside your Razor views. In this article, I will show you how to implement a
responsive navigation menu adaptable to various screen sizes using Bootstrap, which is a
popular framework for building responsive websites. ASP.NET Core MVC projects created
with the web application template include Bootstrap by default.
Business Requirement:
When we open our web application on large-screen devices like desktops and tablets, we
want the navigation menus to look like the image below. Here, you can see the menus List,
Create, About, and Contact, which are visible.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:23 / 03:1110 Sec
But when we open our website on a small screen device like a mobile, we want to show the
navigation menus like the one below. Here, you can see the menus List, Create, About, and
Contact are not visible; instead, the hamburger menu (three horizontal lines) is visible, and
once we click on the three horizontal lines, it will display all the menus.
 443

Let us Proceed and see How we can Implement the above using the ASP.NET Core MVC
Application.
Creating a New ASP.NET Core MVC Application:
First, we create a new ASP.NET Core Application using the Model-View-Controller Project
Template named FirstCoreMVCApplication. Once we create the project, we must add the
required Bootstrap and jQuery files.
Adding Bootstrap and jQuery files:
The most important point you need to remember is that Bootstrap depends on jQuery. So,
we need to download both Bootstrap and jQuery into our application. Here, we will use a
tool called Library Manager (LibMan) to download the required Bootstrap and jQuery files.
So, please follow the steps below to install Bootstrap for your application.
1. Right-click on the “Project Name” in the Solution Explorer and then
select Add > Client-Side Library, which will open the “Add Client-Side
Library” Window.
2. Leave the default provider as it is, which is “cdnjs” in this case. The other
providers are filesystem, jsdelivr, and unpkg.
3. In the “Library” text box, type “twitter-bootstrap“. You can also get
intelligence support once you start typing. Once you select the matching
entry, it tries installing the latest Bootstrap version. Here, we are installing the
latest version of Bootstrap, i.e. ([email protected]) at this point. While
you are reading this article, the latest version might be updated.
4. There are two radio buttons to select whether to include “All library files” or
“Choose Specific files“. Here, I am selecting the “All library files” radio
button.
5. In the “Target Location” text box, specify the folder location where you want
the library files to be installed. By default, the static files are only served from
 444

the wwwroot folder. I am going with the default location, i.e.,

“wwwroot/lib/twitter-bootstrap/”.
6. Finally, click the “Install” button, as shown in the image below.

Once it is successfully installed, you will find two things: the libman.json
file and the required bootstrap files, as shown in the image below.
 445

In the same way, you can install jQuery using Libary Manager. The other option to install
the jQuery file is to open the libman.json file and then copy and paste the following code
into it.
{

"version": "1.0",

"defaultProvider": "cdnjs",

"libraries": [

"library": "[email protected]",

"destination": "wwwroot/lib/twitter-bootstrap/"

},
 446

"provider": "cdnjs",

"library": "[email protected]",

"destination": "wwwroot/lib/jquery/"

}
As you can see in the above code, here we are adding [email protected]. It will automatically
install the required jQuery files inside the lib folder.
Adding images Folder inside the wwwroot folder:
Add a folder called images with the wwwroot folder and then paste two different images
with the names Logo.png and Student.png, as shown in the image below.

Adding Custom CSS:

By default, the ASP.NET Core Model-View-Controller template creates a folder with the
name CSS within the wwwroot folder. If not added, then please add a folder with the
name CSS within the wwwroot folder and then add a CSS file with the
name MyCustomStyleSheet.css. Once you create the MyCustomStyleSheet.css file,
copy and paste the following code.
.btn {

width: 80px;

}
With the above changes in place, your wwwroot folder should look as shown below.
 447

Modifying _ViewImports.cshtml file:

Please modify the _ViewImports.cshtml file as shown below. We are adding the HTML
Tag Helper here to use the Tag Helper throughout the application views. By default, you will
see the following code as well.
@using FirstCoreMVCApplication

@using FirstCoreMVCApplication.Models

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Modifying _Layout.cshtml file:
Use the Bootstrap Navbar component to create your navigation menu. Bootstrap’s Navbar
automatically becomes responsive and will toggle between a horizontal menu and a
hamburger menu on smaller screens.
Please modify the _Layout.cshtml file, which is present inside the Views => Shared folder,
as shown below. In the head section, we refer to the files MyCustomStyleSheet.css,
bootstrap.css, query.js, and bootstrap.js. The navbar-toggler button is a responsive
component that will appear on smaller screen sizes. When clicked, it toggles the visibility of
the navigation menu items.
<!DOCTYPE html>
 448

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

<link href="~/css/MyCustomStyleSheet.css" rel="stylesheet" />

<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />

<script src="~/lib/jquery/jquery.js"></script>

<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>

</head>

<body>

<div class="container">

<nav style="margin-top:15px" class="navbar navbar-expand-sm bg-dark navbar-dark">

<div class="container-fluid">

<a style="margin-left:5px" class="navbar-brand" asp-controller="home" asp-

action="index">

<img src="~/images/Logo.png" width="50" height="50">

</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-

target=".navbar-collapse" aria-controls="navbarSupportedContent"

aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">

<ul class="navbar-nav flex-grow-1">

 449

<li class="nav-item">

<a class="nav-link" asp-controller="home" asp-action="index">List</a>

</li>

<li class="nav-item">

<a class="nav-link" asp-controller="home" asp-action="create">Create</a>

</li>

<li>

<a class="nav-link" asp-controller="home" asp-action="about">About</a>

</li>

<li>

<a class="nav-link" asp-controller="home" asp-action="contact">Contact</a>

</li>

</ul>

</div>

</div>

</nav>

<div>

@RenderBody()

</div>

</div>

</body>

</html>
Explanation of the above Code:
Navigation Menu
<nav style="margin-top:15px" class="navbar navbar-expand-sm bg-dark navbar-dark">:
 450

A Bootstrap-styled navigation bar, dark-themed. It’s set to expand on small devices.

<a class="navbar-brand" asp-controller="home" asp-action="index">

<img src="~/images/Logo.png" width="50" height="50">

</a>
When clicked, a link that acts as the website’s brand logo navigates to the Home
Controller’s Index action. The ASP.NET Core MVC uses the asp-controller and asp-action
tags for routing.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target=".navbar-collapse" aria-controls="navbarSupportedContent"

aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>
This is a button for toggling the navigation bar on small screens. It uses Bootstrap’s
collapse plugin to control the visibility of the navigation links.
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
This section contains the navigation links. Due to the d-sm-inline-flex class, it collapses on
small screens and becomes horizontal on larger screens.
<ul class="navbar-nav flex-grow-1">

<li class="nav-item">

<a class="nav-link" asp-controller="home" asp-action="index">List</a>

</li>

<!-- Other nav items -->

</ul>
The list of navigation links. Each tag uses asp-controller and asp-action attributes for routing
to different application parts (e.g., List, Create, About, Contact).
Main Content Area
<div>

@RenderBody()

</div>
 451

@RenderBody() is a placeholder where the content of individual views that use this layout
will be rendered. Each page’s specific content will appear here.
Note: The jQuery reference must be loaded before loading the Bootstrap JavaScript file for
the navbar toggle button to work on a small-screen device. If you change the order,
the navbar toggle button does not work as expected.
Creating Models:
First, we need to create two enums to store the Gender and Branch of a student. So, create
two classes within the Models folder named Gender.cs and Branch.cs.
Branch.cs
Open the Branch.cs class file and copy and paste the following code. As you can see, we
have created the Branch enum with four named constants, i.e., None, CSE, ETC, and
Mech.
namespace FirstCoreMVCApplication.Models

public enum Branch

None,

CSE,

ETC,

Mech

}
Gender.cs
Next, open the Gender.cs class file and copy and paste the following code. As you can
see, we have created the Gender enum with two named constants, i.e., Male and Female.
namespace FirstCoreMVCApplication.Models

public enum Gender

Male,

Female
 452

}
Student Model:
We want to display the student information on the web page. So, create a class file
named Student.cs within the Models folder and copy and paste the following code.
using System.Collections.Generic;

namespace FirstCoreMVCApplication.Models

public class Student

public int StudentId { get; set; }

public string? Name { get; set; }

public string? Email { get; set; }

public Branch? Branch { get; set; }

public Gender? Gender { get; set; }

public string? Address { get; set; }

}
Modifying Home Controller:
Next, modify the Home Controller as shown below. As you can see in the code below, we
have added two action methods. The Index action method will return all the students, while
the Details action takes the student ID and returns that student’s information.
using FirstCoreMVCApplication.Models;

using System.Collections.Generic;

using System.Linq;

using Microsoft.AspNetCore.Mvc;

namespace FirstCoreMVCApplication.Controllers
 453

public class HomeController : Controller

//Create a Variable to Hold List of Students

//This is going to be our data source

private List<Student> listStudents = new List<Student>();

public HomeController()

//Within the Constructor we are Initializing listStudents variable

//In Real-Time, we will get the data from the database

listStudents = new List<Student>()

new Student() { StudentId = 101, Name = "James", Branch = Branch.CSE, Gender =

Gender.Male, Address = "A1-2018", Email = "[email protected]" },

new Student() { StudentId = 102, Name = "Priyanka", Branch = Branch.ETC, Gender =

Gender.Female, Address = "A1-2019", Email = "[email protected]" },

new Student() { StudentId = 103, Name = "David", Branch = Branch.CSE, Gender =

Gender.Male, Address = "A1-2020", Email = "[email protected]" },

new Student() { StudentId = 104, Name = "Pranaya", Branch = Branch.Mech, Gender =

Gender.Male, Address = "A1-2021", Email = "[email protected]" }

};

public ViewResult Index()

//returning all the students

 454

return View(listStudents);

public ViewResult Details(int Id)

//returning the student based on the Student Id

var studentDetails = listStudents.FirstOrDefault(std => std.StudentId == Id);

return View(studentDetails);

}
Modifying Index.cshtml file:
Please modify the Index view, which is present inside the Home folder, as shown below.
Notice how the buttons (View, Edit, and Delete) are attached to each other. Use the
Bootstrap margin classes (m-1, m-2, etc.) to include the margin between these buttons. In
the class name, “m” stands for margin, and the numbers 1, 2, 3, etc., are the size of the
space you want between the buttons. In this view, List<Student> is the model, and using a
for each loop, we are accessing all the students. Further, if you notice, we have used Tag
Helper to generate the link for the View button.

@model List<Student>

@{

ViewBag.Title = "Student List";

Layout = "~/Views/Shared/_Layout.cshtml";

<div class="row">

@foreach (var student in Model)

<div class="col-sm-3">
 455

<div class="card m-3">

<div class="card-header">

<h3>@student.Name</h3>

</div>

<div class="card-body">

<img class="card-img-top" src="~/images/Student.png" />

</div>

<div class="card-footer text-center">

<a asp-controller="home" asp-action="details"

asp-route-id="@student.StudentId" class="btn btn-primary m-1">View</a>

<a href="#" class="btn btn-primary m-1">Edit</a>

<a href="#" class="btn btn-danger m-1">Delete</a>

</div>

</div>

</div>

</div>
Creating Detail.cshtml file:
Please create a view named Details.cshtml within the Views/Home folder and copy and
paste the following code into it. In this view, the Student will be the model, and we can
access the student model properties using the @Model object.
@model Student

@{

ViewBag.Title = "Student Details";

Layout = "~/Views/Shared/_Layout.cshtml";

}
 456

<div class="row justify-content-center m-3">

<div class="col-sm-8">

<div class="card">

<div class="card-header">

<h1>@Model?.Name</h1>

</div>

<div class="card-body text-center">

<img class="card-img-top" src="~/images/Student.png" />

<h4>Studnet ID : @Model?.StudentId</h4>

<h4>Email : @Model?.Email</h4>

<h4>Branch : @Model?.Branch</h4>

<h4>Gender : @Model?.Gender</h4>

<h4>Address : @Model?.Address</h4>

</div>

<div class="card-footer text-center">

<a href="#" class="btn btn-primary">Back</a>

<a href="#" class="btn btn-primary">Edit</a>

<a href="#" class="btn btn-danger">Delete</a>

</div>

</div>

</div>

</div>
Program.cs Class:
Please modify the Program class code as follows. Actually, we are not making any changes
in the Main method of the Program class as we have created the Project using Model-View-
 457

Controller, which by default includes all the required MVC services and middleware in the
request processing pipeline.
namespace FirstCoreMVCApplication

public class Program

public static void Main(string[] args)

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())

app.UseExceptionHandler("/Home/Error");

// The default HSTS value is 30 days. You may want to change this for production scenarios,
see https://aka.ms/aspnetcore-hsts.

app.UseHsts();

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
 458

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

}
Now, run your application and resize the browser window, or use a mobile device to see the
responsive navigation menu in action. On smaller screens, the menu items should collapse
into a hamburger menu (three horizontal lines). When you click the hamburger menu, it will
show the menu items in a dropdown fashion.

Form Tag Helpers in ASP.NET Core MVC

In this article, I will discuss the Form Tag Helpers in ASP.NET Core MVC Application with
Examples. Please read our previous article discussing Responsive Navigation Menus in
ASP.NET Core Applications. In this article, I will discuss creating a Form in ASP.NET Core
Application using the Form Tag Helpers. We will work with the same example we created in
our previous article.
What are the Tag Helpers used to Create a Form in ASP.NET Core MVC?
Tag Helpers in ASP.NET Core MVC make binding and generating HTML elements in Razor
views easier. ASP.NET Core MVC Framework provides several Tag Helpers to simplify
form generation, binding, and validation when creating forms. At the end of this article, we
will create a form using Tag Helpers, as shown below. The following form is used to create
a Student.
 459

Form Tag Helper in ASP.NET Core:

<form>: Used to generate a form element.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:34 / 03:1110 Sec
 asp-action: Specifies the action method to be called on form submission.
 asp-controller: Specifies the controller that contains the action method.
 asp-route: Used for additional route values.
 asp-antiforgery: Automatically includes anti-forgery tokens if set to true
(default is true).
To create a Form in ASP.NET Core MVC View, we need to use the <form> tag helper. The
syntax for using the Form Tag Helper is shown below. The <form> tag helper binds to the
<form> HTML element. We can specify which action and controller the form should submit
to using the asp-action and asp-controller attributes.
<form asp-controller="Home" asp-action="Create" method="post">
</form>
As you can see in the above code, we are using the asp-controller and asp-action attributes
within the Form Tag Helper. These two tag attributes specify the controller and the action
method to submit the form data. The method attribute specifies whether it is a Get or Post
 460

Request. When the form is submitted, we want to issue a post request, so we set the
method type to post. If you want to submit the data to an action method of HTTP Get type,
you need to specify the method type as Get.
Note: If you didn’t specify the controller and action name using the asp-controller and asp-
action tag helpers, then by default, when the form is submitted, it will invoke the same
action method of the controller that rendered the form.
Input Tag Helper in ASP.NET Core MVC:
<input>: Generates input elements and automatically binds them to model properties
 asp-for: Specifies the model property to which the input is bound.
 asp-isrequired: Adds the required attribute if the model indicates the
required field.
The input tag helpers bind to the <input> HTML element. These are versatile and generate
different input types based on your model attributes. This helps to automate the generation
of id, name, and value attributes based on model property conventions, facilitates validation,
and provides enhanced Razor syntax highlighting and IntelliSense support. The type of
input generated is inferred from the model property’s type. For instance:
 string maps to type=”text”
 bool maps to type=”checkbox”
 DateTime or DateTime? maps to type=”datetime-local”
Here, we want a form to create a new Student. So, the model for our view is Student class,
and we can specify the model using the following directive.
@model Student
We want to display a text box in our form to capture the student’s name. We also want that
text box to bind with the Name property of the Student model class. This can be done easily
using the asp-for Tag helper, as shown below.
<input asp-for="Name" class="form-control">
As you can see here, we set the value for the asp-for tag helper to the Name property of
the Student model class. You will also get IntelliSense support while setting the value
property. Later, if you change the property name from Name to StudnetName on the
Student class and do not change the value assigned to the tag helper, you will get a
compiler error.
The above input tag helper generates an input element with id and name attributes. Both
the ID and name are set to a value such as Name, as shown below.
<input type="text" id="Name" name="Name" value="" class="form-control">
Label Tag Helper in ASP.NET Core MVC:
<label>: Automatically generates labels associated with model properties. It helps in
generating correct for attributes linking the label to the respective input.
 asp-for: Specifies which model property this label is for.
Using the asp-for attribute, the <label> tag helper can generate a label for an associated
input element. The Label Tag Helper in ASP.NET Core generates a label. The “asp-for”
attribute links the label with its corresponding input element. For example,
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control">
The above code generates the following HTML.
 461

<label for="Name">Name</label>
<input type="text" id="Name" name="Name" value="" class="form-control">
Here, the label is linked with the input element. This is because the label for the attribute
and the input element id attribute have the same value (i.e., Name). That means the
corresponding input element will receive the focus when we click on the label.
TextArea Tag Helper in ASP.NET Core MVC:
The <textarea> tag helper functions similarly to the input tag helper and binds to the
<textarea> HTML element. But here, it specifically targets the Textarea element instead of
the input element. The textarea tag helper adds the asp-for tag helper attribute to a text
area element. For example, let’s say our Student model has a property to store the address,
then for address property, we can use textarea tag helper as shown below.
<textarea asp-for="Address" class="form-control"></textarea>
The text area tag helper will generate Name and Id properties based on the Property Name
specified in the asp-for attribute. If you want to display the textarea with a specified number
of rows and cols, you need to use the following attributes.
<textarea asp-for="Address" rows="4" cols="30" class="form-control"></textarea>
Checkbox tag helper in ASP.NET Core MVC:
In ASP.NET Core MVC, you can use the input tag helper to create checkboxes. Suppose
we have a model class named Student with a property IsRegular of boolean type indicating
whether the student is a regular student or not. To create a checkbox for the IsRegular
property, we would use the input tag helper as follows:
<label>
<input asp-for="IsRegular" type="checkbox" /> Is Regular Student
</label>
The asp-for attribute binds the checkbox to the IsRegular property. When the form is
submitted, the value of the checkbox (either true or false) will be bound to the IsRegular
property of the model. By default, if the value of IsRegular Property in the model is true, the
checkbox will be rendered as checked. Otherwise, it will be unchecked.
Select Tag Helper in ASP.NET Core MVC:
<select>: Generates drop-down lists bound to model properties.
 asp-for: Specifies the model property to bind the select to.
 asp-items: Specifies the options for the dropdown list.
The Select Tag helper in ASP.NET Core generates a select tag with associated option
elements. Let us assume the following Branches Property hold the list of all branches.
public List<SelectListItem> Branches{ get; set; }
In our example, we want a dropdown list to display the list of Branches. We also want a
label that should be linked with the select element. The following code does the same.
<label for="Branch">Branch</label>
<select asp-for="Branch" asp-items="Model.Branches"></select>
 462

The options for the branch select element can be hard-coded like in the example below, or
they can also come from an enum or a database table. In our example, we will use an enum
for the select options.
<label for="Branch">Branch</label>
<select id="Branch" name="Branch">
<option value="0">None</option>
<option value="1">CSE</option>
<option value="2">ETC</option>
<option value="3">Mech</option>
</select>
Radio Button Tag Helper in ASP.NET Core MVC:
The radio button control is designed to support selecting only one of a mutually exclusive
set of predefined options. In ASP.NET Core MVC, the radio button tag helper can be used
to generate <input type=”radio”> elements that bind to model properties. This is
particularly helpful for scenarios where you want to provide multiple options but allow only
one selection.
Let’s consider an example to illustrate the use of the radio button tag helper. Assume we
have a model property Gender with possible values “Male,” “Female,” and “Other.” Let us
assume we have a property called Gender in our model to hold the Gender value. In our
Razor view, we can use the tag helper to bind radio buttons to the Gender property as
follows.
<input asp-for="Gender" type="radio" value="Male" id="male" />
<label for="male">Male</label>
<input asp-for="Gender" type="radio" value="Female" id="female" />
<label for="female">Female</label>
<input asp-for="Gender" type="radio" value="Other" id="other" />
<label for="other">Other</label>
Here, the asp-for attribute is set to the model property (Gender in this case). Each radio
button has a different value attribute, representing each possible value for the Gender
property. The id attribute binds the <label> elements to the respective radio buttons. When
the form is submitted, the Gender property of the model will be populated with the value of
the selected radio button, thanks to the model binding.
Validation Tag Helpers in ASP.NET Core MVC:
<span>: Displays validation messages.
 asp-validation-for: Specifies the model property for which the validation
message is displayed.
 asp-validation-summary: Specifies the validation summary display mode
(All, ModelOnly, or None).
Syntax: <span asp-validation-for=”Email” class=”text-danger”></span>
Generating Hidden Inputs
To generate a hidden input field:
 463

<input asp-for="Id" type="hidden" />

This is often used to pass IDs, or other data users should not see or edit.
Setting Placeholder, Autocomplete, and Other Attributes
Just like regular HTML attributes, you can set attributes like placeholder, autocomplete, etc:
<input asp-for="Email" placeholder="Enter your email" autocomplete="off" class="form-
control" />
Form Action Tag Helpers:
<button asp-action=”…”>: Generates a button that submits the form to a specific action.
<button asp-action="Submit" class="btn btn-primary">Submit</button>
<a asp-action=”…”>: Generates an anchor tag that links to a specific action. Useful for
cancel buttons or navigation links within forms.
<a asp-action="Index" class="btn btn-secondary">Cancel</a>
Creating the Form using Form Tag Helpers in ASP.NET Core MVC:
First, we need to create the required models as follows:
Gender.cs:
Create a class file named Gender.cs, then copy and paste the following code. This is going
to be an enum which will represent the gender-named constants.
namespace FirstCoreMVCApplication.Models
{
public enum Gender
{
Male,
Female
}
}
Branch.cs
Create a class file named Branch.cs and copy and paste the following code into it. This is
going to be an enum which will represent the branches named constants.
namespace FirstCoreMVCApplication.Models
{
public enum Branch
{
None,
CSE,
ETC,
 464

Mech
}
}
Student.cs
Create a class file with the name Student.cs and copy and paste the following code into it.
This will be a class that will hold the student data, and this will be our model.
namespace FirstCoreMVCApplication.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Email { get; set; }
public string? Password { get; set; }
public Branch? Branch { get; set; }
public Gender? Gender { get; set; }
public bool IsRegular { get; set; }
public string? Address { get; set; }
public DateTime DateOfBorth { get; set; }
}
}
Modifying Home Controller:
Next, modify the Home Controller as follows. Here, we are adding the Create action
method.
using FirstCoreMVCApplication.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
namespace FirstCoreMVCApplication.Controllers
{
public class HomeController : Controller
{
//Create a Variable to Hold List of Students
//This is going to be our data source
private List<Student> listStudents = new List<Student>();
 465

public HomeController()
{
//Within the Constructor we are Initializing listStudents variable
//In Real-Time, we will get the data from the database
listStudents = new List<Student>()
{
new Student() { StudentId = 101, Name = "James", Branch = Branch.CSE, Gender =
Gender.Male, Address = "A1-2018", Email = "[email protected]" },
new Student() { StudentId = 102, Name = "Priyanka", Branch = Branch.ETC, Gender =
Gender.Female, Address = "A1-2019", Email = "[email protected]" },
new Student() { StudentId = 103, Name = "David", Branch = Branch.CSE, Gender =
Gender.Male, Address = "A1-2020", Email = "[email protected]" },
new Student() { StudentId = 104, Name = "Pranaya", Branch = Branch.Mech, Gender =
Gender.Male, Address = "A1-2021", Email = "[email protected]" }
};
}
public ViewResult Index()
{
//returning all the students
return View(listStudents);
}
public ViewResult Details(int Id)
{
//returning the student based on the Student Id
var studentDetails = listStudents.FirstOrDefault(std => std.StudentId == Id);
return View(studentDetails);
}
[HttpGet]
public ViewResult Create()
{
ViewBag.AllGenders = Enum.GetValues(typeof(Gender)).Cast<Gender>().ToList();
ViewBag.AllBranches = new List<SelectListItem>()
{
 466

new SelectListItem { Text = "None", Value = "1" },

new SelectListItem { Text = "CSE", Value = "2" },
new SelectListItem { Text = "ETC", Value = "3" },
new SelectListItem { Text = "Mech", Value = "4" }
};
return View();
}
}
}
Creating the Create View:
Now add a view named Create.cshtml to the Home folder of your application. Once you
add the Create.cshtml view, copy and paste the following code.
@model FirstCoreMVCApplication.Models.Student
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
var Branches = ViewBag.AllBranches as List<Branch>;
}
<div>
<form asp-controller="Home" asp-action="Create" method="post" class="mt-3">
<div style="margin-top:7px" class="form-group row">
<label asp-for="Name" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Name" class="form-control" placeholder="Enter Your Name">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Email" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Email" class="form-control" placeholder="Enter Your Email Id">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Password" class="col-sm-2 col-form-label"></label>
 467

<div class="col-sm-10">
<input asp-for="Password" class="form-control" placeholder="Enter Your Password">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Branch" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<select asp-for="Branch" class="custom-select mr-sm-2"
asp-items="Html.GetEnumSelectList<Branch>()"></select>
@*<select asp-for="Branch" asp-items="ViewBag.AllBranches"></select>*@
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="IsRegular" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="checkbox" class="custom-control-input" asp-for="IsRegular">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="DateOfBorth" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="DateOfBorth" class="form-control">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Gender" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
@foreach (var gender in ViewBag.AllGenders)
{
<label class="radio-inline">
<input type="radio" asp-for="Gender" value="@gender" id="Gender@(gender)"
/>@gender<br />
</label>
 468

}
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Address" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<textarea asp-for="Address" class="form-control" placeholder="Enter Your
Address"></textarea>
</div>
</div>
<div style="margin-top:10px" class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Create</button>
</div>
</div>
</form>
</div>
Modifying Layout View:
If you are coming directly to this article without reading our previous article, then please
modify the _Layout.cshtml view as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/css/MyCustomStyleSheet.css" rel="stylesheet" />
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<nav style="margin-top:15px" class="navbar navbar-expand-sm bg-dark navbar-dark">
 469

<a style="margin-left:5px" class="navbar-brand" asp-controller="home" asp-

action="index">
<img src="~/images/Logo.png" width="50" height="50">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" asp-controller="home" asp-action="index">List</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="home" asp-action="create">Create</a>
</li>
<li>
<a class="nav-link" asp-controller="home" asp-action="about">About</a>
</li>
<li>
<a class="nav-link" asp-controller="home" asp-action="contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div>
@RenderBody()
</div>
</div>
</body>
</html>
Now, run the application and click on the Create Menu, and you should see the required
view as expected. Form tag helpers in ASP.NET Core MVC provide a more concise way to
 470

bind form elements to model properties, manage validation, and handle form submissions,
making the Razor views cleaner and more maintainable.

Partial Tag Helper in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals
Partial Tag Helper in ASP.NET Core MVC
In this article, I will discuss the Partial Tag Helper in ASP.NET Core MVC
Application with Examples. Please read our previous article discussing Form Tag Helpers
in ASP.NET Core MVC Application.
What is Partial Tag Helper in ASP.NET Core MVC
The Partial Tag Helper in ASP.NET Core MVC is a built-in Tag Helper that enables
developers to render partial views directly within Razor views in a more HTML-like syntax. A
partial view in ASP.NET Core MVC is a Razor markup file (.cshtml) that contains a segment
of HTML content that can be used for rendering within other views, promoting code reuse
and modular design.
This feature can help break down complex views into simpler, reusable components. Partial
views are similar to regular views but intended to render a portion of the HTML content that
can be reused across different views.
Syntax:
Here’s how you can use the Partial Tag Helper:

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec

<partial name="PartialViewName" />

Here, the name specifies the partial view to render
How Do We Use Partial Tag Helper in ASP.NET Core MVC?
To use the Partial Tag Helper in ASP.NET Core MVC, follow these steps:
Ensure Tag Helpers Are Registered:
First, ensure you are registered Tag Helpers in the _ViewImports.cshtml file. This file
typically resides in your project’s Views folder. If you haven’t done this yet, add the following
line:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Create a Partial View:
Let’s say you want to create a reusable navigation menu. Create a file
named _NavigationMenu.cshtml in the Views/Shared directory. This will be your partial
view. Once you create the _NavigationMenu.cshtml Partial View, then copy and paste the
following code into it:
<nav>

<ul>
 471

<li><a href="/Home">Home</a></li>

<li><a href="/About">About</a></li>

<li><a href="/Contact">Contact</a></li>

</ul>

</nav>
Using Partial Tag Helper in ASP.NET Core MVC:
Now, in any of your primary views or layouts where you wish to include this navigation
menu, you can use the Partial Tag Helper as follows:
<partial name="_NavigationMenu" />
Additional Attributes of Partial Tag Hellper:
model: The model you want to pass to the partial view. It’s optional. If your partial view
expects a model, you can pass it using the model attribute:
<partial name="_PartialViewName" model="YourModelInstance" />
view-data: Any additional view data you want to pass to the partial view.
<partial name="_PartialViewName" view-data="ViewDataDictionaryInstance" />
fallback-name: The name of the partial view that will be used if the specified partial view in
the name isn’t found.
<partial name="_PartialViewName" fallback-name="_FallbackPartialViewName" />
fallback-view-data: The view data passed to the fallback partial view if it’s used.
<partial name="_PartialViewName" fallback-view-
data="FallbackViewDataDictionaryInstance" />
render-mode: Defines whether the partial view should be rendered synchronously (Server)
or asynchronously (ServerPrerendered). By default, it is ServerPrerendered, i.e., rendering
asynchronously.
<partial name="_PartialViewName" render-mode="ServerPrerendered" />
Here, render-mode can be one of the following:
 Server (default): Renders the partial view synchronously.
 ServerPrerendered: Renders the partial view asynchronously.
By following these steps, you can efficiently use the Partial Tag Helper in your ASP.NET
Core MVC project to render partial views, making your views more modular and your code
reusable.
Partial Tag Helper Real-Time Example in ASP.NET Core MVC:
Let’s understand the usage of the built-in Partial Tag Helper in an ASP.NET Core MVC
Application with an example. Imagine you are building a web application that displays blog
posts. Each blog post has a comment section. To modularize the views, you have decided
 472

to put the comments section into a partial view. Let’s understand how we can implement
this using the Partial Tag Helper.
Creating Models:
We are going to use the following BlogPost and Comment models:
Comment.cs
Create a class file with the name Comment.cs within the Models folder, and then copy and
paste the following code into it.
namespace TagHelpersDemo.Models

public class Comment

public string? Email { get; set; }

public string? Name { get; set; }

public string? Text { get; set; }

}
BlogPost.cs
Create a class file named BlogPost.cs within the Models folder, then copy and paste the
following code into it.
namespace TagHelpersDemo.Models

public class BlogPost

public int Id { get; set; }

public string? Author { get; set; }

public string? Title { get; set; }

public string? Content { get; set; }

public List<Comment>? Comments { get; set; }

 473

}
Creating Partial View:
Create a partial view named _Comments.cshtml in the Views/Shared folder and then
copy and paste the following code into it.
@model List<Comment>

<div>

@foreach (var comment in Model)

<div class="comment">

<strong>@comment.Name - @comment.Email</strong>: @comment.Text

</div>

</div>
Modifying Controller:
Next, modify the HomeController as follows. As you can see, the Index Action method
returns the BlogPost view:
using Microsoft.AspNetCore.Mvc;

using TagHelpersDemo.Models;

namespace TagHelpersDemo.Controllers

public class HomeController : Controller

public IActionResult BlogPost(int id = 1000)

//In Real-Time, you will get the data from the database

//Here, we have hard coded the data

 474

var post = new BlogPost

Id = id,

Title = "What is ASP.NET Core",

Author = "Pranaya Rout",

Content = "ASP.NET Core (.NET) is a free, open-source, and cloud-optimized framework

that can run on Windows, Linux, or macOS.",

Comments = new List<Comment>

new Comment { Name = "James", Email = "[email protected]", Text = "Great post!" },

new Comment { Name = "Kumar", Email = "[email protected]", Text = "Thanks for

sharing." },

new Comment { Name = "Rout", Email = "[email protected]", Text = "Appreciate your

work..." }

};

return View(post);

}
Creating Main View (BlogPost.cshtm):
Create a new View with the name BlogPost.cshtml within the Views => Home folder, and
copy and paste the following code. In the main view where we want to display the blog post,
we can use the Partial Tag Helper to display the comments.
@model BlogPost

@{
 475

ViewData["Title"] = "BlogPost";

Layout = null;

<h3>Title: @Model.Title </h3>

<h3>Author: @Model.Author </h3>

<p>@Model.Content</p>

<!-- Embedding the partial view -->

<partial name="_Comments2" fallback-name="_NavigationMenu"

model="Model.Comments" render-mode="ServerPrerendered" />
Now, run the application and navigate to Home/BlogPost with the route value. You should
see the output as expected, as shown in the image below.

Real-Time Use Cases of Partial Tag Helper in ASP.NET Core MVC

Partial views are essentially segments of markup and code designed to be reusable across
different views. Here are some practical use cases for the Partial Tag Helper:
 Headers and Footers: For consistent presentation across your site.
 Navigation Menus: To maintain a consistent navigation structure.
 Sidebars: Displaying widgets or other consistent sidebar content.
 Reusable Form Segments: If you have parts of forms (like address entry
and user contact details) that appear in multiple forms.
 Captcha: Integration of CAPTCHA in multiple forms across the site.
 Pop-ups: For pop-ups, info dialogs, and confirmation boxes that could be
used in multiple places.
 Login/Logout Panel: A consistent way to display user login status across
pages.
 Feedback: Modules for users to leave feedback or rate items used in multiple
areas, such as product pages, blog posts, etc.
 476

Creating Custom Tag Helper in ASP.NET Core MVC

In this article, I will discuss Creating a Custom Tag Helper in the ASP.NET Core MVC
Application with Examples. Please read our previous article discussing Partial Tag Helper
in ASP.NET Core MVC Application.
Creating Custom Tag Helper in AS.NET Core MVC
Creating a custom Tag Helper in ASP.NET Core MVC allows you to extend the functionality
of your HTML tags, making it easier to incorporate server-side logic directly within your
views. This is useful for repetitive tasks, custom content generation, or when integrating
complex UI elements that require backend data interaction.
How Do We Create a Custom Tag Helper Class?
The Custom Tag Helper in ASP.NET Core MVC is nothing but a class that implements the
ITagHelper interface. However, ASP.NET Core MVC allows us to implement this interface
with the TagHelper class. It’s a three-step process as follows:
 Add a new class to your project
 Inherit from TagHelper class. You need to include the namespace
Microsoft.AspNetCore.Razor.TagHelpers.
 Override the Process or ProcessAsync method.
So, to create a Custom Tag Helper in ASP.NET Core MVC, the first step is to create a class
that inherits from the TagHelper class. This class provides a virtual method to generate
HTML tags. It contains synchronous (Process) and asynchronous (ProcessAsync)
implementation of the virtual method.

NextStayThe Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:35 / 03:1110 Sec
public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput
output);
public virtual void Process(TagHelperContext context, TagHelperOutput output);
Based on our requirements, we need to override either one or both. The Process (or
ProcessAsync) method is responsible for generating the HTML that the browser will render.
It receives context object, i.e., TagHelperContext instance and TagHelperOutput instance,
which we can use to read and change the content of our tag helper. If this is not clear at this
moment, don’t worry; we will try to understand this with examples.
Example to Understand Tag Helper in ASP.NET Core MVC:
First, create a folder named TagHelpers inside the project root directory. This is where we
will be creating our custom Tag Helpers.
In the next step, create a class file named MyCustomTagHelper inside the TagHelpers
folder. It is recommended that the proper naming convention be followed. The point you
need to remember is that the name of the Tag Helper should end with the suffix TagHelper.
Our newly created MyCustomTagHelper class should be derived from the TagHelper class,
which contains two virtual methods: Process and ProcessAsync. These methods are
responsible for rendering the output of our custom Tag Helper, and we would use them
according to our project’s requirements:
So, once you create the MyCustomTagHelper.cs class file, please copy and paste the
following code.
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace TagHelpersDemo.TagHelpers
 477

{
public class MyCustomTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
}
}
}
Parameters
TagHelperContext context: This parameter provides information about the environment in
which the Tag Helper is executed. It contains details about the attributes applied to the Tag
Helper element in the Razor view and other information about the surrounding context.
TagHelperOutput output: This parameter allows you to manipulate the HTML that will be
output by the Tag Helper. It gives you control over what gets rendered to the view from your
Tag Helper. TagHelperOutput has several important properties and methods:
 TagName: Gets or sets the HTML element’s tag name. Changing this value
can change the resulting tag or even remove it if set to null.
 Attributes: A collection to manage the attributes of the tag. You can add,
remove, or modify attributes.
 Content: Manages the inner HTML of the element. You can set content,
append content, or replace existing content.
Process Method Functionality
Within the Process method, we can use the output parameter to change the HTML output
based on the logic we write. This could involve changing the tag itself, modifying attributes,
or altering the inner content. The method does not return a value; instead, it directly
modifies the output instance to produce the desired output.
Now, let us set some of the properties using TagHelperOutput. Modify
the MyCustomTagHelper.cs class as follows. The following MyCustomTagHelper class is
designed to output HTML content that displays details about an employee.
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Text;
namespace TagHelpersDemo.TagHelpers
{
public class MyCustomTagHelper : TagHelper
{
// PascalCase gets translated into Camel-case.
// Can be passed via <my-custom employee-id="..." />.
public int EmployeeId { get; set; }
// Can be passed via <my-custom employee-name="..." />.
 478

public string? EmployeeName { get; set; }

// Can be passed via <my-custom designation="..." />.
public string? Designation { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
//TagName: The HTML element's tag name.
//A whitespace or null value results in no start or end tag being rendered.
output.TagName = "EmployeeSectionTagHelper"; // Set the HTML element name
//TagMode: Syntax of the element in the generated HTML.
//StartTagAndEndTag: Include both start and end tags.
output.TagMode = TagMode.StartTagAndEndTag;
//Create a String Builder Object to Hold the Employee Informations
var sb = new StringBuilder();
sb.AppendFormat($"<span>Employee Id:</span> <strong>{EmployeeId}</strong><br/>");
sb.AppendFormat($"<span>Employee Name:</span>
<strong>{EmployeeName}</strong><br/>");
sb.AppendFormat($"<span>Employee Designation:</span>
<strong>{Designation}</strong><br/>");
//Convert the StringBuilder Object to String Type and
//then set that string as the content either using SetContent and SetHtmlContent method
//Content: Get or set the HTML element's main content.
//SetHtmlContent: Sets the content.
//output.Content.SetHtmlContent(sb.ToString());
//output.Content.SetContent(sb.ToString());
output.Content.SetHtmlContent(sb.ToString());
}
}
}
Understanding the Process Method
The Process method is where the actual logic for what the Tag Helper does is defined. This
method manipulates the output based on the properties provided.
 output.TagName: Sets the HTML tag to EmployeeSectionTagHelper.
 output.TagMode: Sets how the tag is rendered.
TagMode.StartTagAndEndTag ensures that the output HTML will have both
 479

an opening and a closing tag, which is typical for content-containing

elements.
 StringBuilder: Used to construct the HTML content dynamically. It formats
strings to include the employee’s ID, name, and designation in a structured
format. Each employee attribute is wrapped within a <span> tag for the label
and a <strong> tag for the value, providing a semantic and possibly stylable
way to display the information.
 output.Content.SetHtmlContent(sb.ToString()): This line adds the
constructed HTML content to the output.Content. SetHtmlContent is used
instead of SetContent to ensure that the HTML tags in the StringBuilder are
rendered as HTML rather than plain text.
Adding addTagHelper to Views
In the next step, we need to add the addTagHelper directive to
the Views/_ViewImports.cshtml file to make the Custom Tag Helper available to all the
Razor views. We need to specify the Assembly Name (i.e., the Project name) where we
created the Custom Tag Helper. This can be done as follows:
@addTagHelper *, TagHelpersDemo
Here, TagHelpersDemo is the assembly name where we have created our custom Tag
Helper. So, with this Views/_ViewImports.cshtml file, it should look as follows.
@using TagHelpersDemo
@using TagHelpersDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, TagHelpersDemo
How Do We Use the Custom Tag Helper in ASP.NET Core MVC?
To use the custom Tag Helper in the Razor view, you need to write the Tag name in the
lower case as shown in the below code snippet:
<my-custom employee-id=”1001″ employee-name=”Pranaya Rout”
designation=”Manager”></my-custom>
As you can see, here we are using my-custom as an HTML Element and specifying the
EmployeeId, EmployeeName, and Designation attributes of this my-custom tag. Next,
modify the Home Controller as follows:
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Next, modify the Index.cshtml view method as follows:
 480

@{
ViewBag.Title = "Index";
Layout = null;
}
<my-custom employee-id="1001" employee-name="Pranaya Rout"
designation="Manager"></my-custom>
With the above changes, run the application, and you will get the following output.

If you inspect the generated HTML, you will see the following code generated.
<EmployeeSectionTagHelper>
<span>Employee Id:</span> <strong>1001</strong><br/>
<span>Employee Name:</span> <strong>Pranaya Rout</strong><br/>
<span>Employee Designation:</span> <strong>Manager</strong><br/>
</EmployeeSectionTagHelper>
Passing Model Data to a Custom Tag Helper
We can also use the model binding techniques to pass the model data to a custom Tag
Helper. In the following example, we will create three properties that take the given model
expressions: EmployeeId, EmployeeName, and Designation. So, create a class file
named Employee.cs within the Models folder and copy and paste the following code into it.
namespace TagHelpersDemo.Models
{
public class Employee
{
public int EmployeeId { get; set; }
public string? EmployeeName { get; set; }
public string? Designation { get; set; }
}
 481

}
Next, modify the Index action method of the Home Controller as follows:
using Microsoft.AspNetCore.Mvc;
using TagHelpersDemo.Models;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
Employee employee = new Employee()
{
EmployeeId = 1,
EmployeeName = "Pranaya",
Designation= "Manager"
};
return View(employee);
}
}
}
Next, modify the Index.cshtml view as follows:
@model Employee
@{
ViewBag.Title = "Index";
Layout = null;
}
<my-custom employee-id="@Model.EmployeeId" employee-
name="@Model.EmployeeName" designation="@Model.Designation"></my-custom>
We don’t need to make any changes in our MyCustomTagHelper class. With these changes
in place, run the application, and you will get the output as expected, as shown in the below
image.
 482

Now, run the application, and you should get the output as expected.
Another Way to Pass Model Data to Custom Tag Helper:
First, modify the MyCustomTagHelper class as follows:
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Text;
namespace TagHelpersDemo.TagHelpers
{
[HtmlTargetElement("employee-details")]
public class MyCustomTagHelper : TagHelper
{
[HtmlAttributeName("for-id")]
public int EmployeeId { get; set; }
[HtmlAttributeName("for-name")]
public string? EmployeeName { get; set; }
[HtmlAttributeName("for-designation")]
public string? Designation { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
//TagName: The HTML element's tag name.
//A whitespace or null value results in no start or end tag being rendered.
output.TagName = "EmployeeSectionTagHelper"; // Set the HTML element name
//TagMode: Syntax of the element in the generated HTML.
//StartTagAndEndTag: Include both start and end tags.
output.TagMode = TagMode.StartTagAndEndTag;
//Create a String Builder Object to Hold the Employee Informations
var sb = new StringBuilder();
sb.AppendFormat($"<span>Employee Id:</span> <strong>{EmployeeId}</strong><br/>");
 483

sb.AppendFormat($"<span>Employee Name:</span>
<strong>{EmployeeName}</strong><br/>");
sb.AppendFormat($"<span>Employee Designation:</span>
<strong>{Designation}</strong><br/>");
//Convert the StringBuilder Object to String Type and
//then set that string as the content either using SetContent and SetHtmlContent method
//Content: Get or set the HTML element's main content.
//SetHtmlContent: Sets the content.
//output.Content.SetHtmlContent(sb.ToString());
//output.Content.SetContent(sb.ToString());
output.Content.SetHtmlContent(sb.ToString());
}
}
}
Next, modify the Index.cshtml view as follows:
@model Employee
@{
ViewBag.Title = "Index";
Layout = null;
}
<employee-details for-id="@Model.EmployeeId" for-name="EmployeeName" for-
designation="Designation"></employee-details>
<br/><br/>
<employee-details for-id="@Model.EmployeeId" for-name="@Model.EmployeeName"
for-designation="@Model.Designation"></employee-details>
Custom Tag Helpers Real-Time Examples in ASP.NET Core MVC
As we already discussed, Custom Tag Helpers in ASP.NET Core MVC is a powerful way to
enhance the HTML rendering process by adding custom behavior or transformations to
specific tags or attributes. They enable server-side code to generate or manipulate HTML
elements in Razor views. Let’s look at a couple of real-time examples of Custom Tag
Helpers in ASP.NET Core MVC Applications:
Email Obfuscate Tag Helper
Imagine you want to protect email addresses on your site from being used by spambots.
Obfuscate meaning is to make something less clear and harder to understand, especially
intentionally. One approach is to obfuscate the email address in the HTML. We can create a
 484

Custom Tag Helper and Obfuscate the email address for this. So, create a class file
named EmailTagHelper.cs and copy and paste the following code into it.
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Net;
namespace TagHelpersDemo.Models
{
//We need to access this Custom tag using using the tag called email
[HtmlTargetElement("email")]
public class EmailTagHelper : TagHelper
{
private const string EmailDomain = "dotnettutorials.net";
// Can be passed via <email mail-to="..." />.
// PascalCase gets translated into kebab-case.
public string MailTo { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
// Change the tag name to <a>
// Replaces <email> with <a> tag
output.TagName = "a";
var address = MailTo + "@" + EmailDomain;
//Set the href attribute of the anchot tag as the email address
output.Attributes.SetAttribute("href", "mailto:" + address);
var obfuscatedEmail = "Email Us";
output.Content.SetContent(obfuscatedEmail);
}
}
}
Next, modify the Index.cshtml view as follows:
@{
ViewBag.Title = "Index";
Layout = null;
}
<email mail-to="info"></email>
Now, run the application and see the following in the browser.
 485

If you inspect the generated HTML, you will see that the following HTML code is generated
behind the scenes.
<a href="mailto:[email protected]">Email Us</a>
External Link Tag Helper
If you want to ensure that external links open in a new tab and are marked with a specific
CSS class, you can use Custom Tag Helper. So, create a class file
named ExternalLinkTagHelper.cs and then copy and paste the following code into it.
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace TagHelpersDemo.Models
{
[HtmlTargetElement("a", Attributes = "external-link")]
public class ExternalLinkTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.SetAttribute("target", "_blank");
//output.Attributes.SetAttribute("rel", "noopener noreferrer");
output.Attributes.Add("class", "external-link");
}
}
}
Next, modify the Index.cshtml file as follows.
@{
ViewBag.Title = "Index";
Layout = null;
}
<a href="https://dotnettutorials.net" external-link> Visit Dot Net Tutorials</a>
 486

View Component Tag Helper in ASP.NET Core MVC

In this article, I will discuss the View Component Tag Helper in ASP.NET Core
MVC Application with Examples. Please read our previous article discussing the Custom
Tag Helper in ASP.NET Core Applications.
View Component Tag Helper in ASP.NET Core MVC:
In ASP.NET Core MVC, View Components allow us to create reusable components with
their own logic and rendering capabilities, similar to partial views but much more powerful.
They can be invoked from views, and with the introduction of Tag Helpers for View
Components, it has become even simpler and more HTML-like to use them in Razor views.
View Component Tag Helpers allow you to invoke View Components using a tag-based
syntax that is more consistent with how other elements in Razor views are used. This Tag
Helper simplifies the process of including View Components in your pages and makes the
Razor syntax cleaner.
What are the View Components in ASP.NET Core MVC?
As we already discussed, View Component is a new feature introduced in ASP.NET Core
that enables displaying data (view + data) on a view file independently from the entire HTTP
Life Cycle. Please read the following article, where we discussed View Components in
detail.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:07 / 03:1110 Sec
https://dotnettutorials.net/lesson/view-components-in-asp-net-core-mvc/
As we already discussed in our View Component article, a view component consists of 2
files in ASP.NET Core. They are as follows:
 Server-Side File (.cs file).
 Client Side File (.cshtml file)
The Server-Side (.cs) File can be created anywhere in the project. However, we generally
create a new folder (with the name Components, ViewComponents) at the root level of the
project, and we need to place all the view components inside this new folder.
The Client-Side (.cshtml) file of a view component must be placed at a specific location.
They are as follows:
 Location1: If we want to call the view component from the controller’s action
method, then we need to add the view component client-side file at the
location: /Views/{Controller Name}/Components/{View Component
Name}/{View Name}
 Location2: If we want to call the view component from the other cshtml file,
then we need to add the view component client-side file at the
location: /Views/Shared/Components/{View Component Name}/{View
Name}
 Location3: If we are using a view component in Razor pages, then we need
to add the view component client-side file at the
location: /Pages/Shared/Components/{View Component Name}/{View
Name}
Note: The name for each view component file should be Default.cshtml.
Create a View Component:
First, create a folder named ViewComponents within the project root directory. Suppose
the name of the view component server-side file is MyComponent; then, we must add the
 487

suffix ViewComponent to it. Hence, the final name of the view component server-side file
will be MyComponentViewComponent.
The View Component class must and should be derived from the ViewComponent class.
This ViewComponent class provides methods for the logic and data preparation needed to
render the view component. So, create a class file with the
name MyComponentViewComponent.cs within the ViewComponents folder and copy
and paste the following code into it.
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.ViewComponents
{
public class MyComponentViewComponent : ViewComponent
{
public IViewComponentResult Invoke(string param)
{
// Logic or Data Retrieval
// Returns the Default view with the passed param
return View("Default", param);
}
}
}
View Component Client-Side File in ASP.NET Core MVC:
We are using ASP.NET Core MVC and want to invoke the view component from a view file.
Hence, we need to place the client-side file at the
location: Views/Shared/Components/MyComponent
Once you create the Default.cshtml view file within the above-specified folder, your Views
folder should look like the one shown below.

Now, open Default.cshtml view file and then copy and paste the following code into it.
@model string
<div>
This is the content of the View Component with parameter: @Model
</div>
 488

Create a Custom Tag Helper for the View Component

The Custom Tag Helper in AS.NET Core MVC is a class that implements the ITagHelper
interface. However, .NET Core allows us to implement this interface with the TagHelper
class. So, creating a Custom Tag Helper is a three-step process as follows:
 Add a new class to your project
 Inherit from TagHelper.
 Override the Process or ProcessAsync method.
First, create a folder named TagHelpers inside the project root directory. This is where we
will be creating our custom Tag Helpers. So, create a class file with the
name MyComponentTagHelper.cs within the TagHelpers folder and copy and paste the
following code into it. The following example code is self-explained, so please go through
the comment line for a better understanding.
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace TagHelpersDemo.TagHelpers
{
[HtmlTargetElement("my-component")]
public class MyComponentTagHelper : TagHelper
{
//IViewComponentHelper: Supports the rendering of view components in a view.
private readonly IViewComponentHelper _viewComponentHelper;
//Initializing the _viewComponentHelper through Constructor
public MyComponentTagHelper(IViewComponentHelper viewComponentHelper)
{
_viewComponentHelper = viewComponentHelper;
}
//This Property will hold the parameter value required for MyComponentViewComponent
public string? Param { get; set; }
//Indicates the associated Microsoft.AspNetCore.Razor.TagHelpers.ITagHelper property
//should not be bound to HTML attributes.
[HtmlAttributeNotBound]
//Specifies that a tag helper property should be set with the current ViewContext
//when creating the tag helper.
[ViewContext]
//Context for view execution.
 489

public ViewContext ViewContext { get; set; }

//Override the Process Method
public override void Process(TagHelperContext context, TagHelperOutput output)
{
//IViewContextAware: Contract for contextualizing a property activated by a view with the
ViewContext.
//Contextualize: Contextualizes the instance with the specified viewContext.
((IViewContextAware)_viewComponentHelper).Contextualize(ViewContext);
var content = _viewComponentHelper.InvokeAsync("MyComponent", new { param = Param
}).Result;
output.Content.SetHtmlContent(content);
}
}
}
Register the Custom Tag Helper in _ViewImports.cshtml
Here, we need to add the namespace of our tag helper to _ViewImports.cshtml to make it
available for all our views. So, modify the _ViewImports.cshtml file as follows, and please
replace the namespace as per your application.
@using TagHelpersDemo
@using TagHelpersDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, TagHelpersDemo
@addTagHelper *, TagHelpersDemo.TagHelpers
Use the Custom Tag Helper in a Razor View
Finally, we can use the custom tag helper in a Razor view. So, modify the index.cshtml view
of Home Controller as follows:
@{
ViewBag.Title = "Index";
Layout = null;
}
<p>Invoking View Component using Custom Tag helper</p>
<my-component param="Hello from Tag Helper!"></my-component>
<br/>
<p>Invoking View Component using Built-in vc Tag helper</p>
 490

<vc:my-component param="Hello"></vc:my-component>
When rendered, this will invoke the Custom Tah helper, which will invoke the View
Component, which will render its corresponding view.
By creating this tag helper for the view component, we can use a custom tag to embed the
view component in your Razor views, leading to more readable and maintainable code.

Cache Tag Helper in ASP.NET Core MVC

In this article, I will discuss Cache Tag Helper in ASP.NET Core MVC Application with
Examples. Please read our previous article discussing View Component Tag Helper in
ASP.NET Core MVC.
Cache Tag Helpers in ASP.NET Core MVC
Cache Tag Helpers in ASP.NET Core MVC provides a convenient way to optimize web
application performance by caching content directly within Razor views. These helpers
allow content that is expensive to render to be stored in the cache and reused, reducing the
load on your server and making page rendering faster for the end user. This reduces the
need to re-execute the same operations on subsequent requests if the content does not
change.
How Do the Cache Tag Helpers Work in ASP.NET Core MVC?
Cache Tag Helpers use ASP.NET Core’s in-memory cache. They are easy to use and
integrate directly into the Razor views. The content within the tags that use the Cache Tag
Helper is dynamically generated once and stored in the cache for subsequent requests until
the cache expires or is invalidated.
How Do We Use Cache Tag Helpers in ASP.NET Core MVC?
Add the necessary namespace:
Before we can use Cache Tag Helpers, ensure the following directive at the top of your
Razor view, or you can also specify the same in the ViewImport.cshtml file. This will allow
all the Tag helpers to be available in our view.

The Interesting Things About Pha Din Pass, Dien Bien That Just A Few People
Know00:10 / 03:1110 Sec
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Use the Cache Tag Helper:
Then, you can use the <cache> tag helper to denote the portion of the view you want to
cache as follows.
<cache>
<!-- Your content to cache goes here. -->
</cache>
Attributes of the Cache Tag Helper:
 expires-after: Sets a sliding expiration time, where the cache entry expires if
not accessed for the specified duration.
 expires-on: Sets an absolute expiration date and time for the cache entry.
 expires-sliding: Another way to specify sliding expiration. Sets a sliding
expiration time. The cache entry will expire if not accessed within this time
 491

period.

 vary-by: A comma-separated list of strings by which to vary the cache.

Useful when caching content that varies by certain conditions (like query
string values, user agent, etc.).
 vary-by-user: Caches content differently based on the authenticated user.
 vary-by-cookie: Caches content based on the specified cookie name(s).
 vary-by-route: Caches different content based on route data.
 vary-by-header: Specifies one or more HTTP headers to vary the cached
output by (e.g., User-Agent for different browsers).

 vary-by-query: Caches content based on the specified query string

parameter(s).
 cache-profile: Name of a cache profile defined in the application’s
configuration. This allows for reusing cache settings across multiple Cache
Tag Helpers.
Note: Cache content is stored In-Memory by default. If your app restarts or runs in a web
farm or load-balanced environment, you might want to consider distributed caching.
Cache Tag Helpers Examples in ASP.NET Core MVC:
Cache Tag Helpers in ASP.NET Core MVC provide a declarative way to add caching to
your Razor views. Here are some practical examples to demonstrate its use. First, modify
the Home Controller as follows.
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
}
}
Cache Attribute:
The Cache Tag Helper provides the ability to improve the performance of your ASP.NET
Core app by caching its content to the internal ASP.NET Core cache provider. The following
Razor markup caches the current date:
<cache>
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
 492

The first request to the page that contains the Tag Helper displays the current date.
Additional requests show the cached value until the cache expires (default 20 minutes) or
until the cached date is evicted from the cache.
Enabled Attribute:
The enabled Attribute of the Cache tag helper in ASP.NET Core MVC determines if the
content enclosed by the Cache Tag Helper is cached. The default is true. If set to false, the
rendered output is not cached.
<cache enabled="true">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Expires-on Attribute:
The expiration-on attribute of Cache Tag Helper in ASP.NET Core MVC sets an absolute
expiration date for the cached item. The following example caches the contents of the
Cache Tag Helper until 05:15 AM on January 15, 2026:
<cache expires-on="@new DateTime(2026,1,15,05,15,0)">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Expires-after:
The expiration-after attribute of the cache tag helper in ASP.NET Core MVC sets the time
from the first request time to cache the contents. The following example caches a portion of
the view for 10 minutes.
<cache expires-after="@TimeSpan.FromMinutes(10)">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Every time you refresh the page within 10 minutes, you will notice the timestamp won’t
change because the content is cached.
Expires-sliding Attribute
It is similar to expires-after, but the expiry will be renewed after every access. It is a
TimeSpan type.
<cache expires-sliding="@TimeSpan.FromMinutes(10)">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Vary-by-header Attribute:
 493

The vary-by-header Attribute of the Cache Tag Helper in ASP.NET Core MVC accepts a
comma-delimited list of header values that trigger a cache refresh when they change. The
following example monitors the header value User-Agent and caches the content for every
different User-Agent presented to the web server.
<cache vary-by-header="User-Agent">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Vary-by-query Attribute:
The vary-by-query Attribute of Cache Tag Helper in ASP.NET Core MVC accepts a comma-
delimited list of Keys in a query string (Query) that triggers a cache refresh when the value
of any listed key changes. The following example monitors the values of Name and ID. The
example caches the content for every different Name and ID presented to the web server:
<cache vary-by-query="Name,Id">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Vary-by-cookie Attribute:
The vary-by-cookie accepts a comma-delimited list of cookie names that trigger a cache
refresh when the cookie values change. The following example monitors the cookie
associated with ASP.NET Core Identity. When a user is authenticated, a change in the
Identity cookie triggers a cache refresh:
<cache vary-by-cookie=".AspNetCore.Identity.Application">
<p>This Content is Generated </p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Vary-by-user Attribute:
The vary-by-user specifies whether or not the cache resets when the signed-in user (or
Context Principal) changes. The current user is also known as the Request Context
Principal and can be viewed in a Razor view by referencing @User.Identity.Name. The
following example monitors the current logged-in user to trigger a cache refresh:
<cache vary-by-user="true">
Welcome, @User.Identity.Name! Your personalized content is here.
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
This attribute maintains the cache’s contents through a sign-in and sign-out cycle. When the
value is set to true, an authentication cycle invalidates the cache for the authenticated user.
The cache is invalidated because a new unique cookie value is generated when a user is
 494

authenticated. The cache is maintained for the anonymous state when no cookie is present,
or the cookie has expired. If the user is not authenticated, the cache is maintained.
Vary-by Attribute:
The vary-by attribute of Cache Tag Helper in ASP.NET Core MVC allows the customization
of the data cached. When the object referenced by the attribute’s string value changes, the
content of the Cache Tag Helper is updated.
The following example assumes the controller method rendering the view sums the integer
value of the two route parameters, myParam1 and myParam2, and returns the sum as the
single model property. When this sum changes, the content of the Cache Tag Helper is
rendered and cached again. So, first, modify the Home Controller as follows:
using Microsoft.AspNetCore.Mvc;
namespace TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public IActionResult Index(string myParam1, string myParam2)
{
int num1;
int num2;
int.TryParse(myParam1, out num1);
int.TryParse(myParam2, out num2);
return View("Index", num1 + num2);
}
}
}
Next, modify the Index.cshtml view as follows:
@model int
<cache vary-by="@Model">
<p>Result : @Model</p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Vary by Query String
Cache content based on a specific query string value. Different cached content will be
stored for different category query string values.
<cache vary-by="@Context.Request.Query["category"]">
Showing products for category: @Context.Request.Query["category"]
<br/>
 495

Current Time Inside Cache Tag Helper: @DateTime.Now

</cache>
Using Cache Profile
First, define a cache Profile in your Program.cs class file as follows. Here, we define the
cache profile, which will cache the data for 1 minute.
builder.Services.AddControllersWithViews(options =>
{
options.CacheProfiles.Add("ShortLivedCache", new CacheProfile()
{
Duration = 60 // 1 minute
});
});
After defining a cache profile in your Program.cs class, then use it in your Razor view. So,
modify the Index.cshtml view as follows:
<cache profile="ShortLived">
<p>
Cached content using the ShortLived profile.
</p>
Current Time Inside Cache Tag Helper: @DateTime.Now
</cache>
Benefits of Using Cache Tag Helpers in ASP.NET Core:
The primary benefit of using Cache Tag Helpers is the performance improvement due to
reduced processing on each request. They are especially useful when content does not
change frequently but is costly to generate, such as user dashboards, complex page
layouts with data from various sources, or reports.

HTML Helpers vs. Tag Helpers in ASP.NET Core MVC:

In this article, I will discuss HTML Helpers vs. Tag Helpers in ASP.NET Core MVC
Applications with Examples. In ASP.NET Core MVC, both HTML Helpers and Tag Helpers
are mechanisms to generate HTML markup within views. However, they have different
approaches and characteristics. Let’s compare HTML Helpers and Tag Helpers to
understand their differences and when to use each:
HTML Helpers:
HTML Helpers are methods provided by ASP.NET MVC that generate HTML markup using
C# code directly within the Razor view files. They are essentially C# methods that return
HTML strings and are used within Razor code blocks. HTML Helpers have been a part of
ASP.NET MVC since its earlier versions.
 496

Advantages of HTML Helpers:

 Familiarity: Developers comfortable with C# coding can easily create
dynamic HTML using HTML Helpers, as they involve standard C# coding
practices.
 Flexibility: HTML Helpers provide a high degree of control over the
generated HTML since you’re working with C# directly. This can be
advantageous when implementing complex logic within the view.
 Fine-Grained Customization: You can customize the generated HTML in a
very detailed manner by using HTML Helpers.
Disadvantages of HTML Helpers:
 Readability: HTML Helpers can lead to less readable views, especially when
the code is mixed with HTML markup and C# logic. This can make it harder
for designers or front-end developers to understand the view’s structure.
 Maintainability: The tight integration of C# code within the HTML markup
can make views harder to maintain, as changes to the code can impact the
overall structure of the view.
Tag Helpers:
The Tag Helpers are a recent addition to ASP.NET Core MVC and provide a different
approach to generating HTML markup. Tag Helpers allows developers to create custom
HTML-like elements that encapsulate server-side logic, making the code more readable and
separating concerns better.
Advantages of Tag Helpers:
 Readability and Separation of Concerns: Tag Helpers improve the
readability of views by resembling HTML markup and isolating server-side
logic within custom tags. This promotes better separation of concerns
between HTML structure and application logic.
 Maintainability: Views written with Tag Helpers are generally more
maintainable because the code is structured in a way that’s closer to standard
HTML, making it easier for designers and front-end developers to collaborate.
 Consistency: Tag Helpers allow you to create reusable components with
consistent behavior across multiple views, reducing code duplication.
 Tooling and IntelliSense: Tag Helpers provide better tooling support and
IntelliSense in your IDE, helping developers write code faster and with fewer
errors.
Disadvantages of Tag Helpers:
 Learning Curve: Developers familiar with C# and HTML might need time to
adapt to the Tag Helper syntax.
 Limited Flexibility: Tag Helpers might not offer the same level of fine-grained
customization as HTML Helpers, especially for more complex scenarios.
Extensibility
 HTML Helpers: Creating custom HTML Helpers involves defining static
methods that return HTML strings. This can be less intuitive and might require
more effort to manage complex output or incorporate context-aware logic.
 Tag Helpers: They are implemented as classes and provide a more
structured and OOP-friendly way to extend functionality. This approach
makes it easier to manage complex logic, maintain state, and integrate with
other components.
Performance
 497

 HTML Helpers and Tag Helpers: Performance differences between HTML

Helpers and Tag Helpers are generally minimal and not the primary
consideration for choosing one over the other. Both are efficient for
generating HTML content, but Tag Helpers might offer slight performance
improvements in certain scenarios due to their closer integration with the
Razor view engine.
Usage Scenarios
 HTML Helpers: They are still useful for projects migrated from older versions
of ASP.NET MVC or when working within a primarily C# Driven development
approach.
 Tag Helpers: Recommended for new projects due to their modern syntax,
ease of use, and better integration with HTML. They are particularly beneficial
in teams where front-end developers need to work closely with the views
without deep C# knowledge.