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

Question

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

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

查看（仅相关代码）：

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

Answer 1

当我这样做时，我对成功部分的处理方式与您不同 - 这可能是您的问题。以下应该有效

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

Answer 2

如果您的 "result" 变量正在使用预期数据正确更新，可能是部分视图容器出现了问题。

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

将响应放入视图容器后，只需使用 DOM 进行调整，直到将其显示在所需位置。

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

C# MVC 5 Razor: Updating a partial view with Ajax fails

c#

ajax

asp.net-mvc

asp.net-mvc-partialview

razor