Блог

Я пытаюсь использовать вызов 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>
  

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>
  

Частичный просмотр

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

Как упоминалось в моем комментарии. Похоже, это ваша проблема:

 <div id="#testSuitesList">

</div>
  

Это должно быть

 <div id="testSuitesList">

</div>
  

Ваш селектор jquery $('#testSuitesList').html(data); указывает на поиск идентификатора с именем «testSuitesList», а не с именем «#testSuitesList».

попробуйте использовать replaceWith вместо html.

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