Inserting Data into SQL Server Database Using ASP.NET Core 3 Razor Pages

Introduction

 

This article is a continuation of the article, “Creating Page Model And Performing CRUD Operations In ASP.NET Core 3 Razor Pages”. In this article, we will be creating a razor page to implement the create functionality of crud operations. 

 

Creating a Razor page

 

First, we have to create a new razor page. In order to create a new razor page, right-click on the BookList folder. Click on the Add option. Then click on the razor page option to open the “Add New Scaffolded Item” window. Select the Razor Page option, then click on Add button to add a new razor page.

 

 

 

Inside the 'Add Razor Page' window, write the name of the razor page. Select options, then Generate Page Model class and use a layout page. Click on the 'Add' button. Then, the create razor page will be created.

 

 

 

When the page loads, we want to display text boxes so that the user can enter a book name and author name.

 

So we need Application Db Context in order to post data to the database when the user clicks the create button. Declare an object of type Application Db Context. Now, create a constructor and pass Application Db Context object as a parameter to the constructor.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BookList.Model;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace BookList
{
    public class CreateModel : PageModel
    {
        private readonly ApplicationDbContext _db;

        public CreateModel(ApplicationDbContext db)
        {
            _db = db;
        }

    }
}

Inside the get handler method, we need to display text boxes to write the author's name and book name.

 

The model which we will be using is going to be the Book model. Inside OnGet handler method, we do not have to write that we are passing this empty book object since it does that automatically.

 

Therefore, inside the create view, we will be able to access the book object and display labels as well as text boxes. Inside the Book model let’s add a new property called ISBN along with getter and setter.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace BookList.Model
{
    public class Book
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        public string Author { get; set; }

        public string ISBN { get; set; }

    }
}

Since we have modified the Book model, we have to add a new migration.

 

To add migration, go to Tools, Click on Nuget Package Manager and then click on Package Manager Console. Inside Package Manager Console, type add-migration AddISBNToBookModel.

 

 

To make changes inside the SQL server database, type command update-database. 

 

This is how a new column will be added inside the table in order to changes to the model that we already added. Next, we need to change the Ind.cshml file accordingly.

 

You must design a create razor page inside the create.cshtml file.

@page
@model BookList.CreateModel

<br />
<h2 class="text-info">Create New Book</h2>
<br />

<div class="border container" style="padding:30px;">
    <form method="post">
        <div class="form-group row">
            <div class="col-4">
                <label asp-for="Book.Name"></label>
            </div>
            <div class="col-6">
                <input asp-for="Book.Name" class="form-control" />
            </div>
        </div>

        <div class="form-group row">
            <div class="col-4">
                <label asp-for="Book.Author"></label>
            </div>
            <div class="col-6">
                <input asp-for="Book.Author" class="form-control" />
            </div>
        </div>

        <div class="form-group row">
            <div class="col-4">
                <label asp-for="Book.ISBN"></label>
            </div>
            <div class="col-6">
                <input asp-for="Book.ISBN" class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-3 offset-4">
                <input type="submit" value="Create" class="btn btn-primary form-control" />
            </div>
            <div class="col-3">
                <a asp-page="Ind" class="btn btn-success form-control">Back to List</a>
            </div>
        </div>
    </form>
</div>

We need to create a post handler for create button since when we hit the create button, we are posting data back to the page handler. Now we need to add a post handler so that whenever we submit the data from the page, it's submitted to the database.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BookList.Model;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace BookList
{
    public class CreateModel : PageModel
    {
        private readonly ApplicationDbContext _db;

        public CreateModel(ApplicationDbContext db)
        {
            _db = db;
        }

        [BindProperty]
        public Book Book { get; set; }
        public void OnGet()
        {

        }

        public async Task<IActionResult> OnPost()
        {
            if(ModelState.IsValid)
            {
                await _db.Book.AddAsync(Book);
                await _db.SaveChangesAsync();
                return RedirectToPage("Ind");

            }
            else
            {
                return Page();
            }
        }
    }
}

Inside the Create.cshtml.cs file, OnGet handler is available but when we will hit the submit button, we will be posting data so we need a post handler named OnPost to retrieve the submitted data.

 

The Task will be of type IActionResult because we will be redirecting to a new page. After we add the book, we need to save changes to the database.

 

After running the application on the browser, the new razor view will look like shown in the following image.

 

 

 

After inserting a record inside the database, the table would look like the below image.

 

 

 

And the book table inside the SQL server database will be updated with more rows.

 

 

 

Summary

 

In this article, we have created a new property named ISBN inside Book model class, then we updated the database table by adding and updating the migrations command. We created a razor view page and added a post handler. This way, whenever we submit the data from the page, it should be submitted to the database. I will be discussing the remaining functionalities of crud operation in the upcoming articles.