Bind table in asp net mvc web application calling web api with jquery ajax using datatables

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

Introduction In this article will see how to bind a table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables plugin.

Prerequisite  

Zeal to learn.

Visual Studio – 2012 and above.

MVC Web Development Start with developing a basic web application.

Below is asp.net MVC web application page with static data bind to table.

Model: 

Model with Productclass

Controller: 

With static data list of Product class. static List<Product> products = new List<Product>() { new Product() {Static Data… } }



Action Method, public ActionResult Index() { return View(products); }

View: 

With a plain HTML table looping in with Model. <table id="products" class="table table-bordered table-hover"> ... </table>

Build and Run,

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

As seen above, table has smart features like pagination, filtering, sorting with presentable. This all is being implemented using JQueryin three simple steps with minimal coding. Read (article#9) for learning how to get this feature implemented.

Web API As in this article we are focussing on how to call Web API using JQuery Ajax and JQuery DataTables plugin, we will not go in detail about developing an API, will simply create an API with desired response.

Create a simple Web API which returns above product details as it response.

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

API, is now with URI, api/products It returns list of products, Below image is response noted for Postman client app.

Controller - Code Coming to controller page, now will look like,

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

View–Code Table with ‘products’ as ID and Row with header details can be seen in below image.

If you notice, we have kept body section of table blank. This area will get bind with response data of newly created Web API.

Calling Web API through JQuery Ajax We have Script section, wherein we are calling Datatable method to our Table with ID as ’products’, for implementing DataTable plugin feature for Table, such as filtering, sorting and paging.

At the underlined area in below image, we will be adding our code for calling Web API.

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

This will bind our Table with API response data, along with DataTable mentioned features.

It comprises of two parts, first the ajax call with API URI and data source and Secondly with Columns with data details.

Refer below image, First, at ajax call, a) We are providing URL as our API URI i.e. ‘api/products’ (Refer above image with URI and Response data for better understanding) b) dataSrc is referred to response data source. In our case, we have plain JSON data as response.

Our Data Response, [ { ….}, { …. }, …… ]hence dataSrc is blank.

If it would something like, Product [ { …. }, { …. }, …… ] in this case dataSrc would be Product.

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

Secondly, it comes to Columns.

We need to provide key name, as in received in our API response. If you refer above response data image, below mentioned productid, productCategory and so on are all key names in response data.

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

So, the code says, I have the API URL along with key names coming in as response, so will bind the columns with values of respective keys.

Build the application and Run, will display desired output.

Binding Column with Controls

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

We can also render controls like button or anchor tag in table column with desired data bind to it, such as URL or some ID. Let’s add an anchor tag at first column, and bind it with an URI for having product details.

This is achieved by adding render key with a function to add control.

Function has three parameter, data, type ( of data ) and collection of data with some name, here we have given it as customer ( just to differentiate with product). You can give any name.

Below code, bind this column, with an anchor tag with value as ProductID and href i.e. link attached to it as ‘ shop/details/{ProductID} ‘

Once adding above code, build the application and Run.

Bind table in ASP.NET MVC web application calling Web API with JQuery Ajax using DataTables

Conclusion In this article, we saw how to bind or populate table with smart features like sorting, paging, filtering by calling ASP.NET Web API through JQuery Ajax using DataTable plugin. Along with rendering controls in table column.

Joseph Macwan technical writer with a keen interest in business, technology and marketing topics. He is also associated with Aegis softwares which is ASP.NET development company.