Publication de données de formulaire dans une méthode de contrôleur à l'aide d'Ajax

Question

LE PROBLÈME

Je souhaite publier des données de formulaire sur un contrôleur de manière asynchrone à l'aide d'AJAX. Voici une vue simplifiée de mon JavaScript:

function SendForm() {
  var formData = new FormData();
  formData.append('value1', 'hello');
  formData.append('value2', 'world');
  var xhr = new XMLHttpRequest();
  xhr.upload.onload = function() {
    // stuff that happens on the callback
  };
  xhr.open('POST', 'http://server/controller/SomeAction', true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.send(formData);
}

Le problème commence du côté serveur où tous les paramètres de méthode sont nuls.

[HttpPost]
public ContentResult SomeAction(string value1, string value2)
{
  if(String.IsNullOrEmpty(value1) || String.IsNullOrEmpty(value2)) { throw new Exception("World not found."); }
  return Content("something");
}

LA QUESTION

Ma question est, pourquoi tous les paramètres de méthode sont-ils nuls?

RECHERCHE SUPPLÉMENTAIRE

J'ai regardé à l'intérieur du flux de demandes, et je peux voir de la longueur qu'il y a du contenu, mais pour une raison quelconque, MVC n'a pas réussi à faire correspondre les paramètres que j'ai spécifiés dans l'objet FormData aux paramètres de la méthed dans le contrôleur.

POURQUOI SUIS-JE FAIT CECI?

Oui, je veux POSTER les données. J'ai simplifié l'exemple, mais je veux publier plus de données que ce qui peut être placé sur une URL, donc une méthode REST (en passant les données sur la chaîne de requête) n'est pas acceptable pour cette solution.

javascript c# ajax asp.net-mvc

3

Mark Micallef 8 mars 2016 à 07:14

Answer 1

 function SendForm() {
   var formData = new FormData();
   formData.append('value1', 'hello');
   formData.append('value2', 'world');
   $.ajax({
     url: "http://server/controller/SomeAction",
     type: 'post',
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      success: function (data) {
        // ..... any success code you want
    }
   });

1

DAre G 8 mars 2016 à 06:22

Answer 2

 function SendForm() {
  var formData = new FormData();
  formData.append('value1', 'hello');
  formData.append('value2', 'world');
  $.ajax({
    url: "http://server/controller/SomeAction",
    type: 'post',
     cache: false,
     contentType: false,
     processData: false,
    data: { formData: formData, value1: "hello", value2: "world"},
    success: function (data) {
    // ..... any success code you want
    }
  });

Et recevez JSON côté serveur

Veuillez essayer ceci. Je ne peux pas exécuter le code sur un projet maintenant. C'est la théorie cependant, vous pouvez passer les données séparément en utilisant AJAX

Si Seule la valeur1 et la valeur2 sont requises - Serveur

 [HttpPost]
 public JsonResult SomeAction(string value1, string value2)
 {
  if(String.IsNullOrEmpty(value1) || String.IsNullOrEmpty(value2)) { throw 
     new Exception("World not found."); }
     return Content("something");
   }

JQuery

  $.ajax({
    url: "http://server/controller/SomeAction",
    type: 'post',
    cache: false,
    contentType: false,
    processData: false,
    data: { value1: "hello", value2: "world"},
    success: function (data) {
    // ..... any success code you want
    }
  });

1

DAre G 11 mars 2016 à 09:43

Answer 3

Essayez de faire l'appel ajax de cette façon, je pense que c'est la meilleure façon de faire une demande

    function SendForm() {
            var data = {};
            data.value1 = "Hello";
            data.value2 = "World";

            $.ajax({
                url: "http://server/controller/SomeAction",
                type: "POST",
                dataType: "json",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8;",
                success: function (data) {
                    // your code in success
                    alert("success");
                }
            });
        }

Et la méthode d'action sera

 [HttpPost]
 public JsonResult SomeAction(string value1, string value2)
 {
  if(String.IsNullOrEmpty(value1) || String.IsNullOrEmpty(value2)) 
    { 
     throw new Exception("World not found."); 
    }
     return Json("something");
 }

2

Mohamed Allam 8 mars 2016 à 07:05

Answer 4

Essayez d'utiliser AJAX de cette façon,

function SendForm() {      
       $.ajax({
                type: 'POST',
                url: '/controller/SomeAction',
                data: { value1 : 'hello', value2 : 'world' },
                success: function (result) {
                    //Your success code here..
                },
                error: function (jqXHR) {                        
                    if (jqXHR.status === 200) {
                        alert("Value Not found");
                    }
                }
            });
     }

Vous pouvez trouver les value1 et value2 côté serveur.

Contrôleur

[HttpPost]
public ContentResult SomeAction(string value1, string value2)
{
  if(String.IsNullOrEmpty(value1) || String.IsNullOrEmpty(value2)) { throw new Exception("World not found."); }
  return Content("something");
}

1

Smit Patel 8 mars 2016 à 05:31

Publication de données de formulaire dans une méthode de contrôleur à l'aide d'Ajax

4 réponses

Questions connexes

De nouvelles questions

javascript