【发布时间】:2019-05-16 03:57:04
【问题描述】:
页面的左侧菜单上有按钮列表。最初页面是使用此左侧菜单和主视图上的部分视图呈现的。当用户单击左侧菜单按钮之一时,容器中会呈现相关的局部视图。
此图描述了这个想法:
每个局部视图依次都有分页。假设用户在局部视图 2 的第 4 页并刷新页面,它会返回到登录页面。
我需要弄清楚如何在页面刷新之前存储部分视图信息以及页面编号信息,以便用户在页面刷新时登陆相同的 UI。
此代码最初用于设置父视图:
public ActionResult ShopOnline()
{
var list = db.Items.Include(i => i.Brand).Include(i => i.Category).ToList();
var Cats = db.Categories.OrderBy(x => x.Name).ToList();
var SubCats = db.SubCategories.OrderBy(x => x.Name).ToList();
var FurtherSubCats = db.FurtherSubCategories.OrderBy(x => x.Name).ToList();
Dictionary<string, int> cattot = new Dictionary<string, int>();
for (int j = 0; j < Cats.Count; j++)
{
var catName = Cats[j].Name.ToString();
var result = db.Items.Count(x => x.Category.Name == catName);
cattot.Add(Cats[j].Name, result);
}
Dictionary<string, int> SubCategoriesWithTotal = new Dictionary<string, int>();
for (int i = 0; i < SubCats.Count; i++)
{
var SubCategoryName = SubCats[i].Name.ToString();
var SubCategoryTotal = db.Items.Count(x => x.SubCategoryName == SubCategoryName);
SubCategoriesWithTotal.Add(SubCats[i].Name, SubCategoryTotal);
}
Dictionary<string, int> FurtherSubCatsWithTotal = new Dictionary<string, int>();
for (int k = 0; k < FurtherSubCats.Count; k++)
{
var FurtherSubCategoryName = FurtherSubCats[k].Name.ToString();
var SubCategoryTotal = db.Items.Count(x => x.FurtherCategoryName == FurtherSubCategoryName);
FurtherSubCatsWithTotal.Add(FurtherSubCats[k].Name, SubCategoryTotal);
}
var vm = new ShopOnlineVM
{
ListOfItems = list,
SubCategories = SubCats,
FurtherSubCategories = FurtherSubCats,
CategoryNames = cattot,
SubCategoryNames = SubCategoriesWithTotal,
FurtherSubCatsNames = FurtherSubCatsWithTotal
};
return View(vm);
}
此代码产生的页面有一个左侧菜单列表。因此,当用户单击其中一个项目时,会在此父视图中设置与该项目相关的部分视图。代码是:
using PagedList;
public ActionResult GetCategoryItems(string categoryName, int? page)
{
var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList().ToPagedList(page ?? 1, 30);
return PartialView("_categoryDetails", itemList);
}
局部视图
@using PagedList;
@using PagedList.Mvc;
@model IPagedList<OnlineStore.Models.Item>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<div id="itemsInACategory">
<div id="wrapper-Details" class="wrapper">
@foreach (var item in Model)
{ //...items are rendered }
</div>
@Html.PagedListPager(Model, page => Url.Action("GetCategoryItems", new { page, categoryName = Model.First().CategoryName }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "itemsInACategory" }))
</div>
这对每个左侧菜单项重复,即单击一个项目会呈现相关的局部视图。
我需要的是假设用户单击左侧菜单项 6 来呈现 PartialView 编号 6 并且 PartialView 编号 6 有 10 个页面,并且用户在第 7 页,并刷新页面,现在它正在将用户带回父页面(登陆页面)显然是因为 is 用户正在刷新的页面没有关于其 URL 中呈现的部分视图的信息。
我不确定如何确保用户在单击刷新按钮后进入非常相关的局部视图。
由于左侧菜单项(类别),我应用了这个现有的逻辑。这些类别具有具有进一步子类别的子类别,当用户最初单击类别项目时,所有类别列表项目都会滑到左侧(人为消失),并且与该类别相关的子类别滑入并且相同的重复每个子类别单击以显示更多子类别。所有这些都发生在页面的左侧和右侧(主)部分,相关的 PartialView 正在呈现。
现在,如果我更改逻辑以在 URL 中存储有关类别、子类别或进一步子类别名称和页码的信息,并路由到另一个操作,因此是一个新页面(视图),我不会确定如何滑动相关的左侧菜单以显示确切的观点(即类别、子类别 - 或进一步的子类别)。
我需要实现的工作示例在这里 (https://shop.coles.com.au/a/a-national/everything/browse1)
【问题讨论】:
-
如果您使用客户端分页或服务器分页,您能否向我们展示一些代码 - 解决方案可能会有所不同
-
@Pribina - 我已经更新了上面的代码。如果您需要更多信息,请告诉我。谢谢