mithilesh kumar singh: Crud operation with razor pages in asp.net core 3.1 and Sql Database

Hi, Today I am going to perform crud operation with razor pages in asp.net core 3.1 and SQL Database.Here we will create a register user page, details user page and edit user page and also we will follow the code first approach with data migration.We will check validation of the fields. Now Let's see step by step.

Note: I hope you have installed 2019 visual studio.

Introduction

Razor Page is a new feature of ASP.NET Core MVC that makes coding page-focused scenarios easier and more productive
Razor pages is not just for simple scenarios, everything that you can do with MVC you can do by using Razor pages like Routing, Models, ActionResult, Tag Helpers and so on.
Razor Page have two parts

Razor Page(UI/View)
Page Model(Contains Handlers)

Look our final output

Step 1: Create a project

Open visual studio and click on create a new project

Select ASP.NET Core Web Application and Click on next button

Now give the project name and click on create button

Select core 3.1 and select Web Application and click on create button

Step 2: Install necessary Package from NuGet Package manager

Right click on project and select NuGet Package Manager and install bellow library mentioned in below

Step 3: Adding Connection string

Open appsettings.json add SQL connection string

Step 4: Creating model class and DbContext class

Right click our root project folder and add a folder and give the folder and name Model.

In side the Model we will add two classes one is our model class and another is DbContext class. Right click on Model folder and a class.

User.cs

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Threading.Tasks;

namespace CRUDExamCor.Model

{

public class User

{

[Key]

public int UserId { get; set; }

[Required]

public string UserName { get; set; }

[Required]

public string EmailId { get; set; }

[Required]

public string Address { get; set; }

[Required]

public string Mobile { get; set; }

[Required]

public string PinCode { get; set; }

}

Again Right click on Model folder and a class.

UserDBContext.cs

using Microsoft.EntityFrameworkCore;

namespace CRUDExamCor.Model

{

public class UserDBContext : DbContext

{

public UserDBContext(DbContextOptions<UserDBContext> options) : base(options)

{

}

public DbSet<User> users { get; set; }

}

Step 5: Generating database

Go to Tool option in visual studio -> Select NuGet Package Package Manager -> Package Manager Console

Now write below command in cmd

Add-Migration UserListDettails

after complete again run below command

update-database

Now open sql server and check newly created database and table

Step 6: Adding the functionality for user details

Go in Page folder and add a new folder UserList

Right click on UserList folder -> Select Add option -> Select Razor Page -> Again select Razor page on top and click Add button

Expand the Index.cshtml and open Index.cshtml.cs class and write below code for Bind the user details

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using CRUDExamCor.Model;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.EntityFrameworkCore;

namespace CRUDExamCor

{

public class IndexModel : PageModel

{

private readonly UserDBContext _objEntity;

public IndexModel(UserDBContext objEntity)

{

_objEntity = objEntity;

}

public IEnumerable<User> users { get; set; }

public async Task OnGetAsync()

{

users = await _objEntity.users.ToListAsync();

}

public async Task<IActionResult> OnPostDelete(int id)

{

var book = await _objEntity.users.FindAsync(id);

if(book == null)

{

return NotFound();

}

_objEntity.users.Remove(book);

await _objEntity.SaveChangesAsync();

return RedirectToPage("Index");

}

Now open Index.cshtml and razor view code

@page

@model CRUDExamCor.IndexModel

<br />

</div>

<a asp-page="Create" class="btn btn-info form-control text-white">Create New User</a>

</div>

@if (Model.users.Count() > 0)

{

<th>

</th>

<th>

</th>

<th>

</th>

<th>

</th>

<th>

</th>

<th>

Action

</th>

</tr>

@foreach (var item in Model.users)

{

<tr>

<td>

@Html.DisplayFor(m => item.UserName)

</td>

<td>

@Html.DisplayFor(m => item.EmailId)

</td>

<td>

@Html.DisplayFor(m => item.Address)

</td>

<td>

@Html.DisplayFor(m => item.Mobile)

</td>

<td>

@Html.DisplayFor(m => item.PinCode)

</td>

<td>

<button asp-page-handler="Delete" asp-route-id="@item.UserId" onclick="return confirm('Are you sure do you want to delete?')" class="btn btn-danger btn-sm">Delete</button>

Edit

</a>

</td>

</tr>

}

</table>

}

else

{

<p>

No data available.

</p>

}

</form>

</div>

Now open the shared folder and open _Layout.cshtml page and add the code for navigation the page

<!DOCTYPE html>

<head>

<title>@ViewData["Title"] - CRUDExamCor</title>

</head>

<body>

<a class="navbar-brand" asp-area="" asp-page="/Index">CRUDExamCor</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"

aria-expanded="false" aria-label="Toggle navigation">

</button>

</li>

</li>

</ul>

</div>

</nav>

</header>

@RenderBody()

</main>

</div>

</div>

</footer>

@RenderSection("Scripts", required: false)

</body>

</html>

We have completed the functionality for bind the user details

Now run the application and see the result

Step 7: Adding the functionality for Add User

Right click on UserList folder -> Select Add option -> Select Razor Page -> Again select Razor page on top and click Add button

Give the name as Create

Expand the Create.cshtml and open Create.cshtml.cs class and write below code for Add the user details

using System.Threading.Tasks;

using CRUDExamCor.Model;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CRUDExamCor

{

public class CreateModel : PageModel

{

private readonly UserDBContext _objEntity;

public CreateModel(UserDBContext objEntity)

{

_objEntity = objEntity;

}

[BindProperty]

public User user { get; set; }

public void OnGet()

{

}

public async Task<IActionResult> OnPost()

{

if (ModelState.IsValid)

{

await _objEntity.users.AddAsync(user);

await _objEntity.SaveChangesAsync();

return RedirectToPage("Index");

}

else

{

return Page();

}

Now open Create.cshtml and razor view code

@page

@model CRUDExamCor.CreateModel

ViewData["Title"] = "Create";

}

<br />

Create New User

</h2>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

@section Scripts{

<partial name="_ValidationScriptsPartial" />

}

We have completed the functionality for Add the user details

Now run the application and click create new user button and add details

Step 8: Adding the functionality for Edit User

Right click on UserList folder -> Select Add option -> Select Razor Page -> Again select Razor page on top and click Add button

Give the name as Edit

Expand the Edit.cshtml and open Edit.cshtml.cs class and write below code for Edit the user details

using System.Threading.Tasks;

using CRUDExamCor.Model;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CRUDExamCor

{

    public class EditModel : PageModel

    {

        private UserDBContext _objEntity;

        public EditModel(UserDBContext objEntity)

        {

            _objEntity = objEntity;

        }

        [BindProperty]

        public User user { get; set; }

        public async void OnGet(int id)

        {

            user = await _objEntity.users.FindAsync(id);

        }

        public async Task<IActionResult> OnPost()

        {

            if(ModelState.IsValid)

            {

                var objUser = await _objEntity.users.FindAsync(user.UserId);

                objUser.UserName = user.UserName;

                objUser.EmailId = user.EmailId;

                objUser.Address = user.Address;

                objUser.Mobile = user.Mobile;

                objUser.PinCode = user.PinCode;

                await _objEntity.SaveChangesAsync();

                return RedirectToPage("Index");

            }

            return RedirectToPage();

        }

    }

}

Now open Edit.cshtml and razor view code

@page

@model CRUDExamCor.EditModel

@{

    ViewData["Title"] = "Edit";

}

<h1>Edit</h1>

<div class="border container" style="padding:30px">

    <form method="post">

        <div class="text-danger" asp-validation-summary="ModelOnly"></div>

        <input type="hidden" asp-for="user.UserId" />

        <div class="form-group row">

            <div class="col-4">

                <label asp-for="user.UserName"></label>

            </div>

            <div class="col-6">

                <input asp-for="user.UserName" class="form-control" />

                <span asp-validation-for="user.UserName" class="text-danger"></span>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-4">

                <label asp-for="user.EmailId"></label>

            </div>

            <div class="col-6">

                <input asp-for="user.EmailId" class="form-control" />

                <span asp-validation-for="user.EmailId" class="text-danger"></span>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-4">

                <label asp-for="user.Address"></label>

            </div>

            <div class="col-6">

                <input asp-for="user.Address" class="form-control" />

                <span asp-validation-for="user.Address" class="text-danger"></span>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-4">

                <label asp-for="user.Mobile"></label>

            </div>

            <div class="col-6">

                <input asp-for="user.Mobile" class="form-control" />

                <span asp-validation-for="user.Mobile" class="text-danger"></span>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-4">

                <label asp-for="user.PinCode"></label>

            </div>

            <div class="col-6">

                <input asp-for="user.PinCode" class="form-control" />

                <span asp-validation-for="user.PinCode" class="text-danger"></span>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-3 offset-4">

                <input type="submit" value="Update" class="btn btn-primary form-control" />

            </div>

            <div class="col-3">

                <a asp-page="Index" class="btn btn-success form-control">Back to List</a>

            </div>

        </div>

    </form>

</div>

@section Scripts{

    <partial name="_ValidationScriptsPartial" />

}

We have completed the functionality for Edit the user details

Now run the application and click Edit button and add details

So finally we have completed display,add,update and delete functionality Delete functionality code, I have already added in Index.cshtml page

Thank you and always welcome to any feedback