[英]Ajax.ActionLink duplicating and inserting the entire view into a <div> inside that view
我是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视图被复制并插入到“ List” div中。 我觉得这将是一个愚蠢的错误,但是我似乎找不到它。
谢谢,Kwinsor5
您必须为列表视图创建一个新的局部视图,并将其命名为_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);
}
现在,您可以在“列表”视图及其局部视图中拥有不同的元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.