MVC Partial View not showing

Question

I'm trying to use an Ajax call to load in partial views on click of a row within the table.

The controller is properly getting called, and returning the correct object, however the view fails to show anything has loaded.

View

<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Scripts/CSS Style/LandingPage.css" rel="stylesheet" />


<H1>Integration Test Engine</H1>


<table class="table table-hover">
    <tr>
        <th>Status</th>
        <th>Build</th>
        <th>Test Suites</th>
        <th>Test Suites Last 10-Days</th>
    </tr>


    <tbody>
    @foreach (var testRun in Model.TestRuns)
    {
        <tr class='clickable-row' data-toggle="collapse">

            <td>
                <img width="40" height="40" src="~/Content/Images/@HtmlUtilities.GetTestRunIconName(testRun.TestRunProgress)" title="@HtmlUtilities.GetImageTitleForProgress(testRun.TestRunProgress)" alt="@HtmlUtilities.GetImageTitleForProgress(testRun.TestRunProgress)"/>
            </td>

            <td>
                <div class="BuildFont">@testRun.Version</div>
            </td>

            <td>
                <div class="Font1">@testRun.TestSuitesCompletedToString()</div>

                @if (testRun.TestRunProgress == ProgressIndicatorEnum.CompletedWithoutErrors)
                {
                    <div class="Font1">@testRun.TestSuitePassedPercentageToString() </div>
                }
                else if (testRun.TestRunProgress == ProgressIndicatorEnum.CompletedWithErrors)
                {
                    <div class="FailFont">@testRun.TestSuiteFailedPercentageToString() </div>
                }
                else
                {
                }

            </td>
        </tr>




    }
    </tbody>

</table>

<div id="#testSuitesList">

</div>

Ajax

<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".clickable-row").click(function (e) {
            event.stopImmediatePropagation();
            e.preventDefault(e);

            var model = {
                TestRunId: 1
            }

            $.ajax({
                type: 'POST',
                url: '/TestRuns/ListOfTestSuitesFromSelectedTestRun',
                cache: false,
                data: JSON.stringify(model),
                contentType: 'application/json; charset=utf-8',
                dataType: "html",
                success: function (data) {
                    $('#testSuitesList').html(data);
                }
            });
        });
    });
</script>

Partial View

<table class="table table-striped">
    <tr>
        <th>Status</th>
        <th>Test Suite</th>
        <th>Start Time</th>
        <th>End Time</th>
    </tr>

    <tbody>
        @foreach (var testSuite in Model.TestSuiteExecutionList)
        {
            <tr>
                <td>
                    <img width="20" height="20" src="~/Content/Images/@HtmlUtilities.GetTestRunIconName(testSuite.TestSuiteProgress)" title="@HtmlUtilities.GetImageTitleForProgress(testSuite.TestSuiteProgress)" alt="@HtmlUtilities.GetImageTitleForProgress(testSuite.TestSuiteProgress)" />
                </td>
                <td>@testSuite.TestSuiteName</td>
                <td>@testSuite.StartDateTime</td>
                <td>@testSuite.EndDateTime</td>
            </tr>
        }
    </tbody>
</table>

Controller call

 [HttpPost]
        public ActionResult ListOfTestSuitesFromSelectedTestRun(int testRunId)
        {
            //Get TestRun from Id
            //Populate View Model
            //Send partial view with view model

            return PartialView("TestSuitesExecutionResultPartialView", testSuiteExecutionsResultsViewModel);
        }

Answer 1

As mentioned in my comment. It seems like this is your issue:

<div id="#testSuitesList">

</div>

This should be

<div id="testSuitesList">

</div>

Your jquery selector $('#testSuitesList').html(data); Is specifying to look for an id with the name of "testSuitesList" not with the name of "#testSuitesList".

Answer 2

try using the replaceWith instead of the html.

$('#testSuitesList').replaceWith(data);