web-dev-qa-db-fra.com

Envoi d'un objet JSON à l'API Web

J'essaie de comprendre comment envoyer des informations d'un formulaire à une action d'API Web. Voici le jQuery/AJAX que j'essaie 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 action de contrôleur

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

Qu'est-ce que je rate? en ce moment, lorsque je débogue et que je passe par là lorsque la requête ajax frappe l'action du contrôleur, rien n'est passé dans le paramètre du modèle.

c#-4.0jqueryasp.net-mvc-4asp.net-web-api
22
Cory

Essaye ça:

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;
    }

Voir

<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 avoir rempli la zone de texte, le controller crache ce que vous avez écrit dans la zone PartNumber dans une alerte.

29
jzm

Changement:

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

À:

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

Et dans votre contrôleur, vous faites ceci:

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 alors le nom du contrôleur doit être api et l'action (méthode) doit être PartSourceAPI

6
Jeroen
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 sont quelque chose comme ceci "{" modèle ":" ID ": 0," ProductID ": 6," PartNumber ": 7," VendorID ": 8}}" le contrôleur web api ne peut pas le lier à votre modèle

3
Ashot