如何使用Jquery和Ajax添加和编辑记录

时间:2019-03-09 14:28:43

标签: c# jquery ajax asp.net-mvc

我是Web开发的初学者,直到今天,我才开始使用jquery进行Curd操作,而且我不知道服务器端技术,我只是前端开发人员

我在Google中搜索了很多内容,该内容如何使用Jquery和 在每个Ajax教程中,他们都实现了包括php标签..etc在内的代码,而我在下面的一个教程中实现了以下代码,但添加和编辑功能无法正常工作。

https://codepen.io/rama-krishna-the-selector/pen/bZRRyB

    <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
        integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- <link href="assets/custom.css" rel="stylesheet"> -->
    <title>Karvy InnoTech</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <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>


        <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.Dept, 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>


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
        integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
        crossorigin="anonymous"></script>

    <script>

        $(document).ready(function () {

            var StudentList = [
                {
                    "StudentId": 1,
                    "StudentName": "ram",
                    "Email": "ram@gmail.com",
                    "isDeleted": "yes",
                    "Dept": "dept"
                },
                {
                    "StudentId": 2,
                    "StudentName": "sam",
                    "Email": "sam@gmail.com",
                    "isDeleted": "no",
                    "Dept": "business"
                },
                {
                    "StudentId": 3,
                    "StudentName": "ramadevi",
                    "Email": "ramadevi@gmail.com",
                    "isDeleted": "yes",
                    "Dept": "mba"
                },
                {
                    "StudentId": 4,
                    "StudentName": "pooja",
                    "Email": "pooja@gmail.com",
                    "isDeleted": "no",
                    "Dept": "inter"
                }
            ]

            $("#LoadingStatus").html("Loading....");
            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].Dept + "</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();
            }
        });

    </script>

</body>

</html>

0 个答案:

没有答案