In this article I will explain with an example, how to update data in Database using Entity Framework Code First Approach in ASP.Net Core Razor Pages.
Note: If you want to learn about inserting data using Entity Framework Code First Approach, please refer my article ASP.Net Core Razor Pages: Insert Data into Database using Entity Framework Code First Approach.
 
 
Database
Following is the Customers Table generated using Entity Framework Code First Approach.
 
Generated Customers Table Schema
ASP.Net Core Razor Pages: Update Data in Database using Entity Framework Code First Approach
 
Records in Customers Table
ASP.Net Core Razor Pages: Update Data in Database using Entity Framework Code First Approach
 
 
Database Context
Following is the Table and Database Context classes.
Generated Table class
public partial class Customers
{
    [Key]
    public int CustomerId { get; set; }
 
    [Required]
    [StringLength(100)]
    public string Name { get; set; }
 
    [Required]
    [StringLength(50)]
    public string Country { get; set; }
}
 
Generated Database Context
public partial class CodeFirstContext : DbContext
{
    public CodeFirstContext()
    {
    }
 
    public CodeFirstContext(DbContextOptions<CodeFirstContext> options)
        : base(options)
    {
    }
 
    public virtual DbSet<Customers> Customers { get; set; }
 
    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        if (!optionsBuilder.IsConfigured)
        {
#warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
            optionsBuilder.UseSqlServer("Data Source=.\\SQL2019;Initial Catalog=CodeFirst;Trusted_Connection=True;");
        }
    }
 
    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Customers>(entity =>
        {
            entity.Property(e => e.Country).IsUnicode(false);
 
            entity.Property(e => e.Name).IsUnicode(false);
        });
    }
}
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following two Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
This Handler method accepts an object of the Customers Model class as parameter. The values posted from the Form inside the Razor Page are received through this parameter.
The CustomerId value of the received Customers Model object is used to reference the Customer record using Entity Framework Code First Approach.
Once the record is referenced, the values of Name and Country are updated and the changes are updated into the Customers table.
Finally, based on whether the reference of the Customer is found or not, an appropriate message is set in the ViewData object.
public class IndexModel : PageModel
{
    public Customers Customer { get; set; }
 
    public void OnGet()
    {          
    }
 
    public void OnPostSubmit(Customers customer)
    {
        using (CodeFirstContext context = new CodeFirstContext())
        {
            Customers updatedCustomer = (from c in context.Customers
                                        where c.CustomerId == customer.CustomerId
                                        select c).FirstOrDefault();
 
            if (updatedCustomer != null)
            {
                updatedCustomer.Name = customer.Name;
                updatedCustomer.Country = customer.Country;
                context.SaveChanges();
                ViewData["Message"] = "Customer record updated.";
            }
            else
            {
                ViewData["Message"] = "Customer not found.";
            }
        }
    }
}
 
 
Razor Page (HTML)
Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The Razor Page consists of an HTML Form which has been created using the ASP.Net TagHelpers attributes with the following attribute.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There are three TextBoxes created for capturing values of CustomerId, Name and Country.
There’s also a Submit Button at the end of the Form.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 
When the Update button is clicked, the values of CustomerId, Name and Country are passed to the Handler method.
Finally, the value of the ViewData object is checked for NULL and if it is not NULL then the value of the ViewData object is displayed using JavaScript Alert MessageBox.
@page
@model EF_CodeFirst_Update_Razor_Core.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 60px">
                    Id<br />
                    <input type="text" asp-for="Customer.CustomerId" style="width:50px" />
                </td>
                <tdstyle="width: 150px">
                    Name<br />
                    <input type="text" asp-for="Customer.Name" style="width: 140px" />
                </td>
                <tdstyle="width: 150px">
                    Country:<br/>
                    <input type="text" asp-for="Customer.Country" style="width: 140px" />
                </td>
                <td style="width: 200px">
                    <br />
                    <input type="submit" value="Update" asp-page-handler="Submit" />
                </td>
            </tr>
        </table>
    </form>
    @if (ViewData["Message"] != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert("@ViewData["Message"]");
            };
        </script>
    }
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Update Data in Database using Entity Framework Code First Approach
 
 
Downloads
Download Code