Articles → ASP.NET CORE → Edit Page In ASP.NET Core

Edit Page In ASP.NET Core






Steps




  1. Add an edit button in the table.
  2. Create a new Razor page "Edit".
  3. On the edit page, add the logic to retrieve the data in the "OnGet" method.
  4. Add 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


Picture showing a page to edit the record in asp.net core
Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Thursday, April 1, 2021

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250