Learn MVC Using Angular Dynamic Control In DataTables


In this article, we will learn MVC using Angular data binding for dynamic control in DataTables from a server side Web API using Visual Studio 2017.

In this article, we are going to:

  • Create a Database.
  • Create a Store procedure.
  • Create an MVC Application.
  • Use Angular DataTables Dynamic Control.

Create Database

Open SQL Server 2016, then click the “New Query” window and run the below query.

Create Table

I will be creating a new table based on employee info.

After creating the table, add some data.

Create Store procedure 

I have written the store procedure for my data operations so run below SP. In this procedure, I have done getting different data for dynamic control

Open Visual Studio 2017.


Go to New menu >Click New and Project. Now it will open the New Project Window.


You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in “Solution name” text box then click OK.


One more window should appear. Select MVC Template in this pop-up and click OK.

After your project is created, follow the below links so you can download the neccessary plugin files.

Then inject the “DataTables” key word into the Angular module:

Create and design an HTML page with a table, with “datatable=”ng” inserted in teh <table> element. Then bind the Server data.

Using Angular Datatable

Create “Model” folder in solution explorer & create new class in model folder.

Write the below method in the home controller. “LoadData” will display the data in DataTables.

In this method, I have called a Web API function with the async method. Refer the API URL as I have shown below in your Web.config file.

Create an Angular controller and service for getting data from the server side.

Angular Controller

Angular Service

Do not forget to refer the plugin files, and any JS files you also created.

Plug In

My Files

Once you’ve completed the above process, your DataTables is ready to load. Run the application.

Output 1


If you click ‘Employee Code’ near the arrow button, it will open a sub table also.

Output 2


In this article, we have learned MVC using dynamic control DataTables. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.