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>

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

Answer 1

正如我的评论所述。这似乎是你的问题：

<div id="#testSuitesList">

</div>

这应该是

<div id="testSuitesList">

</div>

您的jquery选择器$('#testSuitesList').html(data);指定查找名称为“testSuitesList”的ID，而不是名称为“#testSuitesList”。

Answer 2

尝试使用replaceWith而不是html。

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

MVC部分视图未显示

2 个答案: