ASP.NET MVC Pagina non aggiornata quando si utilizza AJAX

Question

Ho un progetto ASP.NET MVC in cui voglio postare un articolo nel database e quindi visualizzare uno snippet dell'articolo nella pagina. Quando un utente commenta, voglio anche visualizzare il commento una volta salvato nel database. Sto usando AJAX per questo e chiamare i metodi OnFailure e OnSuccess in entrambi i casi.

Il metodo OnFailure si attiva solo quando salvi un post e non un commento (questo perché la pagina non viene aggiornata anche quando salvo con successo). Il metodo OnSuccess non viene invocato affatto, poiché la mia pagina non viene aggiornata.

Sto usando jQuery 2.1.4 e ho jquery.unobtrusive-ajax script caricato nel mio progetto

Ecco il mio codice.

// View per la creazione di un posto di

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

// lato server per il risparmio postale e l'aggiornamento 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); 
    } 

il file

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

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

// // Porzione mio JavaScript della vista da aggiornare

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

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

Cosa mi sto perdendo, grazie in anticipo.

Answer 1

Questo perché si dispone di un modulo Ajax in _PostPartialView. Dopo il posizionamento, per esempio, dopo <span id="insertnewpostbelow"></span> è necessario eseguire jquery.unobtrusive-ajax sulla pagina di nuovo.

Nota che gli script renderanno il caricamento della pagina, non dopo eventuali modifiche pagina (come gli aggiornamenti da PartialView).

Soluzione: chiamare lo script di nuovo, dopo l'aggiornamento pagina :)

Answer 2

Hai bisogno di mettere il contenuto della vista parziale ritornato da qualche parte sulla pagina

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

Sulla funzione di Call back prova:

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

Spero che questo aiuti!

Answer 3

prima cosa da fare non è necessario aver parentesi

OnSuccess = "postingSucceeded()" 
          ^^^ 

OnFailure = "postingFailed()" 
         ^^^ 

solo

OnSuccess = "postingSucceeded", 
OnFailure = "postingFailed" 

e ora codice HTML

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

e jav ascript codice lato fuori la $(document).ready(....)

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

speranza questo willl funziona!