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