不确定如何正确使用局部视图答案

【问题标题】：Not sure how to properly use a partial view不确定如何正确使用局部视图
【发布时间】：2017-06-19 13:45:17
【问题描述】：

我在这里阅读了很多关于 stacoverflow 的问题，但我仍然不清楚我应该如何在主视图中使用带有操作方法的局部视图。总的来说，我的方法可能有问题。到目前为止，我不确定如何继续我的代码。

我将从主视图开始：

 @{
        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>

在这个视图中，我有三个按钮，每个按钮都有不同的年份。在页面加载或按钮单击时，我使用 int 年份作为参数对 action method 进行 ajax 调用。

这是我的操作方法的简化版：

public ActionResult getRolesByYear(int year)
    {


      // a couple of queries here


        var list = list of RoleViewModel objects;

        return PartialView(list);

这里是部分视图：

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

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

【问题讨论】：

您的要求是什么（用户用例）。根据您的用例，根据需要使用技术。从用户的角度来看，您的预期行为是什么。
我只需要通过部分视图显示对象列表，我在主视图的操作方法中拥有这些对象列表。 P.S 我添加了部分视图。

标签： c# asp.net-mvc razor partial-views

【解决方案1】：

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

如果您想使用响应更新具有部分 id 的 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));
        });
})

另外，如果你的主视图也是动作方法getRolesByYear的结果，你可能只想在ajax调用时返回部分视图结果，其他调用，你可以返回部分视图

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

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

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

【讨论】：

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

【解决方案2】：

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

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

【讨论】：