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