How do you post a JSON file to an ASP.NET MVC Action?

Question

My iphone client posts the following json to my mvc service. When posting data from html form it automatically converts form data to UserModel and passes the object to my Create method, but when I send the JSON string in the body of my request from iphone it comes back as null.

What would be the cleanest solution to do the conversion from JSON to Object.

I rather not create multiple methods for different clients, so I'm trying to get the same method to work on iphone, and mvc client.

Body of my request:

{
   "firstName" : "Some Name",
   "lastName" : "Some Last Name",
   "age" : "age"
}

My Model and Action Result

public class UserModel
{
   public int Id { get; set; }
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public int Age { get; set; }
}

[HttpPost]
public Create ActionResult(UserModel user)
{
   // user is null
   userStorage.create(user);
   return SuccessResultForModel(user);
}

Answer 1

You need to set the HTTP Header, accept, to 'application/json' so that MVC know that you as passing JSON and does the work to interpret it.

accept: application/json

see more info here: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

UPDATE: Working sample code using MVC3 and jQuery

Controller Code

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult PostUser(UserModel data)
        {
            // test here!
            Debug.Assert(data != null);
            return Json(data);
        }
    }

    public class UserModel
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
}

View Code

@{ ViewBag.Title = "Index"; }
<script src="../../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var sample = {};
    sample.postData = function () {
        $.ajax({
            type: "POST", url: "@Url.Action("PostUser")",
            success: function (data) { alert('data: ' + data); },
            data: JSON.stringify({ "firstName": "Some Name", "lastName": "Some Last Name", "age": "30" }),
            accept: 'application/json'
        });
    };
    $(document).ready(function () {
        sample.postData();
    });
</script>

<h2>Index</h2>

** Update ** I added JSON.stringify to the JS object before I pass it to the data element in the AJAX Request. This just makes the payload more readable, however the Controller will interpret both formats of the data similarly.

Answer 2

I recently came up with a much simpler way to post a JSON, with the additional step of converting from a model in my app. Note that you have to make the model [JsonObject] for your controller to get the values and do the conversion.

Request:

 var model = new MyModel(); 

 using (var client = new HttpClient())
 {
     var uri = new Uri("XXXXXXXXX"); 
     var json = new JavaScriptSerializer().Serialize(model);
     var stringContent = new StringContent(json, Encoding.UTF8, "application/json");
     var response = await Client.PutAsync(uri,stringContent).Result;
     ...
     ...
  }

Model:

[JsonObject]
[Serializable]
public class MyModel
{
    public Decimal Value { get; set; }
    public string Project { get; set; }
    public string FilePath { get; set; }
    public string FileName { get; set; }
}

Server side:

[HttpPut]     
public async Task<HttpResponseMessage> PutApi([FromBody]MyModel model)
{
    ...
    ... 
}

Answer 3

Late but hope it helps someone.

What would be the cleanest solution to do the conversion from JSON to Object?

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

$.post("http://localhost:52161/Default/PostRawJson/", { json: {
   "firstName" : "Some Name",
   "lastName" : "Some Last Name",
   "age" : "age"
}});


public void PostRawJson(string json)
{
    var person = System.Web.Helpers.Json.Decode(json);
    person.firstname...
}

This way you get a pure JSON object to work with in your controller as requested.

Answer 4

Based on Glenn Ferries answer, which seemed to work until I looked at what was actually being sent to the controller - and it wasn't JSON.

Hence adjusted a bit below:

This is with MVC 4, and jQuery 1.7 ish

Controller action method (UserModel object as in question):

[HttpPost]
public ActionResult Create(UserModel user)
{
    Debug.Assert(data != null);
    return Json(data);
}

jQuery code to send the request:

<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "@Url.Action("Create")",
            /* jQuery will not send JSON unless you explicitly tell it to */
            data: JSON.stringify({ "firstName": "Some Name", "lastName": "Some Last Name", "age": "30" }),
            /* contentType is important for MVC to be able to unpack the json */
            contentType: 'application/json'
            accept: 'application/json',
        }).done( function(data) {
            /* this callback gets used when successful */
            console.log("response: " + data);
        }).fail(function (jqxhr, status, error) {
            /* for debugging: this callback gets used in case of errors */
            console.log("error :" + error);
        }).always(function () {
            /* for debugging: this callback always gets called at the end either way*/
            console.log("complete");
        });
    });

</script>

The MVC controller action is the easy bit.

The hard bit is making sure you actually are sending JSON to it to test it.

jQuery ajax() method when used with POST will generally encode parameters using querystring format in the body of the request. MVC can happily unpack that.

To actually send JSON with ajax() you must use JSON.stringify().

And for MVC to correctly interpret that request, you need to set the contentType