web-dev-qa-db-fra.com

Comment envoyer un objet Json (ou des données de chaîne) de Javascript xmlhttprequest à MVC Controller

J'ai créé une application Web dans ASP.NET MVC et j'essaie d'appeler un contrôleur via Javascript AJAX. Dans Jquery, nous pouvons envoyer un objet json que MVC Model Binder essaie automatiquement de créer un objet .NET et de passer dans le contrôleur comme argument.

Cependant j'utilise un web workers dans lequel jquery ne peut pas être utilisé. Je fais donc l'appel AJAX via l'objet xmlhttprequest Vanilla. Existe-t-il un moyen d'envoyer l'objet Json via cette méthode?

J'ai utilisé la méthode d'envoi de xmlhttprequest mais l'objet modèle est aussi nul dans le contrôleur :(

javascriptasp.netasp.net-mvcxmlhttprequest
17
ganeshran

Vous devriez simplement pouvoir utiliser JSON2 pour le stringifier et définir le Content-Type en-tête à application/json lorsque vous faites le post.

http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js

Vous feriez quelque chose comme:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/Controller/Action');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
}
xhr.send(JSON.stringify(myData));
37
Dve

Voici un exemple. Il suppose que vous utilisez ASP.NET MVC 3.0 qui a un JsonValueProviderFactory intégré. Si ce n'est pas votre cas, vous pouvez consulter ce billet de blog .

Voir le modèle:

public class MyViewModel
{
    public string Prop1 { get; set; }
    public string Prop2 { get; set; }
}

Manette:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult SomeAction(MyViewModel model)
    {
        return Content("success", "text/plain");
    }
}

Vue:

<script type="text/javascript">
    var http = new XMLHttpRequest();

    var value = '{ "prop1": "value 1", "prop2": "value 2" }';
    // It would be better to use JSON.stringify to properly generate
    // a JSON string
    /**
    var value = JSON.stringify({
        prop1: 'value 1',
        prop2: 'value 2'
    });
    **/

    http.open('POST', '/Home/SomeAction', true);
    http.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    http.setRequestHeader('Content-Length', value.length);
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(value); 
</script>
6
Darin Dimitrov