Utilisation d'Ajax.BeginForm avec ASP.NET MVC 3 Razor

Question

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

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

Answer 1

Exemple:

Modèle:

 public class MyViewModel
{
    [Required]
    public string 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

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}
 

---

et voici un meilleur (dans mon exemple de perspective):

Vue:

 @model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <input type="submit" value="OK" />
}
 

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 plugin de formulaire jQuery .

Answer 2

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

Si vous utilisez le formulaire Ajax pour qu'il ait besoin de se mettre à jour (et PAS un autre div à l'extérieur du formulaire), vous devez placer le div contenant OUTSIDE du formulaire. Par exemple:

  <div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>
 

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

Answer 3

J'ai eu Darin la solution de travail par la suite mais fait quelques erreurs de première qui a abouti à un problème similaire à David (dans les commentaires ci-dessous Darin de la solution), où le résultat est l'affichage d'une nouvelle page.

Parce que je devais faire quelque chose avec la forme après le renvoi de la méthode, j'ai stocké pour une utilisation ultérieure:

var form = $(this);

Cependant, cette variable n'avait pas "d'action" ou de la "méthode" des propriétés qui sont utilisés 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 "ce":

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

Answer 4

Darin Dimitrov la solution a fonctionné pour moi, avec une exception. Quand j'ai présenté la vue partielle (intentionnelle) des erreurs de validation, j'ai fini avec une copie des formulaires retournés dans la boîte de dialogue:

Pour corriger cela, j'ai eu à envelopper le Html.BeginForm dans un div:

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

Lorsque le formulaire a été soumis, j'ai effacé la div dans le succès de la fonction de sortie et validé le formulaire:

    $('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;
    });
});

Answer 5

Ajax formes de travailler de manière asynchrone à l'aide de Javascript. Donc, il est nécessaire, pour charger les fichiers de script pour l'exécution. Même si c'est une petite performance de compromis, l'exécution se passe sans publication.

Nous avons besoin de comprendre la différence entre les comportements de Html et Ajax formes.

Ajax:

1. Ne pas rediriger la forme, de même vous faire un RedirectAction().

2. Permettra de réaliser la sauvegarde, mise à jour et toutes les opérations de modification de manière asynchrone.

Html:

1. Va rediriger la forme.

2. Permettra d'effectuer des opérations en mode Synchrone et Asynchrone (Avec un peu de code supplémentaire et de soins).

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