C# MVC 5 Razor：使用 Ajax 更新局部视图失败答案

【问题标题】：C# MVC 5 Razor: Updating a partial view with Ajax failsC# MVC 5 Razor：使用 Ajax 更新局部视图失败
【发布时间】：2017-02-13 15:20:34
【问题描述】：

我的问题如下：单击按钮后，我必须刷新部分视图。这个 PartialView 包含一个表格，里面有一个foreach 循环。我使用控制器操作 ValidateControl，它为我提供了正确数据（我已手动检查过）。但是，使用下面的代码，当我点击我的按钮并完成处理时，表格是......空的！它甚至没有正确显示。

我已经检查过了，似乎启用了不显眼的 ajax 和 javascript。我从我的控制器操作中得到了正确的结果，但它似乎没有正确发布/显示。我已经检查了很多东西，但我似乎做不到！你能帮我解决这个问题吗？

查看（仅相关代码）：

 <table class="contentTable contentTable-evo">
                <thead>
                    <tr>
                        <th class="noWrap width1percent">
                            // Multiple THs with content, snipped out for length
                        </th>
                    </tr>
                </thead>
                <tbody id="tableControl">                    
                        @Html.Partial("_ControlTable")
                </tbody>
                </table>

部分视图（仅相关代码）：

@model PagedList.IPagedList<ProjectName.Models.ArticleControl>
@using PagedList.Mvc
@using PagedList
@{
    Layout = null;
    int i = 0;
}
@foreach (var item in Model)
            {
                if (item.IsNewValue == 1)
                {
        <tr>
            <td class="noWrap width1percent tri">
// Loads of <tr>s and <td>s after that.

脚本（仅相关代码）：

function validateResults(data) {
        $.ajax({
            url: '@Url.Action("ValidateControl", "Article")',
            type: "POST",
            data: { data:data}
        }).complete(function (result) {
            $("#tableControl").html(result);
            $("#divLoading").hide();
        });
    }

编辑 ValidateControl 操作（仅相关代码）：

    using (var ctxt = new Connection(connectionName))
    {
        //Loads of code that isn't relevant but adds data to a database
        ctxt.SaveChanges();

        var control = new ArticlesControl(null, 0, 20);
        return PartialView("_ControlTable", new StaticPagedList<ArticleControl>(control, 1, 20, control.NumberOfArticlesShown));
}

使用最终代码编辑：为了方便那些来自 google 的人，脚本实际上必须看起来像这样才能工作：

function validateResults(data) {
    $.ajax({
        url: '@Url.Action("ValidateControl", "Article")',
        type: "POST",
        data: { data:data},
        success: function (result) {
            $("#tableControl").html(result);
            $("#divLoading").hide();
        }
    });
}

【问题讨论】：

您的 ValidateControl 操作如何？
编辑添加ValidateControl。

标签： c# ajax asp.net-mvc razor asp.net-mvc-partialview

【解决方案1】：

当我这样做时，我做的成功部分与你不同——这可能是你的问题。以下应该可以工作

function validateResults(data) {
    $.ajax({
        url: '@Url.Action("ValidateControl", "Article")',
        type: "POST",
        data: { data:data},
        success: function($data) {
            $("#tableControl").html(result);
            $("#divLoading").hide();
        }
    });

【讨论】：

...好吧，你会看那个。是的，它像那样工作得很好。非常感谢！
@FrédéricLiard 乐于提供帮助 - 你也可以发现失败，failure: function($data) {....}

【解决方案2】：

如果您的“结果”变量正在使用预期数据正确更新，那么部分视图容器可能会出现一些奇怪的情况。

尝试在 tableControl tbody 内部，甚至在外部，在完全不同的地方为结果添加一个特定容器，以检查从 ajax 调用到视图的数据传输是否正常工作。

将响应放入视图容器后，您只需调整 DOM，直到将其显示在您想要的位置。

【讨论】：