MVC Partial View wird nicht angezeigt

Question

Ich versuche, einen Ajax-Aufruf in Teilansichten beim Klicken auf eine Zeile in der Tabelle zu laden.

Der Controller wird ordnungsgemäß aufgerufen und gibt das richtige Objekt zurück. Die Ansicht zeigt jedoch nichts an.

Ansicht

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

Teilansicht

<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-Aufruf

[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

Wie in meinem Kommentar erwähnt. Es so scheint, ist Ihr Problem:

<div id="#testSuitesList"> 

</div> 

Diese

<div id="testSuitesList"> 

</div> 

Ihre jquery Wähler $('#testSuitesList').html(data); für eine ID mit dem Namen zu suchen ist die Angabe von „testSuitesList“ nicht mit dem Namen „# sollte testSuitesList ".

Answer 2

versuchen Sie es mit der ReplaceWith anstelle von HTML.

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