[jquery] Posting JSON data via jQuery to ASP .NET MVC 4 controller action

VB.NET VERSION

Okay, so I have just spent several hours looking for a viable method for posting multiple parameters to an MVC 4 WEB API, but most of what I found was either for a 'GET' action or just flat out did not work. However, I finally got this working and I thought I'd share my solution.

1. Use NuGet packages to download JSON-js json2 and Json.NET. Steps to install NuGet packages:

   (1) In Visual Studio, go to Website > Manage NuGet Packages...

   (2) Type json (or something to that effect) into the search bar and find JSON-js json2 and Json.NET. Double-clicking them will install the packages into the current project.

   (3) NuGet will automatically place the json file in ~/Scripts/json2.min.js in your project directory. Find the json2.min.js file and drag/drop it into the head of your website. Note: for instructions on installing .js (javascript) files, read this solution.

2. Create a class object containing the desired parameters. You will use this to access the parameters in the API controller. Example code:

   Public Class PostMessageObj
   
   Private _body As String
   Public Property body As String
       Get
           Return _body
       End Get
       Set(value As String)
           _body = value
       End Set
   End Property
   
   
   Private _id As String
   Public Property id As String
       Get
           Return _id
       End Get
       Set(value As String)
           _id = value
       End Set
   End Property
   End Class
   

3. Then we setup the actual MVC 4 Web API controller that we will be using for the POST action. In it, we will use Json.NET to deserialize the string object when it is posted. Remember to use the appropriate namespaces. Continuing with the previous example, here is my code:

   Public Sub PostMessage(<FromBody()> ByVal newmessage As String)
   
   Dim t As PostMessageObj = Newtonsoft.Json.JsonConvert.DeserializeObject(Of PostMessageObj)(newmessage)
   
   Dim body As String = t.body
   Dim i As String = t.id
   
   End Sub
   

4. Now that we have our API controller set up to receive our stringified JSON object, we can call the POST action freely from the client-side using $.ajax; Continuing with the previous example, here is my code (replace localhost+rootpath appropriately):

   var url = 'http://<localhost+rootpath>/api/Offers/PostMessage';
   var dataType = 'json'
   var data = 'nothn'
   var tempdata = { body: 'this is a new message...Ip sum lorem.',
       id: '1234'
   }
   var jsondata = JSON.stringify(tempdata)
   $.ajax({
       type: "POST",
       url: url,
       data: { '': jsondata},
       success: success(data),
       dataType: 'text'
   });
   

As you can see we are basically building the JSON object, converting it into a string, passing it as a single parameter, and then rebuilding it via the JSON.NET framework. I did not include a return value in our API controller so I just placed an arbitrary string value in the success() function.

Author's notes

This was done in Visual Studio 2010 using ASP.NET 4.0, WebForms, VB.NET, and MVC 4 Web API Controller. For anyone having trouble integrating MVC 4 Web API with VS2010, you can download the patch to make it possible. You can download it from Microsoft's Download Center.

Here are some additional references which helped (mostly in C#):

• Using jQuery to Post FromBody Parameters
• Sending JSON object to Web API
• And of course J Torres's answer was the last piece of the puzzle.