web-dev-qa-db-fra.com

Comment passer un formulaire de collecte en utilisant un appel ajax à une action?

J'essaie de remplacer un formulaire soumettre avec un appel ajax. l'action a besoin d'être formulée et je ne veux pas créer de nouveau modèle. J'ai donc besoin de transmettre le formulaire complet (comme pour le formulaire d'envoi), mais par appel ajax. J'ai essayé de sérialiser et d'utiliser Json mais le formulaire de collecte est vide. c'est ma signature d'action:

public ActionResult CompleteRegisteration(FormCollection formCollection)

et voici mon clic bouton de soumission:

var form = $("#onlineform").serialize();              
            $.ajax({
                url: "/Register/CompleteRegisteration",                
                datatype: 'json',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",                
                success: function (data) {
                    if (data.result == "Error") {
                        alert(data.message);
                    }
                }
            });

maintenant, comment puis-je transmettre des données à formcollection?

c#jqueryajaxasp.net-mvc
13
Armen

FormCollection étant un nombre de paires clé-valeur, JSON est un format de données inapproprié pour sa représentation. Vous devez utiliser uniquement une chaîne de formulaire sérialisée:

var form = $("#onlineform").serialize();
$.ajax({
    type: 'POST',
    url: "/Register/CompleteRegisteration",
    data: form,
    dataType: 'json',
    success: function (data) {
        if (data.result == "Error") {
            alert(data.message);
        }
    }
});

Changements clés:

  1. type de la requête définie sur POST (pas nécessaire ici, mais semble plus naturel)
  2. Formulaire sérialisé à la place de la chaîne JSON sous la forme request data
  3. contentType enlevé - nous n'envoyons plus de JSON
33
Andrei

Essayer:

$(<your form>).on('submit',function(){
    $.ajax({
        url: "/Register/CompleteRegisteration" + $(this).serialize(), 
        // place the serialized inputs in the ajax call                
        datatype: 'json',
        contentType: "application/json; charset=utf-8",                
        success: function (data) {
            if (data.result == "Error") {
                alert(data.message);
            }
        }
    });
});
5
Angry_Yodeler

Si quelqu'un souhaite transmettre des données supplémentaires à FormCollection, vous pouvez essayer ci-dessous.

<script type="text/javascript"> 
function SubmitInfo() 
{
    var id = $("#txtid").val();    
    var formData = $('#yourformname').serializeObject();
    $.extend(formData, { 'User': id }); //Send Additional data

    $.ajax({
        url: 'Controlle/GetUser',
        cache: false,
        type: 'POST',
        dataType: 'json',
        data: decodeURIComponent($.param(formData)),
        success: function (data) {
            $('#resultarea').html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });
}

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
<script/>

Méthode d'action

public ActionResult GetUser(FormCollection frm)
  {
   int UserId = Convert.ToInt32(frm["user"]);
   // your code
   return Json(data, JsonRequestBehavior.AllowGet);
  }

Voir lien pour plus de détails.

1
J Sushil