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. Inside the edit page, add the logic to get the data in "OnGet" method.
  4. 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


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