Blazor

Overview of Razor Views, Razor Pages and Razor Components

In this walkthrough, you will learn about Microsoft Razor using different project templates and generate the same output with answers to the following questions.

  1. What is Razor?
  2. How many types of Microsoft Razor?
  3. Which project template should be used for different types of Razor?
  4. Asp.Net Core MVC
    • What are Models?
    • What are Controllers?
    • What is View?
    • Walkthrough
  5. Asp.Net Core Razor Pages
    • What are Razor Pages?
    • Walkthrough
  6. Blazor WebAssembly Standalone app
    • What is Razor Component?
    • Walkthrough
  7. Common Output from three different project templates.
  8. Difference between Razor View vs Razor Pages vs Razor Component

What is Razor?

Razor is developed by Microsoft and used in the .NET (.Net Framework / .Net Core / .Net Standard) Web Platform called Asp.Net. Razor was introduced in 2010 as View Engine and released as part of ASP.NET MVC 3 in January 2011. Razor is a robust and powerful view engine that can be used with C# and VB.NET.

Microsoft Razor has the following types.

  • Razor View or Razor View Engine
  • Razor Pages
  • Razor Components
  • Razor View or Razor View Engine:

Razor View is used to generate the VIEW. Using C# view file generated with extension CSHTML. CSHTML = HTML + C# code. Razor view is lightweight compared to web forms (ASPX) pages.

You can create Razor View – CSHTML, VBHTML by selecting a web development project called “ASP.NET Core Web Application / Asp.Net Web Application (.Net Framework)”.

Razor View Walk Through.

Razor View

Razor View and Razor Engine

New Project

Additional Information

Default View in Visual Studio 2022.

Default View

Solution Explorer View (Project Structure)

Solution Explorer

Now select the MODELS folder and right-click on it, and select ADD CLASS.

What is a Model?

Model is nothing but class file which is used for following purposes.

  • ⦁ Data Representation.
  • ⦁ Data Validation using Data Annotation.
  • ⦁ Data Transfer Object (DTO) interacts with the database for CRUD – Create, Retrieve, Update Delete.

There are two types of models – MODEL and VIEW MODEL.

The best practice is always to suffix MODEL or VIEWMODEL after the name example, FriendModel.

FriendModel

Model

Code of FriendModel.cs file

namespace RazorViewAspNetCoreProj.Models
{
    public class FriendModel
    {
        public string FriendName { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
        public string PhoneNumber { get; set; } = string.Empty;
        public string Address { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
    }
}

Now select the CONTROLLERS folder and right right-click on it, and select ADD CONTROLLER.

What are Controllers?

The controller is responsible for accepting HTTP requests and handling User Input Data.

HTTP requests

MVC

FriendController’s Index ActionMethod

using Microsoft.AspNetCore.Mvc;
using RazorViewAspNetCoreProj.Models;

namespace RazorViewAspNetCoreProj.Controllers
{
    public class FriendController : Controller
    {
        public IActionResult Index()
        {
            List<FriendModel> frndObj = new List<FriendModel>
            {
                new FriendModel
                {
                    FriendName = "Manoj Babulal Kalla",
                    Email = "[email protected]",
                    PhoneNumber = "1234567890",
                    Address = "11 Bhaiyo Nadi, Balaji Sweet ke Pass, Phalodi.",
                    City = "Jodhpur"
                },
                new FriendModel
                {
                    FriendName = "Ashish Manoj Kalla",
                    Email = "[email protected]",
                    PhoneNumber = "1234567891",
                    Address = "Goushala Chowk, Water Box Ke Samne, Phalodi.",
                    City = "Jodhpur"
                },
                new FriendModel
                {
                    FriendName = "Suhana Manoj Kalla",
                    Email = "[email protected]",
                    PhoneNumber = "1234567892",
                    Address = "Hanuman Chowk, Madhuji ki Beri, Phalodi.",
                    City = "Jodhpur"
                },
                new FriendModel
                {
                    FriendName = "Gudda Bhau Kalla",
                    Email = "[email protected]",
                    PhoneNumber = "1234567893",
                    Address = "Adarsh Nagar, Near NK Cinema, Phalodi.",
                    City = "Jodhpur"
                }
            };

            // Send model to view.
            return View(frndObj);
        }
    }
}

To create view right right-click on INDEX action-method

What is View?

View is responsible for rendering the user interface (UI).

Razor View

Add

FriendIndex.cshtml

@model IEnumerable<RazorViewAspNetCoreProj.Models.FriendModel>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>

<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.FriendName)</th>
            <th>@Html.DisplayNameFor(model => model.Email)</th>
            <th>@Html.DisplayNameFor(model => model.PhoneNumber)</th>
            <th>@Html.DisplayNameFor(model => model.Address)</th>
            <th>@Html.DisplayNameFor(model => model.City)</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.FriendName)</td>
                <td>@Html.DisplayFor(modelItem => item.Email)</td>
                <td>@Html.DisplayFor(modelItem => item.PhoneNumber)</td>
                <td>@Html.DisplayFor(modelItem => item.Address)</td>
                <td>@Html.DisplayFor(modelItem => item.City)</td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </tbody>
</table>

Now press F5 To Run the project.

In Bthe rowser URL, type http://localhost:7182/friend/index

VIEW OUTPUT Screen.

VIEW OUTPUT

Razor Pages

Razor page having two files Index.cshtml and Index.cshtl.cs. This look similarity of the ASPX web form and Asp.Net Core MVC.

Pages

Configure

Information

Core

Index

Now, you are going to create a new razor page called FriendView.

Right-click on the PAGES folder and select ADD RAZOR PAGE.

PAGES folder

Empty

Now you create a MODELS folder by right-clicking on project name and selecting ADD NEW FOLDER.

Add FRIEND MODEL, again right click on MODELS folder and select ADD CLASS.

ADD CLASS

FriendModel.cs file code

namespace RazorPageAspNetCoreProj.Models
{
    public class FriendModel
    {
        public string FriendName { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
        public string PhoneNumber { get; set; } = string.Empty;
        public string Address { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
    }
}

Now you double click on FRIENDVIEW.CSHTML file.

FriendView.Cshtml file code

@page
@model RazorPageAspNetCoreProj.Pages.FriendViewModel
@{
}

<h1>Friend List</h1>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Friend Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Address</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var friend in Model.frndObj)
        {
            <tr>
                <td>@friend.FriendName</td>
                <td>@friend.Email</td>
                <td>@friend.PhoneNumber</td>
                <td>@friend.Address</td>
                <td>@friend.City</td>
            </tr>
        }
    </tbody>
</table>

FriendView.cshtml.cs file code

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPageAspNetCoreProj.Models;

namespace RazorPageAspNetCoreProj.Pages
{
    public class FriendViewModel : PageModel
    {
        public List<FriendModel> frndObj { get; set; } = new List<FriendModel>();

        public void OnGet()
        {
            frndObj.Add(new FriendModel
            {
                FriendName = "Manoj Babulal Kalla",
                Email = "[email protected]",
                PhoneNumber = "1234567890",
                Address = "11 Bhaiyo Nadi, Balaji Sweet ke Pass, Phalodi.",
                City = "Jodhpur"
            });

            frndObj.Add(new FriendModel
            {
                FriendName = "Ashish Manoj Kalla",
                Email = "[email protected]",
                PhoneNumber = "1234567891",
                Address = "Goushala Chowk, Water Box Ke Samne, Phalodi.",
                City = "Jodhpur"
            });

            frndObj.Add(new FriendModel
            {
                FriendName = "Suhana Manoj Kalla",
                Email = "[email protected]",
                PhoneNumber = "1234567892",
                Address = "Hanuman Chowk, Madhuji ki Beri, Phalodi.",
                City = "Jodhpur"
            });

            frndObj.Add(new FriendModel
            {
                FriendName = "Gudda Bhau Kalla",
                Email = "[email protected]",
                PhoneNumber = "1234567893",
                Address = "Adarsh Nagar, Near NK Cinema, Phalodi.",
                City = "Jodhpur"
            });
        }
    }
}

Output

Output

Razor Components

Using Razor components, we can create reusable UI components that can be used in both the Server Side and the Client Side.

We are going to use the Blazor WebAssembly App project.

Razor Components

Name

None

The default view of the project in Visual Studio 2022.

Project

Project Structure of Blazor Web Assembly (Blazor).

Blazor Web Assembly

Now create a new MODELS folder. Right-click on the project and select ADD CLASS.

Class

FriendModel.cs file code

namespace RazorComponentBlazorApp.Models
{
    public class FriendModel
    {
        public string FriendName { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
        public string PhoneNumber { get; set; } = string.Empty;
        public string Address { get; set; } = string.Empty;
        public string City { get; set; } = string.Empty;
    }
}

Now add FriendView Component, right click on PAGES folder select ADDRAZOR COMPONENT.

FriendView Component

FriendViewComponent.razor file code

@* Routing *@
@page "/friendview"
@using RazorComponentBlazorApp.Models

<h1>Friend View</h1>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Friend Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Address</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var friend in frndObj)
        {
            <tr>
                <td>@friend.FriendName</td>
                <td>@friend.Email</td>
                <td>@friend.PhoneNumber</td>
                <td>@friend.Address</td>
                <td>@friend.City</td>
            </tr>
        }
    </tbody>
</table>

@code {
    public List<FriendModel> frndObj = new List<FriendModel>();

    // On Initialization
    protected override void OnInitialized()
    {
        frndObj.Add(new FriendModel
        {
            FriendName = "Manoj Babulal Kalla",
            Email = "[email protected]",
            PhoneNumber = "1234567890",
            Address = "11 Bhaiyo Nadi, Balaji Sweet ke Pass, Phalodi.",
            City = "Jodhpur"
        });

        frndObj.Add(new FriendModel
        {
            FriendName = "Ashish Manoj Kalla",
            Email = "[email protected]",
            PhoneNumber = "1234567891",
            Address = "Goushala Chowk, Water Box Ke Samne, Phalodi.",
            City = "Jodhpur"
        });

        frndObj.Add(new FriendModel
        {
            FriendName = "Suhana Manoj Kalla",
            Email = "[email protected]",
            PhoneNumber = "1234567892",
            Address = "Hanuman Chowk, Madhuji ki Beri, Phalodi.",
            City = "Jodhpur"
        });

        frndObj.Add(new FriendModel
        {
            FriendName = "Gudda Bhau Kalla",
            Email = "[email protected]",
            PhoneNumber = "1234567893",
            Address = "Adarsh Nagar, Near NK Cienma, Phalodi.",
            City = "Jodhpur"
        });
    }
}

View

Common Output from three different project templates.

OUTPUT From Asp.Net Core MVC Project – Razor View.

Index View

OUTPUT from Asp.Net Core Razor Pages.

Core Razor Pages

OUTPUT from Blazor Webassembly Standalone App Razor Component.

Webassembly Standalone

Difference Between Razor View vs Razor Pages vs Razor Component

POINT RAZOR VIEW RAZOR PAGE RAZOR COMPONENT
Template Asp.Net Web Application MVC / Asp.Net Core Web Application. Asp.net Core Web App (Razor Pages). Blazor WebAssembly Standalone App.
Structure Working on the rule and concept of MVC. The working style is similar to WebForm (ASPX) and Power of MVC. Component base working like Angular, ReactJS, VueJS.
Rendering Server Side HTML rendering Server side rendering. Client Side and Server Side.
Routing Support Conventional Routing, Attribute Routing, and Area Routing. Support Conventional Routing, Route Templates, and PageModel Attributes Support Component Routing, App-wide routing using (app.razor) and Passing parameters to Routes.

Happy Coding!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found