根据 ASP.new MVC 上的下拉菜单选择从数据库更新字段和表，而无需刷新页面

Question

我正在尝试根据从下拉菜单中选择的ID更新我的学生详细信息。我正在使用 ASP.net MVC。 我对MVC和编码很陌生，所以请尽可能多地降低你的答案:)

我认为 ajax 涉及某人，但如果有人能给我一些提供一些示例代码，以便我知道如何开始，我将不胜感激，如果有人能提供帮助，将不胜感激 -

这是我正在创建的页面的屏幕截图索引代码如下

@model ResultModel @using WebApplication3.Models

@{ Layout = null; }

            <div class="container">
                <div id="flashMessage">
                   New Student Details!
                </div>
                <form>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Please Choose Student</label>
                        <select class="form-control" id="StudentName">
                            <!--Drop down menu-->
                            @foreach (var item in Model.Student)
                            {
                            <option>@item.StudentNumber</option> }
                        </select>
                    </div>
                    </form>
                    <!---------------->

                <br /><br /><br /><br /><br /><br /><br />

                <!--   Student information form      -->
                <h4 >Student information</h4>
                <p id="cat">This will display the students information based on what is selected from the drop down menu</p>
                <code>SELECT `title`,`first name`,`surname` FROM `STUDENT REGISTER` WHERE `Student number` = 'OPTION SELECTED' </code>
                <form method="post">
                    <div class="form-row">
                        <label for="exampleInputEmail1">Title</label>
                        <input type="text" class="form-control" id="title" aria-describedby="emailHelp" placeholder="Person n">
                    </div>
                    <div class="form-row">
                        <label for="exampleInputEmail1">Name</label>
                        <input type="text" class="form-control" id="firstname" aria-describedby="emailHelp" placeholder="student Name">
                    </div>
                    <div class="form-row">
                        <label for="exampleInputEmail1">Surname</label>
                        <input type="text" class="form-control" id="surname" aria-describedby="emailHelp" placeholder="Surname">
                    </div>
                    <br /><br /><br /><br /><br /><br /><br />

                    <!--   Student notes      -->
                    <h4 id="test">Student Notes</h4>
                    <p>This will display all the notes for that studend - these need to have edit button within the table to edit the fields but also have option for drop</p>
                   <code>SELECT `Date of note`,`Staff Member`,`notes` FROM `student Notes` WHERE `Student number` = option selected </code>
                    <br />
                    <br />
                    <br />
                    <table class="table table-striped" id="myTable">
                        <thead>
                            <tr>
                                <th scope="col">date</th>
                                <th scope="col">Note ID</th>
                                <th scope="col">Notes</th>
                                <th scope="col">Staff ID</th>
                            </tr>
                        </thead>
                        <tbody>


                                @foreach (var item in Model.Notes)
                                {
                                <tr>

                                  <td>@item.User</td>
                                    <td> @item.Notes</td>
                                    <td> @item.Id</td>
                                    <td> @item.Staff</td>
                                </tr>
                                }

                            </tbody>
                        </table>
                    <br />  <br /><br /><br />

                    <input class="btn btn-primary btn-lg" type="submit" value="Delete Student">
                    <input class="btn btn-primary btn-lg" type="submit" value="Edit Student">
                </form>

   </div>     

    <div></div>


    <!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


    <script type="text/javascript">
        $("#flashMessage").hide();



        $(document).ready(function () {
            $("#StudentName").change(function () {


                const sSname = document.getElementById("StudentName").value
                $('#title').val("Should Display title");
                $('#firstname').val("Should Display first Name");
                $('#surname').val("Should display last name");


                  //testing jquery - no longer in use just keeping for refrence.
                  // $("#test").text("Hello world!"); //   alert("Selected value is : " + document.getElementById("StudentName").value);     // $("#test").hide();
                  // $("#flashMessage").slideDown(1000).delay(2000).slideUp(1000);
              });

        });


        //change date to sort by dd/mm/YYYY
        jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "date-uk-pre": function (a) {
                if (a == null || a == "") {
                    return 0;
                }
                var ukDatea = a.split('/');
                return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            },
            "date-uk-asc": function (a, b) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },
            "date-uk-desc": function (a, b) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        });
        //select the the tabe and field where the formating is allplied
        $('#myTable').dataTable({
            columnDefs: [
                { type: 'date-uk', targets: 0 }
            ]
        });

    </script>

Answer 1

在下拉更改事件时进行 ajax 调用

$("#dropdownid").change(function () {
$.ajax({
    type: "GET",
    url: $('#hdnPath').val() + '/Controller/TestActionmethod',
    data: {
        dropdownid: $("#dropdownid").val()
    },
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
});

为带有视图模型参数的测试操作方法返回相同的视图，它将起作用。像这样的东西

return View("viewName", Viewmodel );