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

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.

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?

View (relevant code only):

 <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>

Partial View (relevant code only):

@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.

Script (relevant code only):

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

EDIT ValidateControl action (relevant code only):

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

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

回答1:

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

回答2:

If your "result" variable is being correctly updated with the expected data, probably something is going weird with the partial view container.

Try adding a specific container for your result inside your tableControl tbody, or even outside, in a completely different place, just to check if data transfer from ajax call to view is working properly.

Once you have your response into a view container, you only need to tweak with the DOM until you show it where you want it.