Asp.Net Razor Pages By Sagar Jaybhay

In article we will understand Asp.Net Razor Pages By Sagar Jaybhay.

Asp.Net MVC we have 3 different components Controller, Model, and View. In Asp.Net razor pages we have only two components 1) Display template and 2) Page Model Class.

Page model class has OnGet and OnPost methods. Which are worked as the Controllers’ action method in MVC?

The properties which you write in Page Model class are available in the Display template file of that class.

When you create Razor application you can see Index and Privacy are default files are added. In Index model class we added Message Property and assign value to that message property in OnGet method. To use this property in our Display template which is our view Index.cshtml file. In that file, we need to @(at the rate) symbol before model and by using(dot). you can assess these properties.

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace RazorApplication.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public string Message { get; set; }
        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {
            Message = "Hello Mr. Sagar Jaybhay.";
        }
    }
}

Our application we have View which is Display template and code for that is shown below.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">@Model.Message</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

So it means that Code behind file of our View i.e Index.cshtml file is View and its code behind is Index.cshtml.cs file which worked as model. Means you can define as many as file in this. The methods in that model i.e OnGet() and OnPost() handles get and post methods. Which ultimately means that PageModel class which worked as Model and Controller and Display template works as view in Asp.Net MVC.

Razor Pages are a new technology that is for building a website is fast and you can think as Razor pages work as Classic Asp.Net webforms framework.

Whatever we put in PageModel class is related to that page only.

Layout View In Asp.Net Razor

The common section in a web application presents means header, footer, left menu and right-menu like that. For this, in our Asp.Net MVC, we have a Layout view. If you want to find a page in View or Page then go to the first line of View code and if you find @Page directive it means that it is Page. In our Layout.cshtml file we don’t have @Page directive means it in Layout View.

In the Asp.Net razor, pages project not processing static files directly and not gives as output for this purpose we need to add StaticFile middler-ware in startup class file in configure method.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/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.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }

@asp-page anchor tag helper

This asp-page is an anchor tag helper and it sets the href attribute for the anchor tag.

<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>

@asp-append-version anchor tag helper

This tag helper is used to caching a busting mechanism for static files. It is mainly used for images, javascript files.

@RenderBody anchor tag helper

This is a tag helper is used to render a page at that location. It Means that , if you declared this tag inside div then Pages like Index.cshtml, Privacy.cshtml are included or rendered inside that div element and plugin their content at this location where we include this @RenderBody() tag.

@RenderSection anchor tag helper

It is used to render the content in a separate place.

@RenderSection("footer", required: false)
@section Footer
{
    <p>Section/Index page</p>
}

We can designate content to be rendered at RenderSection using a @section declaration. This allows us to again separate layout from content and provides a flexible framework to build our views.

Note the required: false call in RenderSection. By default, Sections are required, meaning each child view must define the section. We pass required: false to designate that the section is optional.

Below is tag helper in detail URL:- https://sagarjaybhay.com/tag-helpers-in-asp-net-core-mvc-sagar-jaybhay/

GitHub Link:- https://github.com/Sagar-Jaybhay/AspNetRazor

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Related posts