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

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