Retrieve JSON data from MVC Controllers in ASP.NET MVC

Using unobtrusive AJAX in your MVC web applications can boost system’s performance. We have seen in previous post how to use unobtrusive AJAX to retrieve only partial views instead of full page requests, in ASP.NET MVC Framework. While being a good approach to use Ajax in order to retrieve only partial views, you may have noticed that your controllers send back your data requested along with the HTML fragments. Remember? (screenshot from previous post)

In order to overcome this, we can request only the specific object data we want and let the client’s browser render the respective HTML fragments. The requested data will have to be in JavaScript Object Notation (JSON) format, which is a language-independent way of expressing data. We won’t create a new project but instead, we will continue to add code in the previous post. If you haven’t read it yet, please take a look at it or just make sure you download the project we had created. Open the solution in Visual Studio and change the ProductController.cs file to the following.

We have created a GetData private method to get Product objects based on a selected category, passed as parameter to that function. The most important action method we added is the GetProductDataJson method, which returns a type of JsonResult object, something that tells the view engine to return JSON data to the client. Pay attention to this line of code:

return Json(data, JsonRequestBehavior.AllowGet);

You need to tell the MVC Framework to respond to GET requests, cause by default JSON data will only be sent in response to POST requests. The GetProductData action method renders partial view results, in the way we have seen in previous post.

Last thing we need to do, is to change the way the onSuccess Ajax call event works. Change the GetProducts.cshtml file as follows.

We added a script function processData to fill the productTable table as long as the JSON data have been retrieved. We bind this JavaScript method only in the Ajax ActionLinks in lines 56-66 through the OnSuccess = “processData” declaration. Line 41 will render the partial view through the GetProductData action method when you press the Submit button. So in the same page, we use two different ways to retrieve data with AJAX. One that renders partial views and another that returns JSON data that have to be manipulated by a script on client’s side. Build your application and run it. I need to show you something interesting. Select Car and click the “Submit” button. This will render the partial view and will display all Car objects. The category enum field has been rendered correctly.

Now try to retrieve Car objects or other if you want, but clicking one of the links this time. I have clicked the Car link. Take a look at the Category field now and how JSON data have been retrieved.

This problem occurs due to JSON’s default Encoding. To solve the problem, you need to tell the action method that returns the JSON data, exactly what type of object the client expects to get. Change the GetProductDataJson action method in the ProductController as follow.

Build and run your solution again. Click an AJAX link like you did before.

That’s it, we have shown how to get and manipulate JSON data retrieved from your MVC controllers. When it comes to JSON another concept may popup in your mind: MVC WebApi. We are going to see how WebApi approach works in a later post. You can download the project we created in this post from here. I hope you enjoyed the post.

In case you find my blog’s content interesting, register your email to receive notifications of new posts and follow chsakell’s Blog on its Facebook or Twitter accounts.

The purpose of this blog is to broaden my education, promote experimentation and enhance my professional development. Albert Einstein once said that “If you can’t explain it simply, you don’t understand it well enough” and I strongly believe him!