How to fill an empty <div> with a partial view using ajax

Question

I am using Visual Studio 2013, .Net 4.5, MVC and Visual Basic. I am trying to render a partial view in an empty div of another view using jQuery and Ajax. My script is running successfully in that on the drop down list change, my partial view is rendered, but instead of it rendering in a div on the same view, it renders on it's own page.

Main View:

<div class="col-md-8">
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropDownSelectBuilding" data-toggle="dropdown" 
                        aria-expanded="true">

                    <span class="selection"></span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectBuilding">
                    @For Each item In Model
                        Dim currentItem = item
                        @<li role="presentation"><a role="menuitem" tabindex="-1" href="/LocationSelect/SelectFloor"
                                                    >@Html.DisplayFor(Function(modelItem) currentItem)</a></li>
                    Next
                </ul>
            </div>
            @section Scripts
                <script>
                    $('#dropDownSelectBuilding').onChange(function () {
                        $.ajax({
                            url: '/LocationSelect/SelectFloor',
                            contentType: 'application/html; charset=utf-8',
                            type: 'GET',
                            dataType: 'html'
                        })
                        .success(function (result) {
                            $('#showFloors').html(result);
                        })
                        .error(function (xhr, status) {
                            alert(status);
                        })
                    });
                </script>
                End Section
        </div>
    </div>
    <div class="row" id="showFloors">

    </div>

Partial View:

    <div class="col-md-4">
        <label>*Select the floor this item will move to:</label>
    </div>
    <div class="col-md-8">
        <div class="btn-group">
            <button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropDownSelectFloorMoveTo" data-toggle="dropdown" aria-expanded="true">

                <span class="selection"></span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectFloorMoveTo">
                @For Each item In Model
                    Dim currentItem = item
                    @<li role="presentation"><a role="menuitem" tabindex="-1" href="/LocationSelect/SelectFloor"
                                                >@Html.DisplayFor(Function(modelItem) currentItem)</a>
                    </li>
                Next
            </ul>
        </div>
    </div>

Controller:

Public Class LocationSelectController
    Inherits Controller

    Private db As New MCSCInventoryModels

    ' GET: LocationSelect
    Function Index() As ActionResult

        Dim distinctBuildings = From Row In db.tblLocations
                                Select Row.Building
                                Distinct

        Return View(distinctBuildings)
    End Function

    ' GET: FloorS
    Function SelectFloor(ByVal selectedBuilding As String) As PartialViewResult

        Dim floorsInSelectedBuilding = From Row In db.tblLocations
                                       Where Row.Building = selectedBuilding
                                       Select Row.Floor
                                       Distinct

        Return PartialView(floorsInSelectedBuilding)
    End Function
End Class

Can you tell me why this ajax call opens the partial view in it's own page, instead of rendering it in the specified div?

Update I have checked the accepted answers to both of these questions and they have not solved the issue. Here and Here

Answer 1

Ultimately what was causing this issue was my use of a non-traditional drop down. To solve the problem I added a class to the <a role="menuitem"> like so:

@<li role="presentation"><a class="ddlist" role="menuitem" tabindex="-1" href="#"
                                >@Html.DisplayFor(Function(modelItem) currentItem)</a></li>

and then used:

$('.ddlist').click(function () {

to trigger the ajax call.

I also removed the href="/LocationSelect/SelectFloor" which was left over from the design phase and causing the partial view to open in it's own page when a selection was made and the ajax wasn't being triggered.

Answer 2

You are most likely missing the unobtrusive script in your layout page.

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

refer to this question:

Why does Partial View show as full page in MVC 5 Visual Studio 13?

one more thing is to add the last (UnobtrusiveJavaScriptEnabled) line to your config file (Web.Config):

<configuration>
    <appSettings>
        <add key="webpages:Version" value="2.0.0.0"/>
        <add key="webpages:Enabled" value="false"/>
        <add key="PreserveLoginUrl" value="true"/>
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>