L'envoi d'objet JSON à l'API Web

Je suis en train d'essayer de comprendre comment je peux envoyer de l'information à partir d'un formulaire à une API Web d'action. C'est le jQuery/AJAX je suis en train d'utiliser:

var source = { 
        'ID': 0, 
        'ProductID': $('#ID').val(), 
        'PartNumber': $('#part-number').val(),
        'VendorID': $('#Vendors').val()
    }

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/api/PartSourceAPI/",
        data: JSON.stringify({ model: source }),
        success: function (data) {
            alert('success');
        },
        error: function (error) {
            jsonValue = jQuery.parseJSON(error.responseText);
            jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
        }
    });

Voici mon modèle

public class PartSourceModel
{
    public int ID { get; set; }
    public int ProductID { get; set; }
    public int VendorID { get; set; }
    public string PartNumber { get; set; }
}

Voici mon point de vue

<div id="part-sources">
    @foreach (SmallHorse.ProductSource source in Model.Sources)
    {
        @source.ItemNumber <br />
    }
</div>
<label>Part Number</label>
<input type="text" id="part-number" name="part-number" />

<input type="submit" id="save-source" name="save-source" value="Add" />

Voici mon contrôleur de l'action

//POST api/partsourceapi
public void Post(PartSourceModel model)
{
    //currently no values are being passed into model param
}

Ce qui me manque? maintenant, quand je debug et pas à travers ce quand la requête ajax frappe le contrôleur de l'action il n'y a rien transmis dans le modèle param.

  • Avez-vous essayé sans JSON.stringify? data: { model: source }, ou peut-être juste data : source - jQuery gère la conversion pour vous...
  • Oui, j'ai fait un essai sans JSON.stringify, mais cela ne fonctionne pas non plus. J'ai essayé toutes les combinaisons possibles, je pense, de l'AJAX, mais je pense que il y a quelque chose qui me manque sur le contrôleur.. je ne sais pas si, c'est une pure supposition.
  • Quand tu dis "rien" est passé dans le modèle param, voulez-vous dire par exemple "modèle" est null? Ou sont ses valeurs par défaut / null? Qu'advient-il si vous changez de type de modèle de chaîne pour obtenir le raw de la représentation, ou même supprimer le paramètre d'entrée et la sonde de la Demande.Contenu et de la Demande.Les en-têtes des propriétés directement pour savoir ce que le serveur reçoit?
InformationsquelleAutor Cory | 2012-12-13
  1. 29

    Essayez ceci:

    jquery

        $('#save-source').click(function (e) {
        e.preventDefault();
        var source = {
            'ID': 0,
            //'ProductID': $('#ID').val(),
            'PartNumber': $('#part-number').val(),
            //'VendorID': $('#Vendors').val()
        }
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/api/PartSourceAPI",
            data: source,
            success: function (data) {
                alert(data);
            },
            error: function (error) {
                jsonValue = jQuery.parseJSON(error.responseText);
                //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
            }
        });
    });

    Contrôleur

        public string Post(PartSourceModel model)
    {
        return model.PartNumber;
    }

    Vue

    <label>Part Number</label>
<input type="text" id="part-number" name="part-number" />

<input type="submit" id="save-source" name="save-source" value="Add" />

    Maintenant, lorsque vous cliquez sur " Add ' après le remplissage de la zone de texte, le controller va cracher retour ce que vous avez écrit dans le PartNumber boîte dans une alerte.

    • Merci!!!! en changeant juste data: source fixe de sorte qu'il serait correctement lier le 'modèle' param dans le contrôleur. J'ai pensé que je devais inclure le nom de "modèle:" dans mon ajax dans l'ordre pour que cela fonctionne. Merci beaucoup!
    • Dans le cas du complexe de format de données (qui ne peut pas être désérialiser par défaut), vous devez recevoir la chaîne json sur le côté serveur. Vous répondez pourrait fonctionner pour les données simple, mais l'habitude de travailler pour le complexe (qui est ce que la messagerie instantanée à la recherche pour les haha). Votre réponse est la bonne pour ce gars de problème!
    • J'ai trouvé que j'ai eu à inclure contentType: 'application/json' dans mon appel ajax. Pourquoi n'est-ce pas réponse faut-il?
    InformationsquelleAutor jzm
  2. 6

    Changement:

     data: JSON.stringify({ model: source })

    À:

     data: {model: JSON.stringify(source)}

    Et dans votre contrôleur vous faites cela:

    public void PartSourceAPI(string model)
{
       System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

   var result = js.Deserialize<PartSourceModel>(model);
}

    Si l'url que vous utilisez dans jquery est /api/PartSourceAPI puis le nom du contrôleur doit être api et l'action(méthode) doit être PartSourceAPI

    • J'ai essayé et ça n'a fait aucune différence, malheureusement.
    • Voir ma réponse révisée.
    InformationsquelleAutor Jeroen
  3. 3
    var model = JSON.stringify({ 
    'ID': 0, 
    'ProductID': $('#ID').val(), 
    'PartNumber': $('#part-number').val(),
    'VendorID': $('#Vendors').val()
})

$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    url: "/api/PartSourceAPI/",
    data: model,
    success: function (data) {
        alert('success');
    },
    error: function (error) {
        jsonValue = jQuery.parseJSON(error.responseText);
        jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
    }
});

var model = JSON.stringify({      'ID': 0,     ...': 5,      'PartNumber': 6,     'VendorID': 7 }) //output is "{"ID":0,"ProductID":5,"PartNumber":6,"VendorID":7}"

    vos données est quelque chose comme cela "{"modèle": "ID":0,"ProductID":6,"PartNumber":7,"Id":8}}"
    web api contrôleur ne peut pas lier à Votre modèle

    InformationsquelleAutor Ashot
  4. -4

    Je crois que vous avez besoin des guillemets autour de la model:

    JSON.stringify({ "model": source })
    • Dans un objet littéral les noms de propriété n'a pas besoin d'être cité si ils sont littéraux numériques ou identificateur valide les noms. Donc {model:source} est très bien.
    • Avez-vous utilisé le navigateur du débogueur outils pour vérifier ce qui est envoyé à la méthode d'action dans le corps de la requête?
    • Queti, oui, je suis en utilisant le Violoneux, et il dit aucun contenu n'a été envoyé avec la demande
    • J'ai essayé à l'aide de citations et exactement comme vous l'avez fait et il n'a fait aucune différence, malheureusement.
    • Il peut fonctionner sans les guillemets, mais selon json.org ce n'est pas une syntaxe valide. Mais je doute que cela ne causera aucun problème, donc je suppose que vous avez raison.
    • Vous avez seulement besoin du devis pour JSON, ce qui ne l'est pas. Objet littéraux et JSON ne sont pas la même chose.

    InformationsquelleAutor Andrés Nava - .NET