MVC ajax is returning partial with layout instead of as a partial

Question

I have an MVC website with a Home controller and a Weather controller. The home controller loads the start page (index) and presents a number of choices which all load content via ajax.load thusly:

<li onclick="LoadContent('/Weather/Weather');">...</li>

LoadContent does the following:

function LoadContent(url){
    try {
        $("#divMainContent").load(url, function () {
            //do visual graphic stuff here
            ...
        });
    } ...
}

The Weather/Weather controller/view calls a weather api on the backend and passes the model like so:

public ActionResult Weather()
    {
        //api stuff
        ...
        return View(weatherObj);
        //return View("_webcams", weatherObj);
    }

When I click on the list item to load the partial I want, it loads the Weather/Weather.cshtml view. It includes the following:

<div id="tabs">
    <ul>
        <li>...</li>
        <li><a href="#tabs-6">Webcams</a></li>
    </ul>
    ...
    <div id="tabs-6">
        @Html.Partial("~/Views/Weather/_webcams.cshtml")
    </div>
</div>

This is a jquery ui tab layout. Works fine. The _webcams.cshtml partial contains a bootstrap carousel.

Having looked at the ajax response, the HTML partial call is returning the full layout (which includes bootstrap again thus breaking the carousel). To verify this, I've tried having the Weather/Weather controller/action point directly to the partial (as comment out above) and the carousel works when I go directly to Weather/Weather (thus verifying that my partials are including the surrounding _layout.cshtml code.

I've tried the solutions here but either I'm doing it wrong (telling the partial to use no layout) or the $().load() function behaves differently than a normal ajax call.

Could someone shed some light as to what is going on?

Have you tried `return PartialView("~/Views/Weather/_webcams.cshtml", weatherObj);` in your controller action? — Jonathon Chase, May 25 '18 at 02:21
Although that returns only the webcams partial and not ultimately the response I want, I have and the partial renders correctly and the carousel works. So, yes! — user4593252, May 25 '18 at 02:26
I did. I even linked to it saying that the solutions there either don't work because I'm using $().load or I'm implementing the solutions wrong. — user4593252, May 25 '18 at 02:29
That doesn't work UNLESS I browser directly to Weather/Weather. So, if I load it via ajax, it does not. — user4593252, May 25 '18 at 02:49

score 1 · Accepted Answer · answered May 25 '18 at 03:03

1

There is a distinct difference between $().load() and $.ajax.

I don't know what the difference under the hood is but changing my $().load to a $.ajax call fixed the issue.

answered May 25 '18 at 03:03

user4593252

3,496
6
29
55

MVC ajax is returning partial with layout instead of as a partial

1 Answers1