Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Editing data in core razor pages

Suggested Videos
Part 11 - Route constraints in core | Text | Slides
Part 12 - ASP.NET core custom route constraint | Text | Slides
Part 13 - Handling 404 error in razor pages project | Text | Slides

In this video we will discuss implementing Edit razor page.

Navigate to Edit razor page

When the Edit button on the employees list razor page (/Employees/Index.cshtml) is clicked, we want to redirect the request to Edit razor page (/Employees/Edit.cshtml) core razor pages edit button click

<a asp-page="/Employees/Edit" asp-route-ID="@employee.Id"
    class="btn btn-primary m-1">Edit</a>

Edit razor page

Add a new razor page to the Employees folder. Name it Edit.cshtml. From design standpoint, Edit razor page should look as shown below. Use a textbox to edit emplyee NAME and EMAIL and a select list for DEPARTMENT. core razor pages edit form


using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesTutorial.Models;
using RazorPagesTutorial.Services;

namespace RazorPagesTutorial.Pages.Employees
    public class EditModel : PageModel
        private readonly IEmployeeRepository employeeRepository;

        public EditModel(IEmployeeRepository employeeRepository)
            this.employeeRepository = employeeRepository;

        // This is the property the display template will use to
        // display existing Employee data
        public Employee Employee { get; private set; }

        // Populate Employee property
        public IActionResult OnGet(int id)
            Employee = employeeRepository.GetEmployee(id);

            if (Employee == null)
                return RedirectToPage("/NotFound");

            return Page();


If you are new to tag helpers we discussed them in detail from Parts 35 to 40 in our ASP.NET Core tutorial for beginners course.

@page "{id:min(1)}"
@model RazorPagesTutorial.Pages.Employees.EditModel
    ViewData["Title"] = "Edit";


<form method="post" class="mt-3">
    @*Use hidden input elements to store employee id which
        we need when we submit the form*@
    <input hidden asp-for="Employee.Id" />

    @*asp-for tag helper takes care of displaying the existing
        data in the respective input elements*@
    <div class="form-group row">
        <label asp-for="Employee.Name" class="col-sm-2 col-form-label">
        <div class="col-sm-10">
            <input asp-for="Employee.Name" class="form-control" placeholder="Name">
    <div class="form-group row">
        <label asp-for="Employee.Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Employee.Email" class="form-control" placeholder="Email">

    <div class="form-group row">
        <label asp-for="Employee.Department" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <select asp-for="Employee.Department" class="custom-select mr-sm-2"
                <option value="">Please Select</option>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Update</button>
            <a asp-page="/Employees/Index" class="btn btn-primary">Cancel</a>

Changes in _ViewImports.cshtml

Include the following using declaration.

@using RazorPagesTutorial.Models core razor pages tutorial

No comments:

Post a Comment

It would be great if you can help share these free resources