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


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 1)

Recently I ran across a situation where I had to present some data in a grid form – something the user could edit/save/delete – the usual CRUD operations.

I could have gone down the route of presenting the data in the conventional form using a ASP.NET MVC grid but somehow this seemed a bit cumbersome; I wanted to give the user the ability to edit the records “in-place” without having to jump through hoops; click on the edit button, then get taken to another screen, then save the edited record and then come back to the original grid, and then for the delete operation do some thing similar i.e. get taken to another page, confirm to delete a record and then get taken back to the grid – again, a simple confirmation in-place when they click on the delete button would do just fine – thank you!

My use case was pretty straightforward – ability to edit records in place, delete in place, server side paging, search & sort on a few key fields and of course the ability to add a new record – I thought about using AngularJS to drive the front end development and turned to what was available and though there are quite a few choices none of these quite fit the bill and I did not have the patience to customize any of these existing plugins and then struggle with understanding the API to accomplish what I had to do.

Continue reading