MVC部分ビューが表示されない

Question

テーブル内の行をクリックして部分ビューを読み込むためにAjax呼び出しを使用しようとしています。

コントローラーが正常に呼び出され、正しいオブジェクトが返されますが、ビューには何も表示されません。

ビュー

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

アヤックス

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

部分図

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

コントローラのコール

[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

私のコメントに記載されています。

<div id="#testSuitesList"> 

</div> 

これは

<div id="testSuitesList"> 

</div> 

あなたのjqueryのセレクタ$('#testSuitesList').html(data);ない＃」の名前で「testSuitesList」の名前でIDを探しに指定している必要があります：それはこのように思えることはあなたの問題ですtestSuitesList "である。

Answer 2

htmlの代わりにreplaceWithを使用してみてください。

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