Starting with Asp.Net Core using Visual Studio to Edit Employee

In this post I will show you how to Edit Employee using EntityFrameworkCore in Asp.Net Core 1.1 with client side validation.
Previously I had show the series of How to...

• 01 - Starting with Asp.Net Core using Visual Studio
• 02 - Starting with Asp.Net Core using Visual Studio to Display Employee List
• 03 - Starting with Asp.Net Core using Visual Studio to Insert New Employee

Continuing the previous post
03 - Starting with Asp.Net Core using Visual Studio to Insert New Employee

In the Index.cshtml page ADD ActionLink to Edit in the tbody as shown

  

    @Html.ActionLink("Edit","Edit",new { id = item.Id})

In the ADD.cshtml file change the Html.BeginForm(), add a hiddenfield for Primark Key and add id to submit button. The entire code looks as shown

  

@model AspDotNetCore.Models.Employees
@{
    ViewData["Title"] = "ADD Employee";
}
@using (Html.BeginForm("ADD", null, FormMethod.Post))
{
    <br />
    <div class="form-horizontal">
        <div class="form-group">
            @Html.HiddenFor(model => model.Id)
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Salary, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Salary, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Salary, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Doj, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Doj, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Doj, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.DeptId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DeptId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DeptId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="btnSubmit" value="Save" class="btn btn-primary" />
            </div>
        </div>
    </div>
}
@section Scripts {
    <script>
        $(document).ready(function () {

            if ($('#Id').val() != "") {
                $('#btnSubmit').val('Update');
            }

            $('#Doj').datepicker({
                //format: 'dd-mm-yyyy',
                format: 'mm/dd/yyyy',
                autoclose: true,
                clearBtn: true,
                todayHighlight: true,
                todayBtn: true,
                //todayBtn: 'linked',
                orientation: "bottom left"
            });
        });
    </script>
}

In the HomeController replace ADD method with the below code

  

[HttpPost]
public IActionResult ADD(Employees emp)
{
 if (emp.Id == 0)
  ModelState.Remove("Id");
 if (ModelState.IsValid)
 {
  using (EmployeeDBContext ent = new EmployeeDBContext ())
  {
   if (emp.Id > 0)
    ent.Entry(emp).State = Microsoft.EntityFrameworkCore.EntityState.Modified;
   else
    ent.Employees.Add(emp);
   ent.SaveChanges();
   return RedirectToAction("Index");
  }                
 }
 return View();
}

Now ADD another method for Edit as shown

  

[HttpGet]
public IActionResult Edit(int ID)
{
 try
 {
  using (EmployeeDBContext ent = new EmployeeDBContext ())
  {
   Employees emp = ent.Employees.FirstOrDefault(x=>x.Id==ID);
   if (emp != null)
    return View("ADD", emp);
   else
    return NotFound();
  }
 }
 catch (Exception ex)
 {
  string Msg = ex.Message;
  return NotFound();
 }
}

In Employees.cs file ADD this DataAnnotation for Date Format

  

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]

Press F5 to check Edit is working or not.