AngularJS + ASP.NET Web API: Building a simple grid in AngularJS with server-side paging, sorting, searching (Part 8)

This post will be the culmination of all of the following posts:

In part 1 I described how to configure the application to include the requisite JavaScript files, laid out the folder structure & stubbed out the app.js and a few other JavaScript files.

In Part 2 I populated the grid with data returned from the Web API.

Part 3 of the post incorporated the ability to page through the grid.

In part 4, I added a loading bar / progress bar

In part 5, we took a brief detour and I spoke about unit testing

Part 6 – we saw how to sort records

And, Part 7 – added the ability to search based on first and last names.

In this post – part 8, I’ll be adding the ability to edit a record in-place as well as delete a record, and also add a new record.

Let’s start by writing the functions that will handle the deleting a record and updating an existing record or adding a new record.

Continue reading

Advertisements

AngularJS + ASP.NET Web API: Building a simple grid in AngularJS with server-side paging, sorting, searching (Part 5)

Before we delve into implementing sorting and searching, I would like to spend some time on unit testing. Unit tests for me are fundamental to any software development endeavor. I’ve been in the trenches long enough to know the importance of writing unit tests. The presence of unit tests also shows discipline & there is a positive correlation between unit tests and code quality. In my opinion writing unit tests is sacrosanct to the discipline of crafting software. Period.

So, now without more ado, let’s see how one can unit test angular code. There is some setup required. First, add a new project of type “Unit Test Project” and name this project NgWebApiGrid.Web.Tests.

Next, install Chutzpah; Chutzpah is a test runner and without this add-on the JavaScript unit tests you write in say Jasmine will not get recognized i.e. they will not appear in the Test explorer. Chutzpah is available as a Visual Studio add-on and to install it go to Tools menu option and then select extensions and updates

Continue reading

AngularJS + ASP.NET Web API: Building a simple grid in AngularJS with server-side paging, sorting, searching (Part 4)

In the previous post I implemented paging and in this post we’ll implement a nifty Angular plug-in called angular-loading-bar. But before we proceed there is one thing I wanted to correct in my previous post. In the students.tpl.html file we added the pagination directive as so


<pagination data-total-items="totalItems" ng-model="currentPage" data-max-size="NumberOfPageButtons" class=" pagination-sm" data-boundary-links="true" data-rotate="false" ng-change="pageChanged()" data-items-per-page="recordsPerPage"></pagination>

And, though this works just fine it will not pass HTML validation and you might have noticed squiggles below “pagination”. This was bothering me quite a bit, so to correct this convert the pagination custom tag to a span & then use attributes to initialize the pagination custom directive as so


<span data-pagination data-total-items="totalItems" data-ng-model="currentPage" data-max-size="NumberOfPageButtons" class=" pagination-sm" data-boundary-links="true" data-rotate="false" data-ng-change="pageChanged()" data-items-per-page="recordsPerPage"></span>

Now that we have that out of the way, let’s go to the home page of the loading bar we will be using. While this page was loading you might have seen a blue colored bar run across the top of your screen from left to right. We’ll incorporate this in our application such that each time there is a delay due to an XHR request the loading bar should show up.

Continue reading

AngularJS + ASP.NET Web API: Building a simple grid in AngularJS with server-side paging, sorting, searching (Part 3)

In the previous post I populated the grid with data returned from an API, and in today’s post I’ll incorporate paging.

Head over to http://angular-ui.github.io/bootstrap/ & from the directives dropdown select “pagination”

You should see a set of pagination controls – each styled a bit differently, feel free to take a look at the markup and JavaScript & play with them in plunker to get familiar with how they work.

I like the one that limits the maximum number of visible buttons – so go ahead and copy the markup, I’ve highlighted the markup we’ll be copying below

NgWebApiGrid19

Paste this markup below the closing </table> tag in the students.tpl.html file as so

Continue reading

AngularJS + ASP.NET Web API: Building a simple grid in AngularJS with server-side paging, sorting, searching (Part 2)

In the first part of the series I described how to configure the application to include the requisite JavaScript files, laid out the folder structure & stubbed out the app.js and a few other JavaScript files.

I’ll now give a brief overview of setting up the data access layer, and then delve into creating the api to return JSON.

Entity framework code first

I’ll very quickly go over the steps for creating some basic data that our grid can consume, if you are new to Entity Framework’s code first migrations then hop over to the following link for a refresher. Also, take a look at the following link. This is a tutorial by Tom Dykstra and I’ll be using the same data to seed the dB but instead of lumping the data access layer within the web project I’ll make a separate data access project.

Continue reading