为什么我的 table 不是部分渲染？

Question

我正在尝试使用局部视图在我的 MVC5 应用程序中构建一个 table，这是我所拥有的：

ViewModel

public class ResultsViewModel
{
    public Results FirstPartyResults { get; set; }

    public Results SecondPartyResults { get; set; }

    public Results ThirdPartyResults { get; set; }
}

Index.cshtml

@model App.ViewModels.ResultsViewModel

@{
    ViewBag.Title = "Start Election";
}

<div id="partialTable">
    @{ Html.RenderPartial("_TablePartial", Model); }
</div>

<script>
    $(document)
        .ready(function () {
            $.ajax({
                    url: '/Home/StartElection',
                    type: 'POST',
                    data: "test",
                })
                .done(function(partialViewResult) {
                    $("partialTable").html(partialViewResult);
                });
        });
</script>

_TablePartial.cshtml

@model App.ViewModels.ResultsViewModel  

<div class="page-header">
    <h1>Party Results</h1>
</div>

<div id="partialTable">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Party Code</th>
                <th>Number of Seats</th>
                <th>Overall Share of Votes
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                <tr>
                    <td>
                        @Model.FirstPartyResults.PartyCode
                    </td>
                    <td>
                        @Model.FirstPartyResults.NumberOfSeats
                    </td>
                    <td>
                        @Model.FirstPartyResults.ShareOfVotes
                    </td>
                </tr>
                <tr>
                    <td>
                        @Model.SecondPartyResults.PartyCode
                    </td>
                    <td>
                        @Model.SecondPartyResults.NumberOfSeats
                    </td>
                    <td>
                        @Model.SecondPartyResults.ShareOfVotes
                    </td>
                </tr>
                <tr>
                    <td>
                        @Model.ThirdPartyResults.PartyCode
                    </td>
                    <td>
                        @Model.ThirdPartyResults.NumberOfSeats
                    </td>
                    <td>
                        @Model.ThirdPartyResults.ShareOfVotes
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

控制器代码

[HttpGet]
public ActionResult StartElection()
{
    return View();
}

[HttpPost] 
public ActionResult StartElection(string text)
{
    var scoreBoard = new ScoreBoard();

    var viewModel = scoreBoard.GetTopResults();

    return PartialView("_TablePartial", viewModel);
}

我在控制器上设置了一个断点，视图模型对象按预期创建
我还在 Model 的条件检查部分中设置了一个断点是 null 并且正在执行其中的代码

The page is being rendered with the table heading but not the model table data - can anyone see what I'm doing wrong?

注意： 我希望通过 ajax 调用随时间更新 table - 我还没有尝试这样做（还）在这里但解释了为什么我有一个 GET 操作结果和一个 POST

Answer 1

因为局部视图位于 ID 为 partialTable

的 div 中

<div id="partialTable">
    @{ Html.RenderPartial("_TablePartial", Model); }
</div>

你错了

$("partialTable").html(partialViewResult);

您需要使用 # (jQuery ID Selector) 到 select 元素的 id

$("#partialTable").html(partialViewResult);

为什么我的 table 不是部分渲染？

Why isn't my table partial rendering?

javascript

ajax

asp.net-mvc

jquery

viewmodel