使用 JS 在 MVC 中加载部分视图时出错

Question

我正在尝试使用操作方法和 javascript/jquery 在我的 MVC 项目中加载部分视图。我在这方面不是很了解，但我已经尝试做一些研究。

应该发生的是用户输入他们想要查看数据的年份和月份，然后按开始。然后它返回下面的部分视图，其中包含数据。SP 工作正常，我只是在努力让数据在页面中正确显示。下面是我的代码：

动作方法：

public ActionResult Search(string month, string year)
    {
        var list = Singleton.Instance().Repository.Form.GetAllFormsByDate(month, year, GetCurrentUserDepartmentId());
        var departmentId = GetCurrentUserDepartmentId();
        var modelList = list.Select(form => new FormModel
        {
            FormId = form.FormId,
            UserId = form.UserId,
            Year = form.Year,
            Month = form.Month,
            IsApproved = form.IsApproved,
            IsSubmitted = form.IsSubmitted

        }).ToList();
        return PartialView("_AdminView", modelList);
    }

主视图

@model Expenses.Models.FormModel
@using Expenses.Models
@{
    ViewBag.Title = "AdminIndex";
}

<div class="card card-custom">
    <div class="card-body">
        <div class="row">
            @Html.DropDownListFor(x => x.Year, new List<SelectListItem>
     {
          new SelectListItem{ Text = "2020", Value = "2020"},
          new SelectListItem{ Text = "2021", Value = "2021"}
    }, new { @id = "year", @class = "form-control w-200px mr-5" })
            @Html.DropDownListFor(x => x.Month, new List<SelectListItem>
           {
                new SelectListItem{ Text = "January", Value = "January"},
                new SelectListItem{ Text = "February", Value = "February"},
                new SelectListItem{ Text = "March", Value = "March"},
                new SelectListItem{ Text = "April", Value = "April"},
                new SelectListItem{ Text = "May", Value = "May"},
                new SelectListItem{ Text = "June", Value = "July"},
                new SelectListItem{ Text = "August", Value = "August"},
                new SelectListItem{ Text = "September", Value = "September"},
                new SelectListItem{ Text = "October", Value = "October"},
                new SelectListItem{ Text = "November", Value = "November"},
                new SelectListItem{ Text = "November", Value = "November"},
                new SelectListItem{ Text = "December", Value = "December"}
          }, new { @id = "month", @class = "form-control w-200px" })

            <button type="button" class="btn btn-success ml-20" id="btnOk">
                Go
            </button>
        </div>
        <div class="row mt-10">
            <div class="col-md-12">
                <div id="sessions" style="min-height: 500px;"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    $(function () {
        
        $("#btnOk").click(function () {
            debugger;
            loadSessions();
        });

    });

    function loadSessions() {
        $('#sessions')
        debugger;
                .html('<h4>Please wait.</h4>')
                .load('@Url.Content("~/Form/Search/")' +
                    "&month=" +
                    $('#month').val() +
                    "&year=" +
                    $('#year').val());

    }

</script>

局部视图：

 @model List<Expenses.Models.FormModel>
@{
    ViewBag.Title = "_AdminView";
}

<table class="table table-hover">
    <thead>
        <tr class="d-flex">
            <th scope="col" class="col-2">
                Year
            </th>
            <th scope="col" class="col-2">
                Month
            </th>
            <th scope="col" class="col-2">
                Submitted
            </th>
            <th scope="col" class="col-2">
                Approved
            </th>
            <th scope="col" class="col-2">

            </th>
            <th scope="col" class="col-2">

            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var a in Model)
        {

            <tr class="d-flex">
                <td class="col-2">
                    @a.Year
                </td>
                <td class="col-2">
                    @a.Month
                </td>
                <td class="col-2">
                    @if (a.IsSubmitted == false)
                    {<i class="far fa-times-circle text-danger icon-2x"></i> }
                    else
                    { <i class="far fa-check-circle text-success icon-2x"></i>}
                </td>
                <td class="col-2">
                    @if (a.IsApproved == false)
                    {<i class="far fa-times-circle text-danger icon-2x"></i> }
                    else
                    { <i class="far fa-check-circle text-success icon-2x"></i>}
                </td>
                <td class="col-2">
                    @if (a.IsSubmitted == false)
                    {@Html.ActionLink("Edit", "Edit", "Form", new { formId = a.FormId }, new { @class = "btn btn-primary" })}
                else
                {@Html.ActionLink("View", "View", "Form", new { formId = a.FormId }, new { @class = "btn btn-primary" })}
                </td>
                <td class="col-2">
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
                        <i class="fab fa-telegram-plane"></i>Submit
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

非常感谢任何帮助，在此先感谢！

Answer 1

要从 jquery 绑定局部视图，你需要试试这个

function loadSessions() {
   $.ajax
        ({
            url: "/Search",
            contentType: "application/html; charset=utf-8",
            type: "GET",
            data: { month: $('#month').val(), year: $('#year').val()},
            cache: !0,
            datatype: "html",
            success: function (t) {
                $('#sessions').empty();
                $("#sessions").html(t);
               
            }
      
        })