Question

我在这里读了很多关于stacoverflow的问题，但我仍然不清楚如何在主视图中使用action方法使用partialview。一般来说，我的方法可能是错的。到目前为止，我不知道如何继续我的代码。

我将从主视图开始：

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

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

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

public ActionResult getRolesByYear(int year)
    {


      // a couple of queries here


        var list = list of RoleViewModel objects;

        return PartialView(list);

这是partialView：

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

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

Answer 1

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

如果您想使用响应更新id为div的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);
    }
}

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

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

Answer 2

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

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

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

2 个答案: