C# MVC 5 Razor：使用 Ajax 更新局部視圖失敗

Question

我的問題如下：單擊按鈕后我必須刷新局部視圖。 這個 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));
}

使用最終代碼編輯：為了方便來自谷歌的那些人，腳本必須實際上看起來像這樣才能工作：

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

如果您的“結果”變量正在使用預期數據正確更新，則部分視圖容器可能會有些奇怪。

嘗試在 tableControl tbody 內或什至在完全不同的地方為您的結果添加一個特定的容器，只是為了檢查從 ajax 調用到視圖的數據傳輸是否正常工作。

將響應放入視圖容器后，您只需要調整 DOM，直到將其顯示在您想要的位置。