jQuery view

@model FullCRUDImplementationWithJquery.Models.StudentViewModel
@{
    Layout = null;
}
<script src="~/Scripts/jquery-3.3.1.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 />

    <div class="container">
        <b>Search By : </b>
        <select id="SearchBy">
            <option value="StudentID">Student ID</option>
            <option value="StudentName">Student Name</option>
            <option value="Email">Email</option>
            <option value="Department">Department</option>
        </select> <br /><br />
        @Html.TextBox("Search")<input type="submit" id="SearchBtn" value="Search" /> <br /><br />
    </div>


    <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 = "StudId" })
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.StudentName, new { @id = "StudName", @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>


    @*Create a PopUp Modal For DeleteConfirmation*@

    <div class="modal fade" id="DeleteConfirmation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4>Delete Student Record</h4>
                </div>
                <div class="modal-body">
                    <h4>Are You Sure? You Want To Delete This Record.</h4>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-danger" onclick="ConfirmDelete()">Confirm</a>
                </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();
        $("#StudID").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);
                $("#StudID").val(obj.StudentId);
                $("#StudName").val(obj.StudentName);
                $("#Email").val(obj.Email);
                $("#DropDwn option:selected").text(obj.tblDepartment.DepartmentName);
                $("#DropDwn option:selected").val(obj.DepartmentId);
            }
        })
    }

    $("#SaveStudentRecord").click(function () {
        var data = $("#SubmitForm").serialize();
        $.ajax({
            type: "Post",
            url: "/Home/SaveDataInDatabase",
            data: data,
            success: function (result) {
                alert("Success!..");
                window.location.href = "/Home/index";
                $("#MyModal").modal("hide");
            }
        })
    })

    //Show The Popup Modal For DeleteConfirmation

    function DeleteStudentRecord(StudentId) {
        $("#StudId").val(StudentId);
        $("#DeleteConfirmation").modal("show");
    }
    function ConfirmDelete() {
        var StudId = $("#StudId").val();
        $.ajax({
            type: "POST",
            url: "/Home/DeleteStudentRecord?StudentId=" + StudId,
            success: function (result) {
                $("#DeleteConfirmation").modal("hide");
                $(".row_" + StudId).remove();
            }
        })
    }

    $(document).read(function () {
        $("#SearchBtn").click(function () {

            var SearchBy = $("#SearchBy").val();
            var SearchValue = $("#Search").val();
            var SetData = $("#SetStudentList");
            SetData.html("");
            $.ajax({
                type: "post",
                url: "/Home/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
                contentType: "html",
                success: function (result) {
                    if (result.length == 0) {
                        SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>')
                    }
                    else {
                        $.each(result, function (index, value) {
                            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);

                        });
                    }
                }

                });
        });

        });
</script>