Edit view in asp.net core mvc

Suggested Videos
Part 52 - Keeping domain models and database schema in sync in asp.net core | Text | Slides
Part 53 - File upload in asp.net core mvc | Text | Slides
Part 54 - Upload multiple files in asp.net core mvc | Text | Slides

In this video we will discuss implementing Edit view to edit existing data.


We want to display existing employee data on edit view as shown in the image below. The user can then change the details and click the Update button to update the data in the underlying database.




In this video we will discuss implementing edit view and in our next video we will discuss updating the data. When the Cancel button is clicked, redirect the user to the list view.

Navigating to Edit View

The following is our List View. 



When the Edit button is clicked we want to redirect to the Edit view. In index.chtml modify the Edit anchor element as shown below.

<a asp-controller="home" asp-action="edit" asp-route-id="@employee.Id"

    class="btn btn-primary m-1">Edit</a>

Notice, we are using the following tag helpers to get to the Edit action in Home controller passing it the ID of the employee. 

• asp-controller
• asp-action
• asp-route-*

The above code generates an URL that looks like the following. Edit is the action method in the HomeController and the value 1 is the ID of the employee being edited.

http://localhost/home/edit/1

Edit View Model

In the ViewModels folder include the following EmployeeEditViewModel class

public class EmployeeEditViewModel : EmployeeCreateViewModel

{

    public int Id { get; set; }

    public string ExistingPhotoPath { get; set; }

}

For your reference here is the EmployeeCreateViewModel class

public class EmployeeCreateViewModel

{

    [Required]

    [MaxLength(50, ErrorMessage = "Name cannot exceed 50 characters")]

    public string Name { get; set; }

    [Required]

    [RegularExpression(@"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$",

        ErrorMessage = "Invalid Email Format")]

    [Display(Name = "Office Email")]

    public string Email { get; set; }

    [Required]

    public Dept? Department { get; set; }

    public IFormFile Photo { get; set; }

}

• This view model carries the data the Edit view needs
• EmployeeEditViewModel class derives from EmployeeCreateViewModel
• We used the inheritance approach in order not to duplicate code
• In addition to the properties we inherited from EmployeeCreateViewModel class, we also need employee Id and ExistingPhotoPath properties in the EmployeeEditViewModel.

Edit Action Method in the Home Controller

Include the following Edit action method in the HomeController

[HttpGet]

public ViewResult Edit(int id)

{

    Employee employee = _employeeRepository.GetEmployee(id);

    EmployeeEditViewModel employeeEditViewModel = new EmployeeEditViewModel

    {

        Id = employee.Id,

        Name = employee.Name,

        Email = employee.Email,

        Department = employee.Department,

        ExistingPhotoPath = employee.PhotoPath

    };

    return View(employeeEditViewModel);

}

• This Edit action method responds to the GET request.
• It uses the injected Employee Repository instance to retrieve the employee details
• Constructs the EmployeeEditViewModel instance and passes it to the Edit view

Edit View

The code is commented and self explanatory

@model EmployeeEditViewModel

@{

    ViewBag.Title = "Edit Employee";

    // Get the full path of the existing employee photo for display

    var photoPath = "~/images/" + (Model.ExistingPhotoPath ?? "noimage.jpg");

}

<form asp-controller="home" asp-action="edit" enctype="multipart/form-data" method="post" class="mt-3">

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

    </div>

    @*Use hidden input elements to store employee id and ExistingPhotoPath

        which we need when we submit the form and update data in the database*@

    <input hidden asp-for="Id" />

    <input hidden asp-for="ExistingPhotoPath" />

    @*Bind to the properties of the EmployeeEditViewModel. The asp-for tag helper

        takes care of displaying the existing data in the respective input elements*@

    <div class="form-group row">

        <label asp-for="Name" class="col-sm-2 col-form-label"></label>

        <div class="col-sm-10">

            <input asp-for="Name" class="form-control" placeholder="Name">

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

        </div>

    </div>

    <div class="form-group row">

        <label asp-for="Email" class="col-sm-2 col-form-label"></label>

        <div class="col-sm-10">

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

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

        </div>

    </div>

    <div class="form-group row">

        <label asp-for="Department" class="col-sm-2 col-form-label"></label>

        <div class="col-sm-10">

            <select asp-for="Department" class="custom-select mr-sm-2"

                    asp-items="Html.GetEnumSelectList<Dept>()">

                <option value="">Please Select</option>

            </select>

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

        </div>

    </div>

    <div class="form-group row">

        <label asp-for="Photo" class="col-sm-2 col-form-label"></label>

        <div class="col-sm-10">

            <div class="custom-file">

                <input asp-for="Photo" class="custom-file-input form-control">

                <label class="custom-file-label">Click here to change photo</label>

            </div>

        </div>

    </div>

    @*Display the existing employee photo*@

    <div class="form-group row col-sm-4 offset-4">

        <img class="imageThumbnail" src="@photoPath" asp-append-version="true" />

    </div>

    <div class="form-group row">

        <div class="col-sm-10">

            <button type="submit" class="btn btn-primary">Update</button>

            <a asp-action="index" asp-controller="home" class="btn btn-primary">Cancel</a>

        </div>

    </div>

    @section Scripts {

        <script>

            $(document).ready(function () {

                $('.custom-file-input').on("change", function () {

                    var fileName = $(this).val().split("\\").pop();

                    $(this).next('.custom-file-label').html(fileName);

                });

            });

        </script>

    }

</form>

Next Video : Implement Edit action that responds to HTTP Post and process the posted edit form.