使用 ajax 渲染局部视图

Question

目前我有一个名为 getRolesByYear.cshtml 的主视图。在这个视图中，我有三个按钮，每个按钮代表一年。当我单击一个按钮（或在页面加载时）时，我调用一个方法，该方法接受一个 int 'year' 作为参数，并调用一个带有 year 参数的 ajax 。 ajax 调用一个操作方法（getRolesByYear，主视图的方法）。 Action 方法对数据库进行查询，其结果是 ViewModel 个对象的列表。在 return 语句中，我 return 像这样的 PartialView：return PartialView("_yearlyRoles",list);。可悲的是，在这一切之后，我没有在前端获得所需对象的列表，而是从 ajax 调用的错误部分得到的错误。我一般是新手，对此我很纠结。

这是主视图getRolesByYear.cshtml：

    @{
    ViewBag.Title = "getRolesByYear";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">


    getRolesForYear(parseInt(@DateTime.Now.Year));

    $(function () {
        $('#years a').click(function () {
            var year = $(this).text();
            console.log(year);
            getRolesForYear(parseInt(year));
        });
    })
    //console.log(year);


    function getRolesForYear(year) {
        console.log(year);
        $.ajax({
            type: "POST",
            url: '@Url.Action("getRolesByYear", "WorkRoles")',
            dataType: "json",
            data: {
                year: year
            },
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {



                $("#partial").html(data);


        }

        function errorFunc() {
            alert('error');
        }
    }



</script>

<div id = "years" class="btn-group btn-group-justified timeline">
    <a  href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a>
    <a  href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a>
    <a  href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a>
</div>

<div id = "partial"></div>

局部视图：

@model IEnumerable<eksp.Models.RoleViewModel>


@foreach (var item in Model)
{
    <div class="jumbotron">
        <h2>item.Role.RoleName</h2>

        <h1> item.Role.RoleDescription</h1>
        <p class="lead">Focus start : item.Role.FocusStart</p>
        <p>Focus end : item.Role.FocusStart </p>

    </div>
}

操作方法：

[HttpPost]
    public ActionResult getRolesByYear(int year)
    {
        string currentUserId = User.Identity.GetUserId();


        var list = db.WorkRoles.
            Join(db.WorkRolesUsersDetails,
            o => o.WorkRoleId, od => od.WorkRoleId,
            (o, od) => new
            {
                WorkRoleId = o.WorkRoleId,
                RoleName = o.RoleName,
                RoleDescription = o.RoleDescription,
                CompanyId = o.CompanyId,
                WRUDId = od.WRUDId,
                UserDetailsId = od.UserDetailsId,
                FocusStart = od.FocusStart,
                FocusEnd = od.FocusEnd
            }).ToList()
            .Select(item => new RoleViewModel(
               item.WorkRoleId,
                item.RoleName,
                item.RoleDescription,
                item.CompanyId,
                item.WRUDId,
                item.UserDetailsId,
                item.FocusStart,
                item.FocusEnd)).ToList();


        //RoleViewModel rv = list;

        if (Request.IsAjaxRequest())
        {
            return PartialView("_yearlyRoles", list);
        }
        else
        {
            return View(list);
        }
    }

Answer 1

鉴于报告的错误消息，您需要更改 ajax 调用。通过将 "data" 参数设置为 "json"，您告诉 ajax 期望响应中返回 JSON-formatted 数据，但部分视图是 HTML，因此请更改您的ajax 呼吁反映这一点：

$.ajax({
    type: "POST",
    url: '@Url.Action("getRolesByYear", "WorkRoles")/' + year,
    dataType: "html", //set the correct data type for the response
    success: successFunc,
    error: errorFunc
});

顺便说一句，您可以通过使用 $.ajax:[=15 提供给回调的参数将 errorFunc 更改为类似这样的内容来非常直接地改进客户端的错误处理=]

function errorFunc(jQXHR, textStatus, errorThrown) {
    alert("An error occurred while trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
}

为了减少干扰报告 and/or 更容易调试，您可以将 alert 更改为 console.log。要获得更多详细信息，您还可以记录整个 jQXHR 对象：

console.log(JSON.stringify(jQXHR));

使用 ajax 渲染局部视图

Rendering a partial view with ajax

ajax

asp.net-mvc

partial-views

razor