Starting with Asp.Net Core using Visual Studio to Insert New Employee

In this post I will show how to insert a New Record using EntityFrameworkCore in Asp.Net Core 1.1 with client side validation.
In the Previous Posts I had shown how to...

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

Continuing previous post
02 - Starting with Asp.Net Core using Visual Studio to Display Employee List

Add a New View and Name it as ADD.cshtml

  

@model AspDotNetCore.Models.Employees
@{
    ViewData["Title"] = "ADD Employee";
}
@using (Html.BeginForm())
{
    <br />
    <div class="form-horizontal">
        <div class="form-group">
            @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" value="Save" class="btn btn-primary" />
            </div>
        </div>
    </div>
}
@section Scripts {
    <script>
        $(document).ready(function () {

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

To display DatePicker add the following plugin bootstrap-datepicker.js and its css bootstrap-datepicker3.css and refer them in _layout.cshtml page Now in the HomeController add the following two IactionResults as shown

  

public IActionResult ADD()
{
 return View();
}

[HttpPost]
public IActionResult ADD(Employees emp)
{
 if (ModelState.IsValid)
 {
  using (EmployeeDBContext ent = new EmployeeDBContext ())
  {
   ent.Employees.Add(emp);
   ent.SaveChanges();
   return RedirectToAction("Index");
  }                
 }
 return View();
}

In the View the column names are not as proper, so lets change or Add attributes as shown. Just replace Employye.cs class from Models folder as shown.

  

public partial class Employees
{
 public int Id { get; set; }

 [Required]
 [Display(Name ="First Name")]
 public string FirstName { get; set; }

 [Required]
 [Display(Name = "Last Name")]
 public string LastName { get; set; }

 [Required]
 public string Gender { get; set; }


 public int? Salary { get; set; }

 [Required]
 [Display(Name = "Date of Join")]
 public DateTime Doj { get; set; }

 [Display(Name = "Dept ID")]
 public int? DeptId { get; set; }
}

For client side validations ADD jquery.validate.js and jquery.validate.unobtrusive.js script files in _layout.cshtml page. ADD a button in Index.cshtml page to redirect to Insert(ADD.cshtml) page as shown.

  

@Html.ActionLink("ADD Employee","ADD",null,null,new {id="btnADD", @class = "btn btn-primary" })

Now press F5 to see the output