Cómo enviar objetos Json (o datos de cadenas) desde Javascript xmlhttprequest a MVC Controller

Question

Creé una aplicación web en ASP.NET MVC e intento llamar a un controlador a través de Javascript AJAX. En Jquery podemos enviar un objeto json que MVC Model Binder intenta automáticamente crear un objeto .NET y pasar el controlador como un argumento.

Sin embargo, estoy usando un web worker en el que no se puede usar jquery. Así que estoy haciendo la llamada AJAX a través del objeto vanilla xmlhttprequest. ¿Hay alguna manera de enviar el objeto Json a través de este método?

que utiliza el método de envío de la xmlhttprequest pero el objeto del modelo se presenta como nulo en el controlador :(

Answer 1

sólo debe ser capaz de utilizar JSON2 a stringify y establecer la cabecera Content-Type a application/json cuando lo hace el cargo.

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

Se podría hacer algo como:

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

Answer 2

Aquí hay un ejemplo. Se supone que está utilizando ASP.NET MVC 3.0 que tiene incorporado JsonValueProviderFactory. Si este no es tu caso, puedes echar un vistazo al this blog post.

Ver modelo:

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

controlador:

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

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

Vista:

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

Answer 3

Usando $ .ajax(), que puede consiguió fácilmente los datos de javascript para Controlador de MVC.

Para referencia,

var uname = 'Nikhil Prajapati'; $.ajax({

 url: "/Main/getRequestID", // This is path of your Controller with Action Result. 
     dataType: "json",   // Data Type for sending the data 

     data: {      // Data that will be passed to Controller 
      'my_name': uname,  // assign data like key-value pair  
      // 'my_name' like fields in quote is same with parameter in action Result 
     }, 

     type: "POST",    // Type of Request 
     contentType: "application/json; charset=utf-8", //Optional to specify Content Type. 

     success: function (data) { // This function is executed when this request is succeed. 
       alert(data); 
     }, 

     error: function (data) { 
       alert("Error"); // This function is executed when error occurred. 
     } 

)};

y, ahora en el lado del controlador,

public ActionResult getRequestID(String my_name) {

 MYDBModel myTable = new Models.MYDBModel(); 
     myTable.FBUserName = my_name; 
     db.MYDBModel.Add(myTable); 
     db.SaveChanges();    // db object of our DbContext.cs 
     //return RedirectToAction(“Index”); // After that you can redirect to some pages… 
     return Json(true, JsonRequestBehavior.AllowGet); // Or you can get that data back after inserting into database.. This json displays all the details to our view as well. 
    } 

Para mayor referencia .. sólo hay que visitar .. Send Data from Java Script to Controller in MVC