MVC3 AJAX transmettant les données au contrôleur. Il est soumis deux fois

Question

J'ai une table qui se transforme en un tableau en utilisant:

var result = $("#enrolledStudents").sortable('toArray'); 

Mais quand je vais une tête une passe qui dans mon contrôleur comme ceci:

$("#update-enroll").click(function() { 
      var result = $("#enrolledStudents").sortable('toArray'); 
      $.ajax({ 
       url: '@Url.Action("Enrollment", "Classroom")', 
       data: { students: result }, 
       type: 'POST', 
       traditional: true 
      }); 
     }); 

Mon débogage breakpoint est déclenché deux fois, ce qui provoque des problèmes. Quelle est la bonne façon de soumettre des données à mon contrôleur sur POST?

Answer 1

Selon mes commentaires, il y a plusieurs choses qui pourraient causer cette situation.

1. Vous devez avoir le fichier discret (s) chargé plusieurs fois
2. Votre formulaire a une méthode d'action défini, et le bouton se trouve dans la balise form comme un bouton d'envoi. Cela soumettre le formulaire, puis le clic également soumettre le formulaire - voir l'exemple

Exemple

<form action="/somerowout/someaction"> 
    <input type="text" id="text1"/> 
    <input type="text" id="text1"/> 
    <input type="submit" /> 
</form> 

Si vous devez valider une valeur sur votre formulaire avant de poster, ne pas raccorder un appel Ajax supplémentaire. Votre javascript ressemblera:

$(document).ready(function() { 
    $("form").submit(function(){ 
     var result = $("#enrolledStudents").sortable('toArray'); 
     if(result == null){ 
      //do something to show validation failed 
      return false; 
     } 
     return true;   
    }); 
}); 

Et votre code de forme serait alors ressembler à quelque chose comme:

@using (@Ajax.BeginForm(new AjaxOptions { })) { 
    <input type="text" id="text1"/> 
    <input type="text" id="text1"/> 
    <input type="submit" /> 
} 

---

Si vous voulez utiliser Ajax plutôt que les Helpers Html, utilisez un div au lieu d'un formulaire, et vous ne recevrez pas un message en double.Voici comment vous pouvez y parvenir:

<div id="enrolledStudents"> 
    <--! your elements --> 
    <button id="saveStudents">Save</button> 
</div> 

JavaScript

$(document).ready(function() { 
    $("saveStudents").click(function(){ 
     var result = $("#enrolledStudents").sortable('toArray'); 
     if(result !== null){ /* do some kind of check here. */ 
      $.ajax({ 
       url: '@Url.Action("Enrollment", "Classroom")', 
       data: { students: result }, 
       type: 'POST', 
       traditional: true, 
       success : function(data) { 
        if (data.status) { 
         window.location = data.route; 
        }    
       } 
      }) 
     } else { 
      /* notify ui that save didn't happpen */ 
     }   
    }); 
}); 

Exemple Action Controller Lorsque vous rédigez vos données en utilisant Ajax, voici un exemple de la façon de passer la route

[HttpPost] 
public ActionResult SomethingPost(SomeModel model) { 
    if (Request.IsAjaxRequest()) { 
     var json = new { 
        status = true, 
        route = @Url.RouteUrl("MyRouteName", new { /* route values */ }) 
     }; 
     return Json(json, JsonRequestBehavior.AllowGet); 
    } 
} 

Answer 2

Etes-vous sûr d'empêcher le comportement par défaut (formulaire POSTING) du bouton submit? utilisez preventDefault pour le faire.

$("#update-enroll").click(function (e) { 
    e.preventDefault(); 
//rest of the code 

}); 

EDIT: Comme pour le commentaire

Pour la redirection dans le gestionnaire ajax, vous devez renvoyer l'URL pour être redirigé dans une réponse JSON retour à la rue.

[HttpPost] 
public ActionResult Classroom(string students) 
{ 
    //do some operaton 
    if(Request.IsAjax()) 
    { 
    //This is an Ajax call 
    return Json(new 
        { 
        Status="Success", 
        NewUrl = Url.Action("Index","Home") 
        }); 
    } 
    else 
    { 
    //Normal request. Use RedirectToActiom 
     return RedirectToAction("Index","Home"); 
    } 

} 

Maintenant, dans votre appel ajax, vérifiez le résultat JSON et effectuez la redirection.

$.ajax({ 
     url: '@Url.Action("Enrollment", "Classroom")', 
     data: { students: result }, 
     type: 'POST',   
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
       if(data.Status=="Success") 
       { 
        window.location.href = data.Newrl; 
       } 
       else 
       { 
        alert("some error"); 
       } 
     } 

}); 

Answer 3

Vérifiez que les fichiers jquery ne sont pas chargés deux fois. J'ai eu ce comportement et le problème était les fichiers chargés deux fois.