Creating an Edit view and display data using EF Core

In the previous post we saw on how to create a Details view using Asp.Net Core MVC and Entity Framework Core and display the details of an users from the Users table in SQL Server database. In this post we will create an Edit view which will be used to edit the user details.

Remember we had an Edit action link in the list this view will be linked to the Edit link, on clicking the Edit link against a user will trigger the Edit action method in the controller which in turn will get the user details from the DB using Entity Framework Core and pass on the Model object to the View to render the user details in the browser, which can be edited and saved.

Edit and Save will use 2 different action methods a GET and A POST action method, the GET method will get the user details from the DB and the POST method will be used to save the details back to the DB.

public async Task<IActionResult> Edit(int? id)

{

    if (id == null)

    {

        return NotFound();

    }

    var users = await _context.Users.FindAsync(id);

    if (users == null)

    {

        return NotFound();

    }

    return View(users);

}

[HttpPost]

[ValidateAntiForgeryToken]

public async Task<IActionResult> Edit(int id, [Bind("UserId,FirstName,LastName,Phone,Email,Address,AttachmentPath")] Users users)

{

    if (id != users.UserId)

    {

        return NotFound();

    }

    if (ModelState.IsValid)

    {

        try

        {

            _context.Update(users);

            await _context.SaveChangesAsync();

        }

        catch (DbUpdateConcurrencyException)

        {

            if (!UsersExists(users.UserId))

            {

                return NotFound();

            }

            else

            {

                throw;

            }

        }

        return RedirectToAction(nameof(Index));

    }

    return View(users);

}

Follow the below steps to create a Edit View template.

Right click on the Index method and select Add View
In Templates select Edit
In Data context class select our EFCore DBContext – UserRegistrationContext
In Model class select Users
Click on Add, this will generate a new view file Edit.cshtml

@model HelloMVC.Models.EFCoreModel.Users

@{

    ViewData["Title"] = "Edit";

}

<h4>Users - Edit</h4>

<hr />

<div class="row">

    <div class="col-md-4">

        <form asp-action="Edit">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input type="hidden" asp-for="UserId" />

            <div class="form-group">

                <label asp-for="FirstName" class="control-label"></label>

                <input asp-for="FirstName" class="form-control" />

                <span asp-validation-for="FirstName" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="LastName" class="control-label"></label>

                <input asp-for="LastName" class="form-control" />

                <span asp-validation-for="LastName" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Phone" class="control-label"></label>

                <input asp-for="Phone" class="form-control" />

                <span asp-validation-for="Phone" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Email" class="control-label"></label>

                <input asp-for="Email" class="form-control" />

                <span asp-validation-for="Email" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Address" class="control-label"></label>

                <input asp-for="Address" class="form-control" />

                <span asp-validation-for="Address" class="text-danger"></span>

            </div>

            <div class="form-group">

                <input type="submit" value="Save" class="btn btn-primary" />

            </div>

        </form>

    </div>

</div>

<div>

    <a asp-action="Index">Back to List</a>

</div>

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Build and run the Project, in the List page click on the Edit link against a user, this will the new Edit view we just created, we can change the user details and save it.