Razor pages vs MVC in ASP.NET

Table of Content

What is ASP.NET?

ASP.NET is a type of software framework/infrastructure that was developed by Microsoft. ASP.NET is used for developing, running, and deploying the applications same as console applications, window services, and web applications. It is a web application of .NET framework that is used to create dynamic web pages.

It does not require any license for developed web applications. Microsoft ASP.NET Provides open-source for all users. That was used for web development and windows-based app development. ASP stands for (Active Server Pages). Most of the developers prefers Asp.Net Technology because it is too easy to create and maintain the existing project source code and HTML. ASP .NET languages can be built to be language-independent.

What are Razor Pages?

Razor Page is similar to the HTML page but it loads data easily. A Razor Page is almost the same as ASP.NET MVC’s view component. It has basically the syntax and functionality same as MVC.

The basic difference between Razor pages and MVC is that the model and controller code is also added within the Razor Page itself. You do not need to add code separately.

It is similar to MVVM (Model-View-View-Model) framework. That provides two-way data binding and a simpler development experience with isolated concerns.

The ASP.NET MVC has been extremely popular nowadays for web application development, and it definitely has lots of advantages. In fact, the ASP.NET Web Forms was particularly designed as an MVVM solution in MVC.

But, the new ASP.NET Core Razor Pages is the next development of ASP.NET Web Forms.

What is Razor Syntax in MVC?

There are two types of Razor syntax.

1. Single statement block: It starts with @.
2. Multi statement block: It needs to be always written between this @ {.……}

The semicolon “;” must be wont to end statements. Here variable and function starts with the @ symbol.

Single block Statements

A single statement block is used when you want to work with a single line of the code written on the MVC view page.

Example

To display current Date-time. Create Index.CSS HTML View and add the below code.

 @{  
    ViewBag.Title = "Index";  
}    
<div>  
   <label>Current-Date: @DateTime.Now.ToString()</label><br/>  
   <label>Current-Long Date: @DateTime.Now.ToLongDateString()
</label><br/>  
   </div> 

Inspect browser and search for “DateTime.Now.ToString()” on browser. You can't see the c# code on the browser side as you did.

If you inspect the browser and search for “DateTime.Now.ToString()” on the browser.

We can only see the HTML code. This is the job of View Engine. It converts C# code into pure Html format in the browser.

Multi statement block

We also define a multiline statement block as a single-line statement block. In this block, we can define more than one line of code statements and do processes. A multiline block is between opening and closing curly braces like that {....}, but the opening brace will have the one “@" special character in the same line if we define the "@" and opening curly braces in different lines then it will display an error.

Example:

<div>
@{
		Var c++ = 200;
		Var Rubi = 800;
		Var Ionic = 100;
		Var sum = (c++ + Rubi + Ionic);
  }
addition of @ c++ and @Rubi and @Ionic is 
</div>

Now, see how to write Razor code:

Basic Structure of Razor Pages and MVC

Razor pages do not have any type of structure like MVC. But all Razor pages inbuilt under the Pages folder with a very simple structure. You have to see the below screenshot for more understanding. Further, you can organize your project structure based on your requirements.

Understand Razor pages vs MVC structure from the below image.

The above screenshot will describe to you about differences between the project structure of .Net Razor pages and MVC.

Code Comparison between MVC and Razor

As we already mentioned above that Razor pages and MVC look almost similar i.e. both having. cshtml as the file

If you will notice the 2 pages, one from Razor and another from MVC then you will notice the @page at the top of Razor pages.

In Razor Page use @Page is a directive and one more difference is the model declaration in Razor pages.

In Razor Pages, we can declare model is like below

For example, Demo.cshtml – @model DemoModel

For Index.cshtml – @model Indexmodel
@model RazorPageTest.Models.PageClass
<form asp-action = "pgmanage">
    <div id="pg”class="form-horizontal">
        <h4>Client</h4>
     <div asp-validation-summary="DEMOMODE" class=" text - default "> </div>
        <input type="hidden" asp-for="MODEL" />
        <div class="form-group">
            <label asp-for="Dispaly" class="col - md-1 control - label"></label>
            <div class="col-md-9">
                <input asp-for="Display" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-1 col - md - 10">
          <input type="submit" value="SubmitData" class="btn btn - denger" />
            </div>
        </div> 
    </div>
</form>

There is the MVC controller. Our model is DemoClass which only have two properties with a simple example.

public class DemoController: Controller
    {
        public IConfiguration Configuration;
        public DemoController(IConfiguration conf)
        {
            Configuration = conf;
        }
        public async Task ManagePage(int E_id)
        {
            PageClass p;
            using (var cn = new SqlConnection 	(Configuration.GetConnectionString("cdb")))
            {
                await conn.OpenAsync();
                var pg= await conn.QueryAsync("select * FROM 		PageData Where PageDataID = @pa1", new { pa1 = id });
Pg = pg.FirstOrDefault ();
            }
            return View(pg);
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task ManagePage(int id, PageClass  pg)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    using (var cn = new SqlConnection 	(Configuration.GetConnectionString("cndb")))
                    {
                        await conn.OpenAsync();
                        await conn.ExecuteAsync("UPDATE PageData SET Title 		= @Title WHERE PageDataID = @PageDataID", new { page.PageDataID, 			page.Title});
                    }
                }
                catch (Exception)
                {
                   return lgdata
                }
                return RedirectToAction("Demo", "Home");
            }
            return View(pg);
        }
    }

You can add a new Razor Page to your application. First of all, go to visual studio and click on the file menu and select a new project, Add -> Razor Pages

After that, given the appropriate name to the view and select your required options and then click on Add button.

Let's check default code- inside the Demo.cshtml

public class Demo: pgModell
    {
        public void OnGet()
        {
         @TempData= @dt;
        }
}

There is no code-behind in MVC.

Conclusion

This blog is helpful in understanding the difference between Razor Page and MVC in ASP.NET. In this blog, we have discussed Razor Page with a simple example and also explained MVC with an example.