Updating data in asp.net core razor pages

Suggested Videos
Part 12 - ASP.NET core custom route constraint | Text | Slides
Part 13 - Handling 404 error in razor pages project | Text | Slides
Part 14 - Editing data in asp.net core razor pages | Text | Slides

In this video we will discuss updating data on the server by posting the razor page back to the server. This is continuation to Part 14. Please watch Part 14 from ASP.NET Core razor pages tutorial.


IEmployeeRepository Service Interface

In IEmployeeRepository service interface, include Update() method. Notice this method returns Employee object. This is the updated Employee. In most real world applications, it is common to have some properties updated automatically. For example, last updated date. For properties like this, we do not usually provide data from the user interface. It is either automatically computed by the web server or the database server. By returning the updated Employee object, we will have access to those updated properties.

namespace RazorPagesTutorial.Services
{
    public interface IEmployeeRepository
    {
        IEnumerable<Employee> GetAllEmployees();
        Employee GetEmployee(int id);
        Employee Update(Employee updatedEmployee);
    }
}

MockEmployeeRepository Service 

Include the following Update() method in the MockEmployeeRepository Service.

public Employee Update(Employee updatedEmployee)
{
    Employee employee = _employeeList
        .FirstOrDefault(e => e.Id == updatedEmployee.Id);
    if (employee != null)
    {
        employee.Name = updatedEmployee.Name;
        employee.Email = updatedEmployee.Email;
        employee.Department = updatedEmployee.Department;
    }
    return employee;
}

Edit.cshtml.cs

1. Include the following OnPost() method in Edit.cshtml.cs
2. OnGet() handles GET request and OnPost() handles POST request
3. Model binding in ASP.NET Core automatically maps the posted form values to the Employee method parameter
4. We use this approach when the posted form values are not needed outside of the OnPost() handler method
5. After the data is updated, redirect the request to the Index razor page, so we can see the updated changes

public IActionResult OnPost(Employee employee)
{
    Employee = employeeRepository.Update(employee);
    return RedirectToPage("Index");
}

BindProperty Attribute

1. You could also achieve the same thing using BindProperty attribute.
2. This attribute automatically binds the posted form values to the Employee public property.
3. We use this approach if we need to access the posted form values outside of the OnPost() handler method.

[BindProperty]
public Employee Employee { get; set; }

public IActionResult OnPost()
{
    Employee = employeeRepository.Update(Employee);
    return RedirectToPage("Index");
}