Building A Simple Web App Using Razor Pages

Introduction

In this article, you will learn how to build a simple CRUD web app using Razor Pages, which is new in ASP.NET Core 2.0. This web app is about the management of the students, and all operation of the database will be through the API building by NancyFx.

What is Razor Pages

Razor Pages is a new feature of ASP.NET Core MVC that makes coding page-focused scenarios easier and more productive. 

Let's take a look at the 2.0.0 Roadmap of ASP.NET Core about Razor Pages.

Adding a page-focused programming model to MVC, built on the existing primitives but optimized for typical scenarios and patterns seen in server-side HTML rendering.

You can visit the following link to find out more information about Razor Pages.

https://github.com/aspnet/Home/wiki/Roadmap#razor-pages

Environment

Here is the environment of my computer.

• VS for Mac Community
• .NET Core 2.0

You can also use VS 2017 or VS Code as your IDE but the .NET Core 2.0 SDK and Runtime is required !!

Technologies I used are as follow -

• Razor Pages(build the website)
• Dapper(database operation )
• SQLite(store the data)
• NancyFx(build the API)

Now, let's begin.

Step #1 Set up the project structure

Create an ASP.NET Core Web App(Razor Pages) project which is used to build the website.

Note: Don't select the traditional ASP.NET Core Web App with MVC!! 

Create an ASP.NET Core Empty project to handle the API.

When you click the Next button, it will ask you to choose the target framework of your project! At this step, we choose the .NET Core 2.0.



Create a .NET Standard Library to store the Entities.



When you click the next button, it will ask you to choose the target framework of your project as well! Of course, we choose the .NET Core 2.0 again!

Step #2 Create database/tables and the entities

Create an SQLite table with the following SQL query.

CREATE TABLE [students] (
    [id] integer NOT NULL PRIMARY KEY AUTOINCREMENT,
    [no] nvarchar(254),
    [name] nvarchar(254),
    [gender] nvarchar(254)
);

Create the Student Model.

public class Student
{
    public int Id { get; set; }

    [Display(Name = "No of student")]
    [Required(ErrorMessage ="No is required")]
    [StringLength(maximumLength: 6, MinimumLength = 2)]
    public string No { get; set; }

    [Display(Name = "Name of student")]
    [Required(ErrorMessage = "Name is required")]
    [MaxLength(20)]
    [MinLength(3)]
    public string Name { get; set; }

    [Display(Name = "Gender of student")]
    [Required(ErrorMessage = "Name is required")]
    [StringLength(maximumLength:6,MinimumLength =1)]
    public string Gender { get; set; }
}

public class StudentCreateVM
{
    [Display(Name = "No")]
    [Required(ErrorMessage = "No is required")]
    [StringLength(maximumLength: 6, MinimumLength = 2)]
    public string No { get; set; }

    [Display(Name = "Name")]
    [Required(ErrorMessage = "Name is required")]
    [MaxLength(20)]
    [MinLength(3)]
    public string Name { get; set; }

    [Display(Name = "Gender")]
    [Required(ErrorMessage = "Name is required")]
    [StringLength(maximumLength: 6, MinimumLength = 1)]
    public string Gender { get; set; }
}

As you can see, I added some attributes on the properties which are used for the display and the validation of the forms.

This usage is similar to what we always use in ASP.NET MVC.

However, what we need to be cautious about is that we need to add the reference of System.ComponentModel.DataAnnotations !!

Step #3 Build the RESTful API 

Here, we use NancyFx to build our RESTful API.

public class StudentModule : NancyModule
{
    private string _connStr;
    public StudentModule() : base("api/students")
    {
        this._connStr = $"Data Source ={Path.Combine(Directory.GetCurrentDirectory(), "rpdemo.db")}";

        Get("/", async (_, ct) =>
        {
            using (IDbConnection conn = new SqliteConnection(_connStr))
            {
                conn.Open();
                var sql = "select s.id,s.no,s.name,s.gender from students s";
                var res = await conn.QueryAsync<Student>(sql);

                return Negotiate
                        .WithMediaRangeModel(new MediaRange("application/json"), res)
                        .WithMediaRangeModel(new MediaRange("application/xml"), res);
            }
        });

        Get("/{id}", async (_, ct) => { // Code removed for brevity. });

        Post("/", async (_, ct) =>
        {
            var student = this.Bind<Student>();
            using (IDbConnection conn = new SqliteConnection(_connStr))
            {
                conn.Open();
                var sql = @"insert into students(no,name,gender)
                            values (@no, @name, @gender)";
                var res = await conn.ExecuteAsync(sql, new
                {
                    no = student.No,
                    name = student.Name,
                    gender = student.Gender
                });

                if (res > 0)
                    return HttpStatusCode.Created;
                else
                    return HttpStatusCode.InternalServerError;
            }
        });

        Put("/", async (_, ct) => { // Code removed for brevity. });

        Delete("/{id}", async (_, ct) => { // Code removed for brevity. });
    }
}

As you can see, all the methods are asynchronous, which you may use in MVC like this.

[HttpGet]
public async Task<IActionResult> Index()
{
    await xxxx;
    return xxx;
}

After finishing the above job, we should ensure that the API is accessible. So, we need to run this project by the .NET CLI.   



When the terminal tells us that application has started, it means that the API project is running now.

Step #4 Build the Razor Pages

Add a new folder named Services in the website project which is used to handle the request of the APIs. 

The following code shows the IStudentService interface.

public interface IStudentService
{
    Task<IEnumerable<Student>> GetStudentListAsync();
    Task<Student> GetStudentByIdAsync(int id);
    Task<bool> AddStudentAsync(StudentCreateVM student);
    Task<bool> UpdateStudentAsync(Student student);
    Task<bool> DeleteStudentByIdAsync(int id);
}

The implementation of the above interface is as follows.

public class StudentService : IStudentService
{
    private HttpClient _client;
    public StudentService()
    {
        _client = new HttpClient();
        _client.BaseAddress = new Uri("http://localhost:59309/api/students");
        _client.DefaultRequestHeaders.Clear();
        _client.DefaultRequestHeaders.Add("Accept", "application/json");
    }

    public async Task<IEnumerable<Student>> GetStudentListAsync()
    {
        var resStr = await _client.GetStringAsync("");
        return JsonConvert.DeserializeObject<IEnumerable<Student>>(resStr);
}

    public async Task<bool> AddStudentAsync(StudentCreateVM student)
    {
        var pairs = new List<KeyValuePair<string, string>>
        {
            new KeyValuePair<string, string>("No", student.No),
            new KeyValuePair<string, string>("Name", student.Name),
            new KeyValuePair<string, string>("Gender", student.Gender),
        };
        var content = new FormUrlEncodedContent(pairs);
        var res = await _client.PostAsync("", content);
        return res.IsSuccessStatusCode;
}

    public async Task<Student> GetStudentByIdAsync(int id) { ... }
    public async Task<bool> UpdateStudentAsync(Student student) { ... }
    public async Task<bool> DeleteStudentByIdAsync(int id) { ... }

    ~ StudentService()
    {
        if (_client != null)
        {
            _client.Dispose();
        }
    }
}

Using the HttpClient to send requests to our API.

Remember to register the services in the Startup class; this is an important step.

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton(typeof(IStudentService),typeof(StudentService));
    services.AddMvc();
}

Now add a sub-folder named Students in the Pages folder.

Create a Razor Page to show all of the students.

Note

The Razor Page is similar to the web form, both of them are code-behind. But they are not the same! In Razor Page, we can use lots of features that we use in ASP.NET Core MVC, such as Model Binding, Tag Helper .etc. 

Here is the code of Index.cshtml .

@page
@model Pages.Students.IndexModel
@{
    ViewData["Title"] = "Index Page";
}
<h2>Student List Here</h2>
<hr />
<a asp-page="./Create">Create a new student</a>
<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>No</th>
            <th>Name</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.StudentList)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.No</td>
                <td>@item.Name</td>
                <td>@item.Gender</td>
                <td>
                    <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-page="./Edit" asp-route-id="@item.Id" >Edit</a>
                </td>
            </tr>
        }
</tbody>
</table>

There are many common points between MVC View Page and Razor Page. Both of them are based on Razor.

Razor Page must start with @page !

The Tag Helper asp-page is special in Razor, it will generate a URL based on the rule of Razor Pages.

Turn to the Index.cshtml.cs file.

public class IndexModel : PageModel
{
    private readonly IStudentService _studentService;
    public IndexModel(IStudentService studentService)
    {
        this._studentService = studentService;
    }

    public IEnumerable<Student> StudentList;

    public async Task OnGetAsync()
    {
        var _studentList = await _studentService.GetStudentListAsync();
        this.StudentList = _studentList;

        //the same as the following code
        //this.StudentList = await _studentService.GetStudentListAsync();
    }
}

As you can see , the IndexModel inherits from the PageModel which plays an important role in the Razor Pages.

Normally,  this file has some methods that start with On+Http Method, such as OnGet, OnPost. And some of them end with Async, which means this is an asynchronous method. 

For my above sample, I used an asynchronous method to load the student list when we open this page.

At this time, we have finished the index page of the Student. When running this project and entering http://yourdomain.com/Students on your browser, you may get a result like the following screenshot.

Then, we will add a Create Page to create some new students. 

Here is the code of Create.cshtml.

@page
@model Pages.Students.CreateModel

@{
    ViewData["Title"] = "Create Page";
}
<h2>Create</h2>
<h4>Student</h4><hr /><div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Student.No" class="control-label"></label>
                <input asp-for="Student.No" class="form-control" />
                <span asp-validation-for="Student.No" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Student.Name" class="control-label"></label>
                <input asp-for="Student.Name" class="form-control" />
                <span asp-validation-for="Student.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Student.Gender" class="control-label"></label>
                <input asp-for="Student.Gender" class="form-control" />
                <span asp-validation-for="Student.Gender" class="text-danger"></span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default">Save</button>
            </div>
        </form>
    </div></div>
<div>
    <a asp-page="Index">Back to List</a></div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

This is the code of the Create.cshtml.cs file.

public class CreateModel : PageModel
{
    private readonly IStudentService _studentService;
    public CreateModel(IStudentService studentService)
    {
        this._studentService = studentService;
    }

    [BindProperty]
    public StudentCreateVM Student { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
            return Page();

        var res = await _studentService.AddStudentAsync(this.Student);

        if (res)
            return RedirectToPage("./Index");
        else
            return Page();
    }
}

We do nothing in the OnGet method because when we open this page, it only show us a static page with a form that we can create a new student.

When we submit the form, it will call the OnPostAsync method in the cs file , because we set the create form with the post method!!

If we create the student successfully, it will redirect to the index page. Otherwise, it will keep stay in the create page.

Because we use the DataAnnotations in our model, when the input is not valid , it will show us the error message we define in the class.

The Student property uses [BindProperty] attribute to opt-in to model binding.

Now, we will turn to the edit page.

The code of the Edit.cshtml file.

@page "{id:int}"
@model Pages.Students.EditModel
@{
    ViewData["Title"] = "Edit Page";
}
<h2>Edit</h2>
<h4>Student</h4><hr /><div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Student.Id" />
            <div class="form-group">
                <label asp-for="Student.No" class="control-label"></label>
                <input asp-for="Student.No" class="form-control" />
                <span asp-validation-for="Student.No" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Student.Name" class="control-label"></label>
                <input asp-for="Student.Name" class="form-control" />
                <span asp-validation-for="Student.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Student.Gender" class="control-label"></label>
                <input asp-for="Student.Gender" class="form-control" />
                <span asp-validation-for="Student.Gender" class="text-danger"></span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-default">Save</button>
            </div>
        </form>
    </div></div>
<div>
    <a asp-page="./Index">Back to List</a></div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

You will find something new after the @page in the first line.

@page "{id:int}" means that the page accepts requests that contain int route data.

What @page "{id:int}" does is similar with [Route("users/{id:int}"] which you can see in the following code.

[Route("users/{id:int}"]public ActionResult GetUserById(int id) { ... }

The code of Edit.cshtml.cs file is similar with Create.cshtml.cs.

Because we add a constraint on the page, we need to add a parameter to the OnGetAsync method so that it can receive the parameter from the route.

public async Task<IActionResult> OnGetAsync(int? id) {...}

Summary

This article shows you a easy sample to learn Razor Pages in ASP.NET Core 2.0. However, there are lots of things I didn't mention in this article such as @functions , @namespace, multiple handlers and so on.

For more information on the Razor Pages, you can visit their official documentation at https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/