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 "의 이름으로 아이디를 찾기 위해 지정되어 있어야한다 :이처럼 보인다 당신의 문제입니다 testSuitesList ".

Answer 2

HTML 대신 replaceWith를 사용해보세요.

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