Ajax.ActionLink 复制整个视图并将其插入到该视图内的 <div> 中

Question

我是 MVC 的新手，正在为我姑妈的业务开发电子商务应用程序。我有一个带有部分视图的产品列表页面，用于显示按类别搜索的菜单。这一切都与 Html.ActionLink 助手工作得很好，但是当我切换到 AJAX 时，它会更新产品，但会将整个列表视图插入到我想要更新的 div 中（标题和包括的所有内容）。我假设它与我定义的 UpdateTargetId 或布局有关（我不是 css 高手）。所以这里是：

产品控制器：

public ViewResult List(string category, int page = 1)
    {
        JProductListViewModel model = new JProductListViewModel
        {
            JProducts = repository.JProducts
                .Where(p => category == null || p.Category == category)
                .OrderBy(p => p.ProductID).Skip((page - 1) * PageSize).Take(PageSize),
            PagingInfo = new PagingInfo
            {
                CurrentPage = page,
                ItemsPerPage = PageSize,
                TotalItems = category == null ?
                    repository.JProducts.Count() :
                    repository.JProducts.Where(x => x.Category == category).Count()
            },
            CurrentCategory = category
        };
        return View(model);
    }

菜单部分：

@foreach (var link in Model)
{
    <div class="catmenuitem">
    @if (link != null)
    {
        @Ajax.RouteLink(link, "", new { controller = "Product", action = "List", category = link, page = 1 }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "List", LoadingElementId = "loading", LoadingElementDuration = 1000 },
    new { @class = link == ViewBag.SelectedCategory ? "selected" : null })
    }
    </div>
}

列表视图：

<div id="List">
    @foreach (var p in Model.JProducts)
    {
            Html.RenderPartial("ProductSummary", p);
    }
</div>

我得到的结果是整个 List.cshtml 视图被复制并插入到“列表”div 中。我有一种感觉，这将是某种愚蠢的错误，但我似乎找不到它。

谢谢， Kwinsor5

Answer 1

您必须为您的列表视图创建一个新的局部视图，将其命名为_List。然后更改您的列表视图以包含 _List 部分视图，并更改您的列表控制器以在 AJAX 请求的情况下返回 _List 部分视图。

列表部分视图_List：

<div id="List">
@foreach (var p in Model.JProducts)
{
        Html.RenderPartial("ProductSummary", p);
}
</div>

列表视图：

<div></div>
@Html.Partial("_List", Model)
<div></div>

列表控制器的变化：

        if (Request.IsAjaxRequest())
        {
            return PartialView("_List", model);
        }

现在您可以在列表视图及其部分视图中拥有不同的元素