Untitled

@model WebApplication1.Models.Employee
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />

    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    <div class="register_form full_width_reg">
        @using (Html.BeginForm("Insertdata", "Employee", FormMethod.Post, new { @class = "form-horizontal", @id = "insertform", role = "form", enctype = "multipart/form-data" }))
        {

            <div id="addupdate"></div>
        }
    </div>
    <div id="grid">
    </div>
</body>
</html>
@*<script src="https://code.jquery.com/jquery-3.3.1.js"></script>*@
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Employee/GetAddUpdate",
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            success: function (response) {
                if (response != null) {
                    $("#addupdate").html(response);
                    $('#datetimepicker1').datetimepicker();
                    $.validator.unobtrusive.parse("#insertform");
                } else {
                    alert("Something went wrong");
                }
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
        bindgrid();
    });

    function bindgrid() {
        $.ajax({
            type: "GET",
            url: "/Employee/Getpartialdata",
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            success: function (response) {
                if (response != null) {
                    $("#grid").html(response);
                    $('#example').DataTable();
                } else {
                    alert("Something went wrong");
                }
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }

    function insert() {
        var cont = 0;
        $('input:radio[name="gender"]').change(
    function () {
        if ($(this).is(':checked')) {
            cont = cont + 1;
        }
    });

        if ($("#txtname").val() == '' || $("#txtemail").val() == '' || $("#datetimepicker7").val() == '' || $("#designationid").val() == ''
            || $("#txtsalary").val() == '' || $("#designationid").val() == '' || cont==0) {
            $("#validate").click();
            return false;
        }
        $.ajax({
            type: "GET",
            url: "/Employee/Insertdata",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: $("#insertform").serialize(),
            success: function (response) {
                bindgrid();
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>

@model WebApplication1.Models.Employee
    @Html.HiddenFor(m => m.empid)
    @Html.ValidationSummary(true)
    <h3>Register as a Student</h3>
    <hr />
    <div class="hidden"></div>

    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <label class="col-md-4 control-label" for="Name">Name</label>
            <div class="col-md-8">
                @Html.EditorFor(model => model.empname, new { htmlAttributes = new { @class = "form-control", id = "txtname", placeholder = "Name" } })
                @Html.ValidationMessageFor(model => model.empname)
            </div>
        </div>
    </div>
    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <label class="col-md-4 control-label" for="Campus">Designation</label>
            <div class="col-md-8">
                @Html.DropDownListFor(model => model.designationid, Model.AvailableDesig, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.designationid)
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <label class="col-md-4 control-label" for="Phone">Phone</label>
            <div class="col-md-8">
                @Html.EditorFor(model => model.empemail, new { htmlAttributes = new { @class = "form-control", id = "txtemail", placeholder = "Email Address" } })
                @Html.ValidationMessageFor(model => model.empemail)
            </div>
        </div>
    </div>
    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            @Html.LabelFor(m => m.empsalary, new { @class = "col-md-4 control-label" })
            <div class="col-md-8">
                @Html.EditorFor(model => model.empsalary, new { htmlAttributes = new { @class = "form-control", id = "txtsalary", placeholder = "Salary" } })
                @Html.ValidationMessageFor(model => model.empsalary)

            </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            @Html.LabelFor(m => m.date, new { @class = "col-md-4 control-label" })
            <div class="col-md-8">
                @Html.EditorFor(m => m.date, new { htmlAttributes = new { @class = "form-control input-group date", id = "datetimepicker1", placeholder = "Date" } })
                @Html.ValidationMessageFor(model => model.date)
            </div>
        </div>
    </div>

    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            @Html.LabelFor(m => m.gender, new { @class = "col-md-4 control-label" })
            <div class="col-md-8">
                @Html.Label("Male")
                @Html.RadioButtonFor(m => m.gender, "Male")
                @Html.Label("Female")
                @Html.RadioButtonFor(m => m.gender, "Female")
                @Html.ValidationMessageFor(model => model.gender)
            </div>
        </div>
    </div>
    <div class="form-group col-md-6 col-sm-6">
        <div class="row">
            <div class="col-md-offset-4 col-md-10">
                <input type="submit" id="validate" class="btn btn-default btn-browse" value="Add" style="display:none;" />
                <input type="button" id="submitfilteration" onclick="return insert();" class="btn btn-default btn-browse" value="Add" />
            </div>
        </div>
    </div>

@model IList<WebApplication1.Models.Employee>

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Gender</th>
                <th>Designation</th>
                <th>Salary</th>
                <th>Date</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {

            <tr>
                <td>@item.id</td>
                <td>@item.empname</td>
                <td>@item.empemail</td>
                <td>@item.gender</td>
                <td>@item.name</td>
                <td>@item.empsalary</td>
                <td>@item.date</td>
                <td>
                    <input type="button" id="Editbtn" onclick="Editdata('@item.empid')" class="btn btn-default btn-browse" value="Edit" />
                </td>
                <td>
                    <input type="button" id="deletebutton" onclick="Delete('@item.empid');" class="btn btn-default btn-browse" value="Delete" />
                </td>
            </tr>
            }
        </tbody>
    </table>
<script>
    function Delete(id) {
        alert(id);
        $.ajax({
            url: '/Employee/Delete',
            dataType: "html",
            type: "POST", // You can use GET
            contentType: 'application/json; charset=utf-8',
            cache: false,
            data: JSON.stringify({
                'id': id
            }),
            success: function (data) {
                alert(data);
                bindgrid();
                alert('success');
            },
            error: function (xhr) {
                console.log(request);
            }
        });
    }
    function Editdata(id) {
        $.ajax({
            url: '/Employee/Edit',
            dataType: "html",
            type: "POST", // You can use GET
            contentType: 'application/json; charset=utf-8',
            cache: false,
            data: JSON.stringify({
                'id': id
            }),
            success: function (data) {
                $("#addupdate").html(data);
                $.validator.unobtrusive.parse("#insertform");
                alert('success');
            },
            error: function (xhr) {
                console.log(request);
                // alert("Some error");
            }
        });
    }
    function bindgrid() {
        $.ajax({
            type: "GET",
            url: "/Employee/Getpartialdata",
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            success: function (response) {
                if (response != null) {
                    $("#grid").html(response);
                    $('#example').DataTable();
                } else {
                    alert("Something went wrong");
                }
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>

public class EmployeeController : Controller
{
    PracmvcEntities db = new PracmvcEntities();
    // GET: Employee
    public ActionResult Index()
    {
        Employee emp = new Employee();
        emp.AvailableDesig = GetDesig();
        return View(emp);
    }
    [HttpGet]
    public ActionResult Insertdata(Employee model)
    {
        bool gender = false;
        if (model.empid == null)
        {
            if (model.gender == "Male")
            {
                gender = true;
            }
            db.insertemployeedata(model.empname, gender, model.designationid, model.empemail, model.empsalary, model.date);
            db.SaveChanges();
            return Json("success", JsonRequestBehavior.AllowGet);
        }
        //edit
        if (model.gender == "Male")
        {
            gender = true;
        }
        db.updateemployeedata(model.empid,model.empname, gender, model.designationid, model.empemail, model.empsalary, model.date);
        db.SaveChanges();
        return Json("success", JsonRequestBehavior.AllowGet);
    }

    [HttpGet]
    public ActionResult GetAddUpdate()
    {
        Employee emp = new Employee();
        emp.AvailableDesig = GetDesig();
        return PartialView("_AddUpdateData", emp);
    }
    [HttpGet]
    public ActionResult Getpartialdata()
    {
        List<Employee> emp = db.selectemployeedata(0).Select(e => new Employee
        {
            empid = e.empid,
            empname = e.empname,
            empsalary = Convert.ToDecimal(e.empsalary),
            empemail = e.empemail,
            gender = e.gender.ToString(),
            name = db.designations.Where(a => a.id == e.designationid).FirstOrDefault().name,
            id=e.id,
            date=e.date
        }).ToList();
        return PartialView("_PartialGrid", emp);
    }
    public IList<SelectListItem> GetDesig()
    {
        // This comes from database.
        var desig = db.selectemployeeedesignation()
            .Select(x => new SelectListItem { Text = x.name, Value = x.id.ToString() })
            .ToList();
        desig.Insert(0, new SelectListItem { Text = "--Please Select--", Value = "" });
        return desig;
    }
    [HttpPost]
    public ActionResult Edit(int id)
    {
        Employee emp = db.selectemployeedata(id).Select(e => new Employee
        {
            empid = e.empid,
            empname = e.empname,
            empsalary = Convert.ToDecimal(e.empsalary),
            empemail = e.empemail,
            gender = e.gender.ToString()=="True"? "Male" : "Female",
            name = db.designations.Where(a => a.id == e.designationid).FirstOrDefault().name,
            id = e.id,
            date = e.date,
            designationid=e.designationid
        }).FirstOrDefault();
        emp.AvailableDesig = GetDesig();
        return PartialView("_AddUpdateData", emp);
    }
    [HttpPost]
    public ActionResult Delete(int id)
    {
        db.deleteemployee(id);
        db.SaveChanges();
        // This comes from database.
        return Json("success", JsonRequestBehavior.AllowGet);
    }

}

public Employee()
    {
        AvailableDesig = new List<SelectListItem>();
    }
    public int? empid { get; set; }
    [Required(ErrorMessage = "Name Required.")]
    public string empname { get; set; }
    [Required(ErrorMessage = "Gender Required.")]
    public string gender { get; set; }
    [Required(ErrorMessage = "Please Select {0}.")]
    public Nullable<int> designationid { get; set; }
    [Required(ErrorMessage = "Email Address Required.")]
    public string empemail { get; set; }
    [Required(ErrorMessage = "Salary Required.")]
    public Nullable<System.Decimal> empsalary { get; set; }
    [Required(ErrorMessage = "Date Required.")]
    public Nullable<System.DateTime> date { get; set; }
    public int id { get; set; }
    public string name { get; set; }
    public IList<SelectListItem> AvailableDesig { get; set; }
    public IList<Employeedesignation> desig { get; set; }
}
public class Employeedesignation
{
    public int id { get; set; }
    public string name { get; set; }
}

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/modernizr")
</head>