Curriculum
Views and Razor Syntax in ASP.NET Core MVC are responsible for creating the user interface of web applications. While Controllers process requests and Models manage data, Views display information to users. Razor Syntax allows developers to combine C# code with HTML, making it easy to create dynamic web pages.
Understanding Views and Razor Syntax in ASP.NET Core MVC is essential because every ASP.NET Core MVC application uses views to render content and Razor Syntax to generate dynamic pages. Whether you are building a School Management System, Hospital Management System, E-Commerce Platform, Banking Portal, ERP Solution, or Enterprise Application, views play a crucial role in user interaction.
A View is a file responsible for displaying information to users.
Responsibilities:
Display Data
Generate HTML
Render User Interface
Present InformationViews focus only on presentation.
Without Views:
No User Interface
No HTML Output
No Data PresentationViews transform application data into web pages.
User Request
↓
Controller
↓
Model
↓
Controller
↓
View
↓
HTML
↓
BrowserThe View generates the final output seen by users.
Razor Syntax is a markup language that allows C# code to be embedded inside HTML.
Example:
<h1>
@DateTime.Now
</h1>Output:
Current Date and TimeRazor makes web pages dynamic.
Benefits:
Dynamic Content
Clean Code
Easy Integration
Fast Development
Strong TypingRazor is the default view engine in ASP.NET Core MVC.
ASP.NET Core Views use:
.cshtmlExamples:
Index.cshtml
Details.cshtml
Create.cshtml
Edit.cshtmlThese files contain HTML and Razor code.
Example:
Views
↓
Student
↓
Index.cshtmlThe folder name usually matches the controller name.
File:
Views
↓
Student
↓
Index.cshtmlCode:
<h1>
Welcome Students
</h1>Output:
Welcome StudentsThis is a simple static view.
Controller:
public IActionResult
Index()
{
return View();
}ASP.NET Core automatically searches for:
Views
↓
Student
↓
Index.cshtmland renders it.
Use:
@to execute C# code.
Example:
<p>
@DateTime.Now
</p>Output:
Current Date TimeRazor evaluates the expression automatically.
Example:
@{
string name =
"Rahul";
}
<h2>
@name
</h2>Output:
RahulVariables can be displayed directly inside views.
Example:
@{
int marks = 90;
}Purpose:
Declare Variables
Execute Logic
Perform CalculationsCode blocks allow C# execution inside views.
Example:
@{
int marks = 90;
}
@if(marks >= 40)
{
<p>Pass</p>
}Output:
PassRazor supports standard C# conditions.
@if(marks >= 40)
{
<p>Pass</p>
}
else
{
<p>Fail</p>
}Output:
PassConditional rendering is common in real applications.
Example:
@for(int i = 1;
i <= 5;
i++)
{
<p>
@i
</p>
}Output:
1
2
3
4
5Loops help display collections of data.
@foreach(var item
in students)
{
<p>
@item.Name
</p>
}Useful when displaying lists from a database.
Example:
@*
This is a comment
*@Comments are ignored during rendering.
ViewBag allows data transfer from controller to view.
Controller:
ViewBag.Name =
"Rahul";View:
<h1>
@ViewBag.Name
</h1>Output:
RahulViewBag is dynamic and flexible.
Controller:
ViewData["Name"] =
"Rahul";View:
<h1>
@ViewData["Name"]
</h1>Output:
RahulViewData stores key-value pairs.
| ViewBag | ViewData |
|---|---|
| Dynamic Object | Dictionary |
| Easy Syntax | Key Based |
| Runtime Resolution | Object Based |
| Less Type Safety | Less Type Safety |
Both are commonly used.
Recommended approach:
Controller:
Student student =
new Student
{
Name = "Rahul"
};
return View(student);View:
@model Student
<h1>
@Model.Name
</h1>Output:
RahulStrongly Typed Views are preferred in professional applications.
Example:
@model StudentPurpose:
Bind Model
Access Properties
Provide Type SafetyThis enables IntelliSense and compile-time checking.
Example:
<p>
@Model.Name
</p>
<p>
@Model.Course
</p>Output:
Rahul
.NETModel properties can be displayed easily.
Layout pages provide a common design structure.
Example:
Header
Navigation
FooterShared across multiple pages.
Location:
Views
↓
Shared
↓
_Layout.cshtmlUsed as the master template.
<html>
<head>
</head>
<body>
@RenderBody()
</body>
</html>Individual views are rendered inside the layout.
Partial Views allow reusable UI components.
Examples:
Header
Footer
Sidebar
MenuReusable components reduce duplication.
<partial
name="_Header" />ASP.NET Core inserts the partial automatically.
Student Portal:
Student List
Attendance
Results
CoursesAll pages share:
Header
Navigation
Footerusing Layout and Partial Views.
Pages can change automatically.
Easy to read and maintain.
Reduces errors.
Layouts and partials reduce duplication.
Simplifies UI creation.
These benefits make Razor highly productive.
Keep views focused on presentation.
Prefer Strongly Typed Views.
Use Layouts and Partial Views.
Follow MVC principles.
Can cause user input issues.
A View is responsible for displaying information to users.
Razor Syntax allows C# code to be embedded inside HTML.
A Strongly Typed View is connected directly to a model.
ViewBag is a dynamic object used to pass data from controllers to views.
A Layout Page provides a shared design template for multiple views.
They create dynamic user interfaces and display application data effectively.
A View is a UI component that displays information to users.
Razor Syntax allows developers to write C# code inside HTML pages.
A Strongly Typed View is bound to a specific model type.
ViewBag is a dynamic object used to transfer data from controllers to views.
A Layout Page provides a common structure shared by multiple views.
They enable dynamic page generation and user interface development.