在请求 .NET CORE MVC 后，部分视图未显示为 Json

Question

我正在尝试使用 Ajax 将部分视图加载为 Json 对象。我有一个下拉 select 列表项，每次我单击下拉列表中的项目时，数据都必须分别 returned。

这是我的 NotePartial.cs 操作，return 部分视图为 Json。

    [ActionName("NotePartial")]
    public JsonResult NotePartial(int? id)
    {
        if (id == null)
            return null;

        var noticeModel = _context.Course
                .Include(n => n.Notices)
                    .AsNoTracking()
                    .FirstOrDefault(m => m.CourseId == id);
        if (noticeModel == null)
            return null;

        return Json(noticeModel);
    }

这是我的 .cshtml 文件，它将呈现和加载 Json 作为部分视图。

        <div class="col-sm-4 offset-4 form-inline">
            <label class="">Courses </label>            
            <select id="courses_dropdown_list" class="custom-select ml-2" asp-items="@(new 
                    SelectList(ViewBag.CourseList, "Value","Text") )">

            </select>

        // some code ...

       <div class="note-partial">
          <section class="text-center">
          <div class="container">
             <div class="row" id="note_table" data-url="@Url.Action(action: "NotePartial", controller: "Note")">
                  // I want partial view is loaded in here 
            </div>
        </div>
    </section>
</div>

这是我的 Ajax 脚本

@section Scripts
{   
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#courses_dropdown_list").change(function () {
                var id = $("#courses_dropdown_list").val();
                var note_db = $("#note_table");
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: '@Url.Action("NotePartial", "Note")',
                    data: { "id": id },
                    success: function (data) {
                        var result = "";
                        note_db.html('');
                        $.each(data, function (id, note) {
                            result += '<table class="table table-striped">' +
                                '<thead>' +
                                    '<tr>' +
                                       '<th>#</th>' +
                                       '<th>Name</th>' +
                                       '<th>File Type</th>' +
                                       '<th>File</th>' +
                                       '<th>Created On</th>' +
                                     '</tr>' +
                                '</thead>' +
                                '<tbody>' +
                                   '<tr>' +
                                      '<td>' + note.Id + '</td>' +
                                      '<td>' +
                                      '<a class="nav-link" mt-0 asp-controller="Note" asp-action="Detail" asp-route-Id="">'      + note.Name + '</a>' +
                                       '</td>' +
                                       '<td>' +
                                            '<a>' + note.FileType +'</a>'
                                        '</td>' +
                                        '<td>' +
                                            '<a class="nav-link mt-0" asp-controller="Note" asp-action="Detail" asp-route-Id="">' + '##' + '</a>' +
                                        '</td>'
                                        '<td>' + note.CreatedOn +'</td>' +
                                    '</tr>'
                                '</tbody>';
                        });
                        note_db.html(result);
                    },
                    error: function (xhr, ajaxOtions, errorMsg) {
                        alert("Failed to retrive data");
                    }
                })
            });
        });
    </script>

当我运行程序并为 NoteParial 操作设置断点时，它如我之前预期的那样返回了对象并且 Ajax 请求也成功了。但是，部分视图未显示在 div 标记中。希望有人能帮助我！

Answer 1

您需要在 ajax 调用之前移动结果变量。

@section Scripts
{   
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#courses_dropdown_list").change(function () {
                var id = $("#courses_dropdown_list").val();
                var note_db = $("#note_table");
                
                // **** Move result variable to here
                var result = "";
                
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: '@Url.Action("NotePartial", "Note")',
                    data: { "id": id },
                    success: function (data) {
                        note_db.html('');
                        $.each(data, function (id, note) {
                            result += '<table class="table table-striped">' +
                                '<thead>' +
                                    '<tr>' +
                                       '<th>#</th>' +
                                       '<th>Name</th>' +
                                       '<th>File Type</th>' +
                                       '<th>File</th>' +
                                       '<th>Created On</th>' +
                                     '</tr>' +
                                '</thead>' +
                                '<tbody>' +
                                   '<tr>' +
                                      '<td>' + note.Id + '</td>' +
                                      '<td>' +
                                      '<a class="nav-link" mt-0 asp-controller="Note" asp-action="Detail" asp-route-Id="">'      + note.Name + '</a>' +
                                       '</td>' +
                                       '<td>' +
                                            '<a>' + note.FileType +'</a>'
                                        '</td>' +
                                        '<td>' +
                                            '<a class="nav-link mt-0" asp-controller="Note" asp-action="Detail" asp-route-Id="">' + '##' + '</a>' +
                                        '</td>'
                                        '<td>' + note.CreatedOn +'</td>' +
                                    '</tr>'
                                '</tbody>';
                        });
                        note_db.html(result);
                    },
                    error: function (xhr, ajaxOtions, errorMsg) {
                        alert("Failed to retrive data");
                    }
                })
            });
        });
    </script>

在请求 .NET CORE MVC 后，部分视图未显示为 Json

Partial view is not displaying as a Json after requested .NET CORE MVC

c#

partial-views

asp.net-core-mvc