ASP.NET MVC Partial Views + Ajax Load

Question

I am working on a project and in order to not have the Layout view being reloaded with every page change, I decided to change my views to partial views. In order to load the views when a user clicks on one of the menu items in the navigation menu I am now using jquery ajax like the following:-

$("ul.metismenu a:not(.subMenuParent)").unbind().click(function (e) {

    e.preventDefault();

    var url = $(this).attr("href");
    window.history.pushState("", "", url);

    $.ajax({
        url: url,
        dataType: 'html',
        success: function (data) {

            $('#page-content').html(data);

        }
    });
});

The element page-content resides in the Layout view. It is working fine, however the issue I am encountering now is that when i try to access the View directly say i go /Dashboard directly in the browser I will get just the partial view, without the Layout page. Anyone got some ideas how I can solve this please? Thank you in advance for any advice.

Just add @{ Layout = "~/Views/Shared/_Layout.cshtml" } in your partial view. — mmushtaq
– mmushtaq, Commented Jan 29, 2017 at 13:24
@mmushtaq i already tried that but the Layout was rendered twice then — krafo
– krafo, Commented Jan 29, 2017 at 13:52
Can you share how controller actions which return partial views ? — Chetan
– Chetan, Commented Jan 30, 2017 at 4:12

Arathy T N · Accepted Answer · 2017-01-30 04:09:25Z

1

You can have different layout set from different controller actions by using a variable. Even a ViewBag would suffice. For the action Dashboard , you can set the ViewBag.Layout (say) to the Layout html and for the partial view you can set ViewBag.Layout to empty. THen use this variable in the html page. So, the right layout will be picked up depending on the action we are calling.

answered Jan 30, 2017 at 4:09

Arathy T N

3043 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

krafo Over a year ago

thanks mate you pointed me in the right direction. I posted the fix that i came up with and marked your feedback as answer since it was thanks to you I came up with the idea.

Arathy T N Over a year ago

Glad that helped!!

shady youssery · Accepted Answer · 2017-01-29 14:26:58Z

0

your url call MVC Action, make your return ActionResult : PartialView()

answered Jan 29, 2017 at 14:26

shady youssery

4402 silver badges17 bronze badges

3 Comments

krafo Over a year ago

my action returns an ActionResult and it is already return PartialView()

shady youssery Over a year ago

try to add @{ Layout = string.Empty; }

shady youssery Over a year ago

Or turns out that jquery.unobtrusive-ajax.js is not included by default. Adding it can be solved the problem.

krafo · Accepted Answer · 2017-01-30 20:54:54Z

0

I was able to fix the issue by first checking if the request coming is an ajax request or not. Then depending on the type of request i set the Layout view. This is a sample code from an action:-

    public ActionResult Index()
    {
        if (!Request.IsAjaxRequest())
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
        }
        return PartialView();
    }

And in the partial view i set the following:-

  @{ 
      Layout = ViewBag.Layout; 
   }

Hope this helps someone who might encounter the same issue.

answered Jan 30, 2017 at 20:54

krafo

1835 silver badges20 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Partial Views + Ajax Load

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related