UI-Grid With AngularJS And WebAPI

UI-Grid

UI-Grid 3.0 (formerly ng-grid) is a 100% Angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered as Angular modules and Directives. This keeps the core; small and focused, while executing very complex features only when you need them.

In the core module, you get

• Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
• Bind cells to the complex properties and the functions.
• Column sorting with three states: Asc, Desc and None.
• Column filtering.
• Ability to change the header and the cell contents with the custom templates.
• i18nService allows label translations.

Prerequisites

Visual Studio 2015 is the prerequisite to work with this article.

Thus, let's just use the sections with which we can implement the functionality:

• Create ASP.NET MVC 5 Application.
• Adding Model.
• Scaffolding in MVC 5.
• View in MVC 5.
• Log in an Entity Framework.

Create ASP.NET MVC 5 Application

In this section, we'll create ASP.NET Web Application with the MVC 5 Project Template. Use the procedure given below.

Step 1

Open Visual Studio 2015 and click New Project.

Step 2

Select the Web from the left pane and create ASP.NET Web Application.

Step 3

Select the MVC Project Template in the next ASP.NET wizard.

Visual Studio automatically creates the MVC 5 Application, adds some files and folders to the solution.

Working with an Entity Framework

Follow the steps given below.

Step 1

Right click on Models folder, click Add New Item, select ADO.NET Entity Data Model from Data template and give a name.

Step 2

Select EF Designer from the database.

Step 3

Make a new connection and select a connection, if you already have a connection.

Step 4

Select tables, view, stored procedures and click Finish.

Now, create a new Web API controller with actions, using Entity Framework, as shown below.

Step 1

Right click on controller folder, click Add and select Controller.

Step 2

Select Web API Controller with actions, using Entity Framework.

Step 3

Select Model Class, Data context class, controller name and click Add.

You will get the code given below.