C# 不确定如何正确使用局部视图

我在这里读了很多关于stacoverflow的问题，但我仍然不清楚如何在主视图中使用partialview和action方法。大概是我的观点不对。目前为止，我还不知道如何继续我的代码

我将从主要观点开始：

 @{
        ViewBag.Title = "getRolesByYear";
    }
    </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) {
                console.log('x');
                }

            }

            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>
}

@model IEnumerable
@foreach（模型中的var项目）
{
item.Role.RoleName
item.Role.RoleDescription
焦点开始：item.Role.FocusStart

焦点结束：item.Role.FocusStart

}

---

显然，很多事情我都不清楚。如何将此局部视图与我拥有的操作方法和主视图一起使用？局部视图是否需要单独的方法？任何提示？

您的ajax调用将调用返回部分视图结果（通过执行部分视图生成的标记）的操作方法。我想您只需要使用ajax调用的响应来更新DOM

如果您想用响应更新id为partial的div的内容，可以在ajax调用的

success

事件处理程序中进行更新

success : function(response)
{
  $("#partial").html(response);
}

我还建议在文档就绪事件上调用

getRolesForYear

方法

$(function () {

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

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

另外，如果您的主视图也是action方法的结果

getRolesByYear

，那么您可能只希望在ajax调用中返回部分视图结果，而在其他调用中，您可以返回部分视图

public ActionResult getRolesByYear(int year)
{
    var list = list of RoleViewModel objects;
    if(Request.IsAjaxRequest())
    {
       return PartialView(list);
    }
    else
    {
      return View(list);
    }
}

在这里，相同的操作方法处理对主视图和ajax调用的请求。它为ajax调用返回相同的视图，但使用PartialView调用，因此布局将被忽略。但是如果您有一个特定的视图想要返回，您也可以这样做

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

---

我喜欢使用局部视图通过Ajax调用呈现数据的原因之一。例如，如果我想开始搜索以避免服务器调用，我只需要使用对控制器的ajax调用，该调用通过局部视图返回搜索结果。在您的示例中，您需要在partial div中加载结果

function successFunc(data, status) {
     $("#partial").html(data);
}

---

您的需求是什么（用户用例）。根据您的用例，根据需要使用技术。从usre的角度来看，您期望的行为是什么。我只需要显示对象列表，我在主视图的action方法中通过部分视图显示了该列表。我添加了部分视图。这个ajax调用在action方法的视图中被调用。我的partialview没有动作方法。这是个问题吗？感谢您的回答。

getRolesByYear

action方法返回部分视图，该视图将从主视图中调用js code我的主视图称为getRolesByYear.cshtml，action方法也称为getRolesByYear。局部视图称为_yearlyRoles。感谢您的回复。我按照你的建议做了（除了第一个建议，这是我从另一个asnwer那里得到的）。当前在F5时，我收到“错误”警报。你知道为什么会发生这种情况吗？检查浏览器的网络工具->网络选项卡，找出ajax调用，看看响应是什么。看起来这不是一个200 OK的响应（当一切顺利时就会发生）。看起来您的服务器代码失败了。您可以右键单击网络调用并选择“在新窗口中打开”，查看页面是否返回预期结果或错误。

function successFunc(data, status) {
     $("#partial").html(data);
}