MVC部分視圖不顯示

我試圖使用Ajax調用來加載部分視圖上表單中的一行點擊。MVC部分視圖不顯示

控制器正確調用，並返回正確的對象，但視圖無法顯示任何已加載。

查看

<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); 
     }

來源

2016-10-11 TLBB

嘗試從您的ajax調用中移除dataType：「html」。 – sam

刪除數據類型不起作用 – TLBB

檢查您的瀏覽器控制檯/網絡選項卡，看看你是否得到良好的迴應（200確定）爲您的AJAX調用 – Shyju

正如我的評論所述。看起來這是你的問題：

<div id="#testSuitesList"> 

</div>

這應該是

<div id="testSuitesList"> 

</div>

你的jQuery選擇$('#testSuitesList').html(data);是指定要尋找一個ID爲「testSuitesList」這個名字不以「＃名稱testSuitesList」。

來源

2016-10-11 19:37:57

嘗試使用replaceWith而不是html。

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

來源

2016-10-11 19:28:37 gmdev86

MVC部分視圖不顯示

回答

相關問題