为什么我的表格没有部分渲染？答案

【问题标题】：Why isn't my table partial rendering?为什么我的表格没有部分渲染？
【发布时间】：2016-08-14 07:40:52
【问题描述】：

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

视图模型

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 并且其中的代码正在执行

页面正在使用表格标题而不是模型表格数据呈现 - 任何人都可以看到我做错了什么吗？

注意：我希望通过 ajax 调用随着时间的推移更新表格 - 我还没有尝试这样做，但解释了为什么我有一个 GET 操作结果和POST

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc viewmodel

【解决方案1】：

由于部分视图位于 ID 为 partialTable 的 div 内

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

你错了

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

您需要使用# (jQuery ID Selector) 通过它的id 来选择元素

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

【讨论】：

非常感谢，不胜感激！