Learn MVC Using Angular Dynamic Control In DataTables

Introduction

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.

MVC

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

MVC

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.

MVC

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

MVC

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

Output 2
MVC

Conclusion

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!

Related Posts

  • 76
    Introduction In this article, we will learn how to use MVC, using Angular's data binding functionality to create a datatable from the server side with…
    Tags: set, database, test, alter, create, td, /td, studio, visual, angularjs
  • 69
    Introduction This article demonstrates low to use Agular dynamic localization in MVC using the Angular i18n package in Visual Studio 2017. Localization Localization is a…
    Tags: td, /td, studio, visual, angularjs
  • 64
    Introduction In this article, we will learn MVC using Angular Wizard and Datatable from the server side, and work with the stored procedure using Visual…
    Tags: set, database, test, alter, create, td, /td, angularjs
  • 60
    Introduction This article demonstrates how to create MVC applications using Angular UI-Select with Bootstrap. This article is useful for implementing auto-complete text in your application.…
    Tags: studio, visual, angularjs
  • 58
    Introduction In this article, we will learn MVC, using Angular Pie Chart, which is used for two types of UI, which are given below. Angular…
    Tags: studio, visual, angularjs
Show Buttons
Hide Buttons