Search code examples
ajaxback-buttonasp.net-mvc-partialview

Back button causes naked partial view


Here's the scenario: I invoke an action method which returns PartialViewresult via ajax. The result is loaded into another view. Then I Navigate to another page and after this if I press browser back button the previously loaded PartialViewResult appears naked. By naked I mean no container view and layout is loaded, just plain html elements are rendered. Like this:

enter image description here

Has anyone faced and tackled this problem?

EDIT: To provide a better understanding of the situation here's my action method:

public ActionResult Inbox(int pageNumber = 1, int pageSize = 10, string filter = null)
{
    var inboxItems = GetInboxItems(filter);
    PagedList<InboxItem> pagedList = inboxItems.ToPagedList(pageNumber, pageSize);
    pagedList.DisplayPage(pageNumber);
    InboxViewModel vm = new InboxViewModel(pagedList);
    if (!Request.IsAjaxRequest())
        return View(vm);
    return PartialView(vm);
}

In the Inbox.cshtml file I load layout based on if the request is ajax request:

@model Dokcentra.Models.InboxViewModel

@if (!Request.IsAjaxRequest())
{
    Layout = "~/Views/Shared/_Cabinet.cshtml";
}

I think the last piece of code is what causes this problem because the layout file _Cabinet.cshtml has all the html, css and js and when I press browser back button that layout file doesn't load.


Solution

  • After lots of digging and hair pulling I realized that this only happens in Chrome. I found out that I need to provide a different url from the full html document. So when sending a reuest through AJAX to this action method I just append any arbitrary query string value to "?Cabinet/Inbox", like this:

    var url= "/Cabinet/Inbox?anythingYouWant"