ASP.NET MVC Seite nicht aktualisiert, wenn AJAX verwenden

Question

Ich habe ein ASP.NET MVC-Projekt, wo ich einen Artikel in der Datenbank veröffentlichen und dann ein Ausschnitt des Artikels auf der Seite anzeigen möchte. Wenn ein Benutzer einen Kommentar abgibt, möchte ich den Kommentar auch anzeigen, nachdem ich ihn in der Datenbank gespeichert habe. Ich verwende hierfür AJAX und rufe in beiden Fällen die Methoden OnFailure und OnSuccess auf.

Die Methode OnFailure startet nur, wenn ich einen Beitrag und nicht einen Kommentar speichere (weil die Seite nicht aktualisiert wird, auch wenn ich erfolgreich gespeichert habe). Die OnSuccess Methode wird überhaupt nicht aufgerufen, weil meine Seite nicht aktualisiert wird. mein Code

Ich verwende jquery 2.1.4 und jquery.unobtrusive-Ajax Skript in meinem Projekt ist

Hier geladen haben.

// Ansicht für das Erstellen eines Post

@using (Ajax.BeginForm("Create", "Post", 
new AjaxOptions 
{ 
    HttpMethod = "POST", 
    UpdateTargetId = "insertnewpostbelow", 
    InsertionMode = InsertionMode.InsertAfter, 
    OnSuccess = "postingSucceeded()", 
    OnFailure = "postingFailed()" 
})) 
{ 
    //View code left out 
} 

// Server-Seite für die Zeit nach Speichern und Aktualisieren von PartialView

[HttpPost, ValidateAntiForgeryToken, ValidateInput(false)] 
    public async Task<PartialViewResult> Create 
     ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post) 
    { 
     if (ModelState.IsValid) 
     { 
      var list = new List<Post>(); 
      list.Add(post); 

      try 
      { 
       db.Posts.Add(post); 
       await db.SaveChangesAsync(); 

       return PartialView("_Posts", list); 
      } 
      catch (RetryLimitExceededException) 
      { 
       ModelState.AddModelError("", "Unable to login, please try again and contact administrator if the problem persists."); 

       //If we got this far, model has errors. 
       ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By); 
       return PartialView("_Posts", post); 
      } 
     } 

     //If we got this far, model has errors. 
     ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By); 
     return PartialView("_Posts", post); 
    } 

// Meine JavaScript

function postingSucceeded() { 
    alert("Posting succeeded."); 
} 

function postingFailed() { 
    alert("Posting failured."); 
} 

Datei // Portion der zu aktualisierenden Ansicht

<div id="big-posts"> 
     <span id="insertnewpostbelow"></span> 

     @Html.Partial("_Posts", Model.Posts) 
    </div> 

Was ich vermisse, danke im Voraus.

Answer 1

Dies liegt daran, dass Sie eine Ajax-Form in _PostsPartialView haben. Nach der Platzierung, sagen Sie, nach <span id="insertnewpostbelow"></span> müssen Sie jquery.unobtrusive-ajax auf Seite erneut ausführen.

Beachten Sie, dass die Skripts beim Laden der Seite rendern, nicht nach Änderungen auf der Seite (wie Updates von PartialView).

Lösung: rufen Sie das Skript erneut, nachdem die Seite Update :)

Answer 2

Sie müssen den Inhalt der zurückgegebenen Teilansicht irgendwo auf der Seite setzen

<div id="big-posts"> 
    <span id="insertnewpostbelow"></span> 
    <div id="newPost"></div> 
</div> 

Auf der Rückruffunktion versuchen:

function postingSucceeded(data) { 
    $("#newPost").html(data); 
} 

Hoffe, dass dies hilft!

Answer 3

Das erste, was Sie nicht brauchen Klammer

OnSuccess = "postingSucceeded()" 
          ^^^ 

OnFailure = "postingFailed()" 
         ^^^ 

nur

OnSuccess = "postingSucceeded", 
OnFailure = "postingFailed" 

und jetzt HTML-Code

<div id="big-posts"> 
    <span id="insertnewpostbelow"></span> 
    <div id="AppendPostsHere"></div> 
</div> 

und jav haben ascript Code aus Seite die $(document).ready(....)

function postingSucceeded(newPosts) { 
    $("#AppendPostsHere").html(newPosts); 
} 

hoffen, dass diese Arbeit willl!