Load PartialView for AJAX and View for non-AJAX request

Question

I wanna implement something like in facebook:

• after left click on photo, it is loaded via AJAX
• after middle click on scroll, it is loaded normally with additional layout

For now I have a View, which is loaded in Controller in two different methods:

public ActionResult Overview()
{
    return View("Overview");
}

public ActionResult OverviewPartialView()
{
    return PartialView("Overview");
}

And in jquery script it looks like this:

$(contentContainer).load(_link + 'PartialView');

My question is, is there a better way to solve that problem? I have tried with something like that in _ViewStart:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    if (IsAjax)
    {
        Layout = null;
    }
}

And something like that in Controller:

public ActionResult Index()
{
    if (Request.IsAjaxRequest())
        return PartialView();

    return View();
}

But in those solutions I had a problem with cache, after opening a page with layout, in AJAX request also that page with layout was loaded.

Answer 1

You could use a single action:

public ActionResult Overview()
{
    return View();
}

and inside _ViewStart.cshtml:

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/Layout.cshtml";
}

Another possibility is to use the following:

public ActionResult Overview()
{
    if (Request.IsAjaxRequest())
    {
        return PartialView();
    }
    return View();
}

then if you want to avoid caching problems you could use a POST request instead of GET:

$.post(_link, function(result) {
    $(contentContainer).html(result);
});

or use $.ajax with GET and specify cache: false which will append an unique query string parameter to avoid browsers caching:

$.ajax({
    url: _link,
    type: 'GET',
    cache: false,
    success: function(result) {
        $(contentContainer).html(result);
    }
});