MVC 3 - Envoi du formulaire par jquery et rafraîchissement partiel de la page pour afficher le résultat après le post

Question

J'ai un formulaire dans MVC 3. Actuellement je fais ce qui suit pour poster le formulaire. Le formulaire est en cours de publication et il effectue une actualisation de page complète pour afficher le résultat. Après l'envoi, le contrôleur enverra un état Réussite ou Échec. C'est tout. J'ai juste besoin de montrer dans un div le message de réussite ou d'échec basé sur le statut retourné.

Est-ce que quelqu'un connaît les étapes de haut niveau sur la façon de faire cela dans MVC 3? Je souhaite que le succès apparaisse en mode silencieux dans le rappel de répétition de la division ShowResultHere.

Cela peut-il être fait en MVC 3?

Answer 1

Vous pouvez souscrire à l'événement submit du formulaire et d'effectuer l'appel AJAX, comme ceci:

$(function() { 
    $('#frmUpdate').submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       // The AJAX call succeeded and the server returned a JSON 
       // with a property "s" => we can use this property 
       // and set the html of the target div 
       $('#ShowResultHere').html(result.s); 
      } 
     }); 
     // it is important to return false in order to 
     // cancel the default submission of the form 
     // and perform the AJAX call 
     return false; 
    }); 
}); 

Answer 2

Regardez cet exemple Async operations with jQuery Ajax and Asp.Net MVC

Answer 3

Si vous soumettez le formulaire par l'Ajax jQuery, vous pouvez afficher votre message côté client dans la fonction de rappel de succès.

Answer 4

Vous pouvez également y parvenir en ne pas écrire tout javascript du tout. En utilisant un formulaire AJAX

<div id="ShowResultHere"></div> 

@using (Ajax.BeginForm("Update", new AjaxOptions { UpdateTargetId = "ShowResultHere" })) 
{ 

} 

Et dans votre contrôleur

[HttpPost] 
public ActionResult Update(TestModel model) 
{ 
    if(blah) 
     return PartialView("Success") 
    return PartialView("Failed") 
} 

En procédant ainsi, signifie que vous devez faire deux points de vue. Mais signifie pas d'écriture javascript.