TLBB TLBB - 1 month ago 7
Ajax Question

MVC Partial View not showing

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

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".