在MVC中保留有关页面刷新的部分视图信息

时间:2019-05-16 03:57:05

标签: asp.net-mvc partial-views

页面的左侧菜单上具有按钮列表。最初,页面是使用此左侧菜单和主视图上的局部视图呈现的。当用户单击左侧菜单按钮之一时,容器中将呈现相关的局部视图。

此图在此描述了这个想法:

enter image description here

每个局部视图依次都有分页。假设用户位于部分视图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 number 6,PartialView number 6具有10个页面,并且用户位于页面7上,并刷新页面,现在它将用户带回到上级页面(登录页面)显然是因为正在刷新页面的用户,而该页面在其URL中没有有关已渲染的局部视图的信息。

我不确定单击刷新按钮后如何确保用户落在非常相关的局部视图上。

由于左侧菜单项(类别),我应用了此现有逻辑。这些类别具有子类别,这些子类别具有其他子类别,并且当用户最初单击类别项目时,所有类别列表项都滑到左侧(人为消失),并且与该类别相关的子类别滑入并且重复相同的步骤。每个子类别均单击以显示更多子类别。所有这些都发生在页面的左侧和右侧(主要)部分,正在渲染相关的PartialView。

现在,如果我更改了将有关类别,子类别或其他子类别名称和页面编号的信息存储在URL中的逻辑,并路由到另一个操作,从而路由到新页面(视图),则不是确保如何滑动相关的左侧菜单,以显示准确的视点(即类别,子类别-或其他子类别)。

这里需要实现的一个工作示例(https://shop.coles.com.au/a/a-national/everything/browse1

1 个答案:

答案 0 :(得分:0)

基于代码,您可以使用服务器会话来保存此数据。但是如果需要,您需要注意何时清除它。

我没有运行它,但是基本上您在会话中保存了请求的页面。否则,从会话中加载它或选择默认值。会话通过部分页面密钥存储它。

控制器代码

     private Dictionary<string, int> SavedPaging
    {
        get
        {
            var saved = (Dictionary<string, int>)Session[nameof(SavedPaging)];
            if (saved is null)
            {
                Session[nameof(SavedPaging)] = saved = new Dictionary<string, int>();
            }

            return saved;
        }
        set { Session[nameof(SavedPaging)] = value; }
    }

    public ActionResult GetCategoryItems(string categoryName, int? page)
    {
        const string pageKey = nameof(GetCategoryItems);
        if (!page.HasValue && SavedPaging.ContainsKey(pageKey))
        {
            var savedPage = SavedPaging[pageKey];
            page = savedPage;
        }
        else if(page.HasValue && !SavedPaging.ContainsKey(pageKey))
        {
            SavedPaging.Add(pageKey,page.Value);
        }
        else if(page.HasValue && SavedPaging.ContainsKey(pageKey))
        {
            SavedPaging[pageKey] = page.Value;
        }

        var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList().ToPagedList(page ?? 1, 30);
        return PartialView("_categoryDetails", itemList);
    }