httppost edit action in asp.net core mvc

Suggested Videos
Part 53 - File upload in asp.net core mvc | Text | Slides
Part 54 - Upload multiple files in asp.net core mvc | Text | Slides
Part 55 - Edit view in asp.net core mvc | Text | Slides

In this video we will discuss how to handle and process the posted edit view. So in short, we want to implement Edit action that responds to HttpPost. 


This is continuation to Part 55. Please watch Part 55 from ASP.NET core tutorial before proceeding.

When the following Edit view is posted to the server by clicking the Update button, we want to handle and process the posted form data.




HttpPost Edit Action

The following is the Edit action that handles the posted Edit view. The code is explained using comments where needed.

// Through model binding, the action method parameter

// EmployeeEditViewModel receives the posted edit form data

[HttpPost]

public IActionResult Edit(EmployeeEditViewModel model)

{

    // Check if the provided data is valid, if not rerender the edit view

    // so the user can correct and resubmit the edit form

    if (ModelState.IsValid)

    {

        // Retrieve the employee being edited from the database

        Employee employee = _employeeRepository.GetEmployee(model.Id);

        // Update the employee object with the data in the model object

        employee.Name = model.Name;

        employee.Email = model.Email;

        employee.Department = model.Department;

        // If the user wants to change the photo, a new photo will be

        // uploaded and the Photo property on the model object receives

        // the uploaded photo. If the Photo property is null, user did

        // not upload a new photo and keeps his existing photo

        if (model.Photo != null)

        {

            // If a new photo is uploaded, the existing photo must be

            // deleted. So check if there is an existing photo and delete

            if (model.ExistingPhotoPath != null)

            {

                string filePath = Path.Combine(hostingEnvironment.WebRootPath,

                    "images", model.ExistingPhotoPath);

                System.IO.File.Delete(filePath);

            }

            // Save the new photo in wwwroot/images folder and update

            // PhotoPath property of the employee object which will be

            // eventually saved in the database

            employee.PhotoPath = ProcessUploadedFile(model);

        }

        // Call update method on the repository service passing it the

        // employee object to update the data in the database table

        Employee updatedEmployee = _employeeRepository.Update(employee);

        return RedirectToAction("index");

    }

    return View(model);

}

The following is the private ProcessUploadedFile() method which saves the photo in wwwroot/images folder and returns the unique file name. This file name is then assigned as the value for the PhotoPath on the employee object which will eventually be saved in the database.

private string ProcessUploadedFile(EmployeeCreateViewModel model)

{

    string uniqueFileName = null;

    if (model.Photo != null)

    {

        string uploadsFolder = Path.Combine(hostingEnvironment.WebRootPath, "images");

        uniqueFileName = Guid.NewGuid().ToString() + "_" + model.Photo.FileName;

        string filePath = Path.Combine(uploadsFolder, uniqueFileName);

        using (var fileStream = new FileStream(filePath, FileMode.Create))

        {

            model.Photo.CopyTo(fileStream);

        }

    }

    return uniqueFileName;

}