Articles → ASP.NET CORE → Edit Page In Asp.Net Core
Edit Page In Asp.Net Core
Steps
- Add an edit button in the table.
- Create a new razor page "Edit".
- Inside the edit page, add the logic to get the data in "OnGet" method.
- Add a logic to update data in the "OnPost" method.
Code
@page
@model BookManagementSystem.Pages.Books.BooksModel
@{
ViewData["Title"] = "Books";
}
<h1>Books</h1>
<form method="post">
<div class="col-4">
<a asp-page="Create" class="btn btn-info form-control text-white"> Create new book</a>
</div>
<div class="col-12 m-1">
@if (Model.Books.Count() > 0)
{
<table border="1">
<tr>
<th>
Name
</th>
<th>
Author
</th>
<th>
Edit
</th>
</tr>
@foreach (var item in Model.Books)
{
<tr>
<td>
@Html.DisplayFor(m => item.Name)
</td>
<td>
@Html.DisplayFor(m => item.Author)
</td>
<td>
<a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success">Edit</a>
</td>
</tr>
}
</table>
}
</div>
</form>
@page
@model BookManagementSystem.Pages.Books.EditModel
<div class="border container" style="padding:30px">
<form method="post">
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<input type="hidden" asp-for="MyBook.Id" />
<div class="form-group row">
<div class="col-3">
<label asp-for="MyBook.Name"></label>
</div>
<div class="col-5">
<input asp-for="MyBook.Name" class="form-control" />
</div>
<div class="col-4">
<span asp-validation-for="MyBook.Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="MyBook.Author"></label>
</div>
<div class="col-5">
<input asp-for="MyBook.Author" class="form-control" />
</div>
<div class="col-4">
<span asp-validation-for="MyBook.Author" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-4">
<input type="submit" value="Update" class="btn btn-primary form-control" />
</div>
</div>
</form>
</div>
@section Scripts{
<partial name="_ValidationScriptsPartial" />
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BookManagementSystem.Model;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace BookManagementSystem.Pages.Books {
public class EditModel: PageModel {
private readonly ApplicationDbContext _db;
public EditModel(ApplicationDbContext db) {
_db = db;
}
[BindProperty]
public Book MyBook {
get;
set;
}
public async Task OnGet(int id) {
MyBook = await _db.Book.FindAsync(id);
}
public async Task < IActionResult > OnPost() {
if (ModelState.IsValid) {
var BookMyDB = await _db.Book.FindAsync(MyBook.Id);
BookMyDB.Name = MyBook.Name;
BookMyDB.Author = MyBook.Author;
await _db.SaveChangesAsync();
return RedirectToPage("Books");
} else {
return Page();
}
}
}
}
Output
Click to Enlarge