Utiliser Ajax.BeginForm avec ASP.NET MVC 3 Razor

Existe-t-il un tutoriel ou un exemple de code d’utilisation d’ Ajax.BeginForm dans Asp.net MVC 3 où la validation discrète et Ajax existent?

C’est un sujet insaisissable pour MVC 3, et je n’arrive pas à faire fonctionner correctement mon formulaire. Il effectuera une soumission Ajax mais ignorera les erreurs de validation.

Exemple:

Modèle:

 public class MyViewModel { [Required] public ssortingng Foo { get; set; } } 

Manette:

 public class HomeController : Controller { public ActionResult Index() { return View(new MyViewModel()); } [HttpPost] public ActionResult Index(MyViewModel model) { return Content("Thanks", "text/html"); } } 

Vue:

 @model AppName.Models.MyViewModel    
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" })) { @Html.EditorFor(x => x.Foo) @Html.ValidationMessageFor(x => x.Foo) }

et voici un meilleur exemple (dans ma perspective):

Vue:

 @model AppName.Models.MyViewModel    
@using (Html.BeginForm()) { @Html.EditorFor(x => x.Foo) @Html.ValidationMessageFor(x => x.Foo) }

index.js :

 $(function () { $('form').submit(function () { if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { $('#result').html(result); } }); } return false; }); }); 

qui peut être encore amélioré avec le plug-in de formulaire jQuery .

Je pense que toutes les réponses ont manqué un point crucial:

Si vous utilisez le formulaire Ajax pour qu’il doive se mettre à jour (et PAS un autre div en dehors du formulaire), vous devez alors placer le div contenant à l’ extérieur du formulaire. Par exemple:

  
@using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "target" })) { }

Sinon, vous finirez par @David où le résultat est affiché dans une nouvelle page.

J’ai finalement fait fonctionner la solution de Darin mais j’ai d’abord fait quelques erreurs qui ont abouti à un problème similaire à celui de David (dans les commentaires ci-dessous, dans la solution de Darin) où le résultat était publié sur une nouvelle page.

Comme je devais faire quelque chose avec le formulaire après le retour de la méthode, je l’ai stocké pour une utilisation ultérieure:

 var form = $(this); 

Cependant, cette variable n’avait pas les propriétés “action” ou “method” utilisées dans l’appel ajax.

 $(document).on("submit", "form", function (event) { var form = $(this); if (form.valid()) { $.ajax({ url: form.action, // Not available to 'form' variable type: form.method, // Not available to 'form' variable data: form.serialize(), success: function (html) { // Do something with the returned html. } }); } event.preventDefault(); }); 

Au lieu de cela, vous devez utiliser la variable “this”:

 $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (html) { // Do something with the returned html. } }); 

La solution de Darin Dimitrov a fonctionné pour moi à une exception près. Lorsque j’ai soumis la vue partielle avec des erreurs de validation (intentionnelles), je me suis retrouvé avec des formulaires en double renvoyés dans la boîte de dialog:

entrer la description de l'image ici

Pour résoudre ce problème, j’ai dû envelopper le HTML.BeginForm dans un div:

 
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" })) { //form contents }

Lorsque le formulaire a été soumis, j’ai effacé le div dans la fonction de succès et généré le formulaire validé:

  $('form').submit(function () { if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { $('#myForm').html(''); $('#result').html(result); } }); } return false; }); }); 

Si aucune validation de données n’est excitée ou si le contenu est toujours renvoyé dans une nouvelle fenêtre, assurez-vous que ces trois lignes sont en haut de la vue:

    

Exemple

// dans le modèle

 public class MyModel { [Required] public ssortingng Name{ get; set; } } 

// Dans PartailView //PartailView.cshtml

 @model MyModel 
@Html.LabelFor(model=>model.Name)
@Html.EditorFor(model=>model.Name) @Html.ValidationMessageFor(model => model.Name)

Dans la vue Index.cshtml

 @model MyModel 
@{Html.RenderPartial("PartialView",Model)}
@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" })) {
}

En contrôleur

 public ActionResult Index() { return View(new MyModel()); } public ssortingng AddName(MyModel model) { ssortingng HtmlSsortingng = RenderPartialViewToSsortingng("PartailView",model); return HtmlSsortingng; } protected ssortingng RenderPartialViewToSsortingng(ssortingng viewName, object model) { if (ssortingng.IsNullOrEmpty(viewName)) viewName = ControllerContext.RouteData.GetRequiredSsortingng("action"); ViewData.Model = model; using (SsortingngWriter sw = new SsortingngWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); viewResult.View.Render(viewContext, sw); return sw.GetSsortingngBuilder().ToSsortingng(); } } 

vous devez passer la méthode ViewName et Model à la méthode RenderPartialViewToSsortingng. il vous renverra la vue avec validation que vous avez appliqué dans le modèle et ajoute le contenu dans div “targetId” dans Index.cshtml. De cette façon, en capturant RenderHtml de vue partielle, vous pouvez appliquer la validation.

Les formulaires Ajax fonctionnent de manière asynchrone en utilisant Javascript. Il est donc nécessaire de charger les fichiers de script pour les exécuter. Bien que ce soit un petit compromis de performance, l’exécution se passe sans publication.

Nous devons comprendre la différence entre les comportements des formulaires HTML et Ajax.

Ajax:

  1. Ne redirigez pas le formulaire, même si vous faites un RedirectAction ().

  2. Effectuera des opérations de sauvegarde, de mise à jour et de modification de manière asynchrone.

Html:

  1. Réorientera le formulaire.

  2. Réalisera des opérations à la fois de manière synchrone et asynchrone (avec un peu de code et d’attention).

Démontré les différences avec un POC dans le lien ci-dessous. Lien

Avant d’append le Ajax.BeginForm. Ajoutez les scripts ci-dessous à votre projet dans l’ordre indiqué,

  1. jquery-1.7.1.min.js
  2. jquery.unobtrusive-ajax.min.js

Seuls ces deux suffisent pour effectuer l’opération Ajax.