Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr

19 Feb

Ajouter un document joint à un formulaire ASP.net MVC en AJAX

Publié par Antoine SEJALON

Bonjour,

Aujourd’hui nous allons voir comment créer un formulaire avec pièce jointe, le tout avec un beginform Ajax sur un site ASP.net MVC codé en C#.

La création d’un formulaire Ajax.beginform ne pose en général pas de soucis du moment que l’on ne veut pas envoyer une pièce jointe. Dans notre cas nous allons contourner quelques peu le fonctionnement du formulaire avec Ajax et utiliser un script.

Dans un premier temps, assurez-vous d’avoir les références nécessaires pour ’utiliser javascript et Ajax.

Je vais considérer que vous avez un site ASP.net MVC avec une page « Contact ».

Créez une class « ContactModel » dans le dossier model :

namespace MonProjet

{

   public class ContactModel

   {

      public string Nom { get; set; }

 

      public string Prenom { get; set; }

 

      public string Sujet { get; set; }

 

      public string Corp { get; set; }

 

     public HttpPostedFileBase Attachment { get; set; }

   }

}

Cette classe va nous permettre de récupérer les données via notre formulaire.

Dans votre page Contact ajoutez un using du model puis un using de la localisation du model :

@using MonProjet.Models

@Model ContactModel

Ajoutez ensuite votre formulaire de façon classique :

@using (Ajax.BeginForm("SaveContact", "Home", new { id = "MonFormulaire" }, new AjaxOptions()

    {

             HttpMethod = "POST"

    },

       new { enctype = "multipart/form-data" }

       ))

    {

       <fieldset class="formulaire">

 

             <div class="form-group">

                    <div class="input-group">

                           @Html.TextBoxFor(x => x.Nom, "", new { @class = "form-control", @placeholder = "Nom" })

                           </div>

                    </div>

 

             <div class="form-group">

                    <div class="input-group">

                                  @Html.TextBoxFor(x => x.Prenom, "", new { @class = "form-control", @placeholder = "Prénom" })

                    </div>

             </div>

 

             <div class="form-group">

                    <div class="input-group">

                                  @Html.TextBoxFor(x => x.Sujet, "", new { @class = "form-control", @placeholder = "Sujet" })

                    </div>

             </div>

 

             <div class="form-group">

                    <h4 class="blanc">Ma demande</h4>

                    @Html.TextAreaFor(x => x.Corp, new { @class = "form-control", @cols = 60, @rows = 10 })

             </div>

 

             <div class="form-group">

                    <h4>Mon CV</h4>

                    <input type="file" name="attachment" id="attachment" />

             </div>

            

             <input type="submit" value="Envoyer" class="btn btn-default" />

 

       </fieldset>

}

 

A la suite Ajoutez le script suivant : Ce script permet de courcicuiter l’envoi du formulaire et de faire un envoi par lui-même (avec la pièce jointe). Sans la ligne event.stopImmediatePropagation, vous auriez plusieurs envois en même temps.

Merci à Demian Flavius (stackOverflow) pour le script de base sur lequel je me suis basé.

<script type="text/javascript">

   $(function() {

     $("#MonFormulaire ").submit(function(event) {

         var dataString;

         event.preventDefault();

         event.stopImmediatePropagation(); //Permet de stopper l’action du formulaire et donc de ne pas lancer deux requêtes sur le controller.

         var monUrl = $("#MonFormulaire").attr("action");

         if ($("#MonFormulaire ").attr("enctype") == "multipart/form-data") {

             dataString = new FormData($("#MonFormulaire ").get(0));

             contentType = false;

             processData = false;

         }

         $.ajax({

             type: "POST",

             url: monUrl,

             data: dataString,

             dataType: "json",

             contentType: contentType,

             processData: processData,

             success: function (args) {

                 alert("Ok");

             },

             error: function(jqXHR, textStatus, errorThrown) {

                 alert("Erreur");

             }

         });

       });

    });

</script>

Nous allons ensuite gérer le controller. Dans le controller qui gère votre page « Contact », nous allons codé « SaveContact » que sera la fonction qui récupère le formulaire (voir dans les paramètres du ajax.beginform).

public JsonResult SaveContact(ContactModel model)

{

   Bool pJ ;

   If(model.Attachment != null){

     pJ = true ;

   }else{

     pJ = false ;

}

   return Json("Nom = {0} – Prénom = {1} – Sujet = {2} – piece jointe ? {3}", model.Nom, model.Prenom, model.Sujet, pJ.toString());

}

A vous d’effectuer les action qu’il vous faut avec le model reçu (envoi de mail, sauvegarde en base de données, …).

Lors de l’envoi du formulaire vous aurez en retour une pop-up qui vous indiquera les informations envoyées. Mettez un point d’arrêt en début de fonction SaveContact et regarder si la pièce jointe est bien dans le model.

En espèrent avoir apporté des piste de réflexion ou une solution à votre problème.

Ajouter un document joint à un formulaire ASP.net MVC en AJAX
Commenter cet article

À propos

Changement de blog : retrouvez moi pour un nouveau blog sur : www.micro-souffle.fr