ASP.NET Core MVC 2022 - 11. Edit Page

Introduction

This tutorial will guide you through the process of creating and managing an Edit Page in an ASP.NET Core MVC application using .NET 6. You'll learn how to set up the Edit functionality for your models, allowing users to update existing records efficiently. This is essential for any web application where user data management is required.

Step 1: Set Up the Edit Page

1. Create the Edit View

   • Navigate to the Views folder in your project.
   • Inside the relevant controller's folder, create a new file named Edit.cshtml.
   • Use the following basic structure for your Edit view:

     @model YourNamespace.Models.YourModel
     
     <h1>Edit</h1>
     
     <form asp-action="Edit">
         <div class="form-group">
             <label asp-for="PropertyName" class="control-label"></label>
             <input asp-for="PropertyName" class="form-control" />
             <span asp-validation-for="PropertyName" class="text-danger"></span>
         </div>
         <input type="submit" value="Save" class="btn btn-primary" />
     </form>
     

2. Add Validation

   • Ensure that your model has validation attributes to enforce rules on input.
   • Example:

     public class YourModel
     {
         public int Id { get; set; }
     
         [Required]
         public string PropertyName { get; set; }
     }
     

Step 2: Create the Edit Action in the Controller

1. Modify the Controller

   • Open the relevant controller (e.g., YourModelController).
   • Add the following action methods:

     public async Task<IActionResult> Edit(int id)
     {
         var model = await _context.YourModels.FindAsync(id);
         if (model == null) return NotFound();
         return View(model);
     }
     
     [HttpPost]
     [ValidateAntiForgeryToken]
     public async Task<IActionResult> Edit(int id, YourModel model)
     {
         if (id != model.Id) return NotFound();
     
         if (ModelState.IsValid)
         {
             try
             {
                 _context.Update(model);
                 await _context.SaveChangesAsync();
             }
             catch (DbUpdateConcurrencyException)
             {
                 if (!YourModelExists(model.Id)) return NotFound();
                 throw;
             }
             return RedirectToAction(nameof(Index));
         }
         return View(model);
     }
     

2. Handling Concurrency

   • Implement a method to check if the model exists before updating:

     private bool YourModelExists(int id)
     {
         return _context.YourModels.Any(e => e.Id == id);
     }
     

Step 3: Update the Navigation

1. Add Links to the Edit Page
   • In your Index view or wherever you list your models, add an Edit link:

     @foreach (var item in Model)
     {
         <tr>
             <td>@item.PropertyName</td>
             <td>
                 <a asp-action="Edit" asp-route-id="@item.Id">Edit</a>
             </td>
         </tr>
     }
     

Step 4: Test the Edit Functionality

1. Run the Application
   • Start your application and navigate to the list of records.
   • Click on the Edit link for one of the records.
   • Modify the fields in the Edit form and submit.
   • Confirm that the changes are reflected in the list after saving.

Conclusion

You've successfully created an Edit Page in your ASP.NET Core MVC application. By following these steps, users can now update existing records seamlessly. For further enhancements, consider adding client-side validation and better error handling to improve user experience. Explore other functionalities such as creating and deleting records to build a fully functional application.