C# MVC 5 Razor: Aktualisierung einer Teilansicht mit Ajax schlägt fehl

Question

Mein Problem ist das folgende: Ich muss eine Teilansicht nach dem Klicken auf eine Schaltfläche aktualisieren. Diese PartialView enthält eine Tabelle, die mit einer foreach-Schleife gefüllt ist. Ich benutze eine Controller-Aktion, ValidateControl, die mir die korrekte Daten gibt (ich habe es manuell überprüft). Mit dem unten stehenden Code, wenn ich auf meine Schaltfläche klicke und die Behandlung abgeschlossen ist, ist der Tisch ... leer! Es erscheint nicht einmal richtig.

Ich habe überprüft und es scheint unaufdringlich ajax und Javascript aktiviert ist. Ich bekomme das richtige Ergebnis von meiner Controller-Aktion, aber es scheint nicht richtig gepostet/angezeigt zu werden. Ich habe viele Dinge überprüft, aber ich scheine kurz zu kommen! Kannst du mir helfen, dieses Problem zu lösen?

Ansicht (Kennziffer 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> 

Teilansicht (Kennziffer nur):

@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 (Kennziffer nur):

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

EDIT ValidateControl Aktion (einen entsprechenden 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 MIT SCHLUSS CODE: Für diejenigen von Ihnen zu erleichtern von Google kommen, muss das Skript wie folgt aus, um tatsächlich aussehen zu arbeiten:

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

Answer 1

Wenn ich dies tue, mache ich den Erfolg Teil anders als Sie - das kann Ihr Problem sein. Die unten sollte

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

Answer 2

funktionieren, wenn Ihr „Ergebnis“ Variable korrekt mit den erwarteten Daten aktualisiert werden, wahrscheinlich mit dem Teilansicht Container etwas los ist seltsam.

Versuchen Sie, einen spezifischen Container für Ihr Ergebnis in Ihrem tableControl tbody oder sogar außerhalb an einem völlig anderen Ort hinzuzufügen, nur um zu überprüfen, ob die Datenübertragung von einem Ajax-Aufruf zur Ansicht ordnungsgemäß funktioniert.

Sobald Sie Ihre Antwort in einem Ansichtscontainer haben, müssen Sie nur mit dem DOM optimieren, bis Sie es anzeigen, wo Sie es wünschen.