【问题标题】:Retain partial view information on page refresh in MVC在 MVC 中保留页面刷新时的部分视图信息
【发布时间】: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 - 我已经更新了上面的代码。如果您需要更多信息,请告诉我。谢谢

标签: asp.net-mvc partial-views


【解决方案1】:

基于代码,您可以使用服务器会话来保存这些数据。但是你需要注意什么时候应该清除它,如果你期望它。

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

控制器代码

     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);
    }

【讨论】:

  • 在应用上述代码后按下刷新页面时仍然呈现着陆页。
  • 对不起,我忘记了这种方式属性 SavedPaging 字典没有保存。我更新了代码
  • $exception{"Sequence contains no elements"} System.InvalidOperationException 在 PartialView 中在线 @Html.PagedListPager(Model, page =&gt; Url.Action("GetCategoryItems", new { page, categoryName = Model.First().CategoryName }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "itemsInACategory" }))
  • 当我点击一个菜单按钮时,它会呈现相关的局部视图。我去了它的第 3 页并按下了刷新按钮。它呈现了登陆页面。我再次点击菜单按钮,它在exception上方抛出。
  • 如果您想使用 TeamViewer 访问权限来检查其行为,请随时告诉我。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-22
  • 2014-07-24
  • 1970-01-01
  • 2012-10-24
  • 2018-05-13
相关资源
最近更新 更多