阻止将MVC部分页面的浏览器缓存为完整页面(在后面/前面)

时间:2014-04-16 09:33:49

标签: ajax asp.net-mvc caching partial-views

我有一个iphone风格的列表视图系统,用于导航网站,如下所示:

How it should appear

当通过AJAX加载面板时,URL会动态更改,并且使用puststate将相同的URL放在浏览器地址栏中。这允许页面刷新重新加载当前页面:

this.Historyjs.pushState({}, "", url);

为了完成这项工作,页面可以将自己作为部分页面或整页返回。检测差异的代码是基本控制器,如下所示:

    public bool IsPartialPage
    {
        get
        {
            // ListViewer will strip out HTML from a full page if this occurs
            return Request.IsAjaxRequest() || !string.IsNullOrEmpty(Request["partial"]);
        }
    }

示例控制器操作如下所示(请注意部分视图缓存过期):

    [OutputCache(Duration=1)]
    public ActionResult ListViewerDocumentation()
    {
        if (!base.IsPartialPage)
        {
            ViewBag.Layout = "~/Views/Shared/_ListViewLayout.cshtml";
        }
        return PartialView();
    }

我遇到的问题是,当您使用浏览器的后退和前进按钮进行导航时,偶尔会决定先前的部分页面是否足以成为整个页面而不是拨打服务器(用Fiddler2检查),看起来像这样:

How it appears after random Back/Forward

关于确保后退和前进导航的方法的任何建议总是拉回整页,而不是从其Ajax请求缓存中撤回?只是让Ajax调用独一无二,或者后面/前面的vanilla URL是否仍然匹配?

1 个答案:

答案 0 :(得分:1)

结果诀窍是关闭Ajax请求上的缓存拉取部分页面,而不是服务器,因为它从未被击中(在写完上述问题后突然亮起来) :

   $.ajax(
            {
                cache: false,     // << Added this
                url: url,
                type: "GET",
                error: function (jqXHR, textStatus: string, errorThrown: string)
                {
                    // On error (eg. "not found") empty out the display
                    THIS._removeContent();
                },
                success: function (data: string, textStatus: string, jqXHR)
                {
                    var $data = $(data);
                    THIS._insertContent($data, function ()
                    {
                    });
                }
            });

缓存false也显然确保浏览器不会在页面返回/转发操作中重复使用页面。