ASP.NET MVC 4 部分视图未在父视图中呈现答案

【问题标题】：ASP.NET MVC4 PartialView Not Being Rendered Inside Parent ViewASP.NET MVC 4 部分视图未在父视图中呈现
【发布时间】：2013-07-07 15:23:32
【问题描述】：

我正在尝试过滤实体列表并使用过滤后的数据更新页面上的部分视图。部分视图返回带有过滤数据的正确模型，但未在父页面内呈现。相反，它在空 HTML 页面的“body”元素中呈现。我已经找到了很多关于此的主题，但即使我似乎遵循他们的指示，我仍然没有运气。来自社区的全新视角可能会有很大帮助。

@model PennLighting.ViewModels.LinecardViewModel
@{
    ViewBag.Title = "Linecard";
}
<div class="linecard-head">
    @using (Ajax.BeginForm("Index",
        new AjaxOptions
        {
            UpdateTargetId = "linecard"
        }))
    {
        @Html.EditorFor(model => model.Categories)

        <div class="buttons">
            <input type="submit" name="btnFilter" value="Filter" />
            <input type="submit" name="btnShowAll" value="Show All" />
        </div>
    }
</div>
<div id="linecard">
    @Html.Partial("Linecard")
</div>
@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

public ActionResult Index()
{
    var viewModel = new LinecardViewModel();
    viewModel.Categories = db.Categories
        .OrderBy(c => c.Name).ToList();
    viewModel.Manufacturers = db.Manufacturers
        .OrderBy(m => m.Name).ToList();
    return View(viewModel);
}

public ActionResult Index(string btnFilter, string[] selectedCategories)
{
    var viewModel = new LinecardViewModel();
    var selectedMfrs = new List<Manufacturer>();
    if (btnFilter != null && selectedCategories != null)
    {
        var categoryIds = selectedCategories.Select(c => int.Parse(c)).ToArray();
        if (categoryIds != null)
        {
            selectedMfrs = db.Manufacturers
                .Where(m => m.Categories.Any(c => categoryIds.Contains(c.ID)))
                .OrderBy(m => m.Name).ToList();
        }
    }
    else
        selectedMfrs = db.Manufacturers.OrderBy(m => m.Name).ToList();
    viewModel.Manufacturers = selectedMfrs;
    return PartialView("Linecard", viewModel);
}

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
</head>
<body>
    <div id="container" class="round-bottom">
        <div id="header">
            <div id="header-left">
                <div id="logo">
                    <a href="@Url.Content("~/")">
                        <img src="@Url.Content("~/Content/Images/logo.png")" alt="Penn Lighting Associates" /></a>
                </div>
            </div>
            <div id="header-right">
                <ul class="nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "Index", "About")</li>
                    <li>@Html.ActionLink("Linecard", "Index", "Linecard")</li>
                    <li>@Html.ActionLink("Events", "Index", "Events")</li>
                    <li>@Html.ActionLink("Gallery", "Index", "Gallery")</li>
                    <li>@Html.ActionLink("Contact", "Index", "Contact")</li>
                    <li><a href="http://oasis.pennlighting.com:81/OASIS/desk/index.jsp" target="_blank">
                        Customer Login</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
    </div>
    <div id="footer">
        <p>
            Copyright &copy; 2008 Penn Lighting Associates</p>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts",false)
</body>
</html>

那么我错过了什么？谢谢！

【问题讨论】：

你能出示你的_Layout.cshtml吗？

标签： ajax asp.net-mvc asp.net-mvc-4 partial-views

【解决方案1】：

您不能在同一个控制器上使用同一个 HTTP 动词访问同名的 2 个操作。您可能想要装饰您的 Index contorller 操作，该操作通过 AJAX 调用调用并返回带有 [HttpPost] 属性的部分：

[HttpPost]
public ActionResult Index(string btnFilter, string[] selectedCategories)
{
    ...
}

【讨论】：

他没有说错，这是硬性规定，除非有什么重要的东西没有显示出来。
@DomRocco - 我已经尝试了很多次，并且从 v1.1 开始我就一直在做 MVC。除非您明确说明动词，否则它会引发错误。这不是 C# 规则，而是 MVC 规则......这些不仅仅是方法，它们是路由引擎需要唯一找到的操作。
嘘！这就是答案。您明确添加了 [HttpPost]，这就是您不会收到运行时错误的原因。现在达林晚上可以睡个好觉了。 :)
@DomRocco，从您的第二个控制器操作中删除 [HttpPost] 属性。现在运行您的应用程序并导航到第一个操作。您在浏览器运行时会得到什么？
@DomRocco，再一次：你不会得到构建错误，这是正常的。我们并不是说您会遇到构建错误。运行应用程序 (F5) 并在删除 HttpPost 属性后导航到浏览器中的 Index 操作（您的问题中显示的原始代码）。

【解决方案2】：

没有看到更多您的解决方案，这有点模糊，但我相信您仍然希望返回索引并将模型数据传递到您视图中的 Partial 中。你这样做的方式只会返回部分视图，这就是你得到这些结果的原因。

所以在过滤后的索引中：

return View(viewModel)

在索引视图中，将数据传递给部分，我假设没有看到有正确的模型关联来显示。

更新

如果您希望动态提取数据子集而保持其余部分不变，则使用为部分视图指定的操作执行 AJAX POST 并使用过滤器信息。获取数据结果并将它们放在 Linecard div 中。

发送数据的方式有很多种（JSON 捆绑、序列化表单、单个数据点）。下面是一些例子：

http://brandonatkinson.blogspot.com/2011/01/using-jquery-and-aspnet-mvc-to-submit.html

MVC ajax json post to controller action method

【讨论】：

我故意使用部分视图，这样我的复选框就不会在每次回发时重置。使用局部视图似乎是避免这种情况的最简洁方法。
然后你应该做一个 AJAX POST 到局部视图控制器，然后用内容填充 Linecard div。
感谢您的建议。我是 MVC 的新手，甚至更熟悉 AJAX 的使用。网上有没有例子可以很好地说明这种方法？
添加了几个链接。谷歌搜索 MVC POST AJAX 表单序列化，你会得到一些不同的结果。
再次感谢您的意见，西安...今天下午去看看，如果我有任何进展会跟进。

【解决方案3】：

问题是我的 jqueryval 包缺少 jquery.unobtrusive-ajax.js 文件。我的代码一旦包含在内就可以正常工作。

【讨论】：