Question

我正在尝试过滤实体列表，并使用过滤后的数据更新页面上的局部视图。部分视图使用过滤后的数据返回正确的模型，但不会在父页面内呈现。相反，它在空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>

那我错过了什么？谢谢！

Answer 1

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

所以在过滤的索引中：

return View(viewModel)

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

<强>更新

如果您希望动态提取数据子集并保持其余部分不变，则使用过滤器信息执行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

Answer 2

在同一个HTTP动词上可以访问相同名称的同一个控制器上不能有2个动作。您可能希望修饰使用AJAX调用调用的Index控制器操作，并返回具有[HttpPost]属性的部分：

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

Answer 3

问题是我的jqueryval包缺少jquery.unobtrusive-ajax.js文件。我的代码就像包含它一样。

ASP.NET MVC4 PartialView未在父视图中呈现

3 个答案: