C#MVC 5 Razor:使用Ajax更新部分视图失败 [英] C# MVC 5 Razor: Updating a partial view with Ajax fails

问题描述

我的问题如下:单击按钮后，我必须刷新局部视图.此PartialView包含一个表，该表充满了 foreach 循环.我使用一个控制器动作ValidateControl，该动作为我提供了正确数据(我已经手动检查过).但是，使用下面的代码，当我单击我的按钮并完成处理后，该表为...空！它甚至无法正确显示.

My problem is the following: I must refresh a Partial View after clicking on a button. This PartialView contains a table, filled with a foreach loop. I use a controller action, ValidateControl, that gives me the correct data (I've checked it manually). However, using the code below, when I click on my button and the treatment is done, the table is...empty! It doesn't even show up properly.

我已经检查过了，看来ajax并不太吸引人，并且启用了javascript.我从控制器操作中得到了正确的结果，但似乎未正确发布/显示.我检查了很多事情，但似乎还差得很！你能帮我解决这个问题吗?

I've checked and it seems unobstrusive ajax and javascript is enabled. I am getting the correct result from my controller action but it doesn't seem to get posted/shown properly. I've checked a lot of things but I seem to be coming up short! Can you help me solve this problem?

查看(仅相关代码):

 <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的用户，该脚本实际上必须看起来像这样才能正常工作:

EDIT WITH FINAL CODE: To facilitate those of you coming from google, the script must actually look like this in order to work:

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

推荐答案

当我这样做时，我对您所做的成功部分与您有所不同-这可能是您的问题.以下应该可以工作

When I do this, I do the success part differently to you - this may be your issue. The below should work

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

这篇关于C#MVC 5 Razor:使用Ajax更新部分视图失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！