Befor Watching This Part Must Watch Previous Part Of This Video Series (Part-1) [Click Previous For Part-1]

Download Project  (Full Project)

After Previous Part

Step-1 : Add The Below Code In Your Controller

"HomeController"

public class HomeController : Controller
    {
        MVCTutorialEntities db = new MVCTutorialEntities();
        public ActionResult Index()
        {
            List<tblDepartment> DeptList = db.tblDepartments.ToList();
            ViewBag.ListOfDepartment = new SelectList(DeptList, "DepartmentId", "DepartmentName");
            return View();
        }

        public JsonResult GetStudentList()
        {
            List<StudentViewModel> StuList = db.tblStudents.Where(x => x.IsDeleted == false).Select(x => new StudentViewModel
            {
                StudentId = x.StudentId,
                StudentName = x.StudentName,
                Email = x.Email,
                DepartmentName = x.tblDepartment.DepartmentName
            }).ToList();

            return Json(StuList, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetStudentById(int StudentId)
        {
            tblStudent model = db.tblStudents.Where(x => x.StudentId == StudentId).SingleOrDefault();
            string value = string.Empty;
            value = JsonConvert.SerializeObject(model, Formatting.Indented, new JsonSerializerSettings
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore
            });
            return Json(value, JsonRequestBehavior.AllowGet);
        }
}

Step 2 : Add The Below Code In Your View 

"Index.cshtml"

@model FullCRUDImplementationWithJquery.Models.StudentViewModel
@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:3%">
    <a href="#" class="btn btn-info" onclick="AddNewStudent(0)">Add New Student</a> <br /><br />

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Student ID</th>
                <th>Student Name</th>
                <th>Email</th>
                <th>Department</th>
                <th>Action(Edit)</th>
                <th>Action(Delete)</th>

            </tr>
        </thead>
        <tbody id="SetStudentList">
            <tr id="LoadingStatus" style="color:red"></tr>
        </tbody>
    </table>

    @*Create A Popup Modal With Registration Form For Add Or Edit Student Record*@

    <div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4 id="ModalTitle"></h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <fieldset id="SubmitForm">
                            @Html.HiddenFor(m => m.StudentId, new { @id = "StuId" })
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.StudentName, new { @id = "StuName", @class = "form-control", @placeholder = "Name*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.Email, new { @id = "Email", @class = "form-control", @placeholder = "Email*" })
                            </div>
                            <div class="form-group">
                                @Html.DropDownListFor(m => m.DepartmentId, ViewBag.ListOfDepartment as SelectList, "--Select Dept--", new { @id = "DropDwn", @class = "form-control" })
                            </div>
                            <div class="form-group">
                                <a href="#" class="btn btn-block btn-danger" id="SaveStudentRecord">Save</a>
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
<script>
    $("#LoadingStatus").html("Loading....");
    $.get("/Home/GetStudentList", null, DataBind);
    function DataBind(StudentList) {
        var SetData = $("#SetStudentList");
        for (var i = 0; i < StudentList.length; i++) {
            var Data = "<tr class='row_" + StudentList[i].StudentId + "'>" +
                "<td>" + StudentList[i].StudentId + "</td>" +
                "<td>" + StudentList[i].StudentName + "</td>" +
                "<td>" + StudentList[i].Email + "</td>" +
                "<td>" + StudentList[i].DepartmentName + "</td>" +
                "<td>" + "<a href='#' class='btn btn-warning' onclick='EditStudentRecord(" + StudentList[i].StudentId + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td>" +
                "<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteStudentRecord(" + StudentList[i].StudentId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>" +
                "</tr>";
            SetData.append(Data);
            $("#LoadingStatus").html(" ");

        }
    }

    //Show The Popup Modal For Add New Student

    function AddNewStudent(StudentId) {
        $("#form")[0].reset();
        $("#StuId").val(0);
        $("#DropDwn option:selected").text("--Select Dept--");
        $("#ModalTitle").html("Add New Student");
        $("#MyModal").modal();

    }

    //Show The Popup Modal For Edit Student Record

    function EditStudentRecord(StudentId) {
        var url = "/Home/GetStudentById?StudentId=" + StudentId;
        $("#ModalTitle").html("Update Student Record");
        $("#MyModal").modal();
        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                var obj = JSON.parse(data);
                $("#StuId").val(obj.StudentId);
                $("#StuName").val(obj.StudentName);
                $("#Email").val(obj.Email);
                $("#DropDwn option:selected").text(obj.tblDepartment.DepartmentName);
                $("#DropDwn option:selected").val(obj.DepartmentId);

            }
        })
    }
</script>

Run This Project

Part-2  Is Done.... Must Watch Part-3(Last Part) For Complete This Project (Full CRUD Operation In MVC) [Click Next For Part-3]