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

Posted 2023-05-09

【中文标题】使用 JS 在 MVC 中加载部分视图时出错

【英文标题】：Error loading partial view in MVC using JS

【发布时间】：2021-03-13 18:51:19

【问题描述】：

我正在尝试使用操作方法和 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>

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

【参考方案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);
               
            
      
        )