Create a div based grid functioning on JSON data using MVC with Entity Framework and MySQL

• Download packages - 4.93 MB
• Download solution - 2.57 MB

Introduction

MVC with Razor has changed the way we design web pages. Client controls with jQuery have reduced the load on the server in parsing the server controls and loading the page events. The very powerful GridView control used in ASP.NET has been replaced by many jQuery grids available as open source, but there have been some drawbacks or difficulties in understanding their source code. This grid is very easy to understand and implement as it uses JavaScript, jQuery, JSON, CSS, and HTML which are commonly known to programmers. So programmers do not need to learn any new plugins before implementing this grid.

This JSON based grid does the following operations fully at client side:

1. JSON based searching
2. Sorting
3. Paging (First, Last, Previous, Next, Current Page Number Display and Number of Total Pages Display)
4. Open a new row to add data or edit data
5. Cancel/Add new row or cancel edit existing row
6. Validations for required fields and data type and length

This grid does the following operations fully at both client and server side:

The browser sends only the required input through jQuery AJAX requests and gets only the updated data for that particular row which is added or updated as JSON from the MVC controller. In the case of delete, the delete status is received at the browser as JSON.

This JSON data is then updated in the existing full JSON at the browser. The markup is recreated at the browser through jQuery.

Using the Code

The software platform needed to run the source code needs MVC4 with Visual Studio 2012, MySQL 5.2.47 CE Revision 10398 or later, Entity Framework from Nuget, NewtonSoft.Json from Nuget, and download jquery.validator-0.3.6.min.js. I have customized it to use it in the attached source code.

I started work on this grid by creating partial views for all operations insert, update, cancel, delete, and adding a new row of data in the grid, but later on I created a JSON based grid. All code is attached in the source.

Points of Interest

It was interesting that I was looking forward to knowing a smart technique to use MySQL with Entity Framework, meanwhile I got a requirement to use open-source jQuery Grids available in the market. I wondered, why I should learn the features of the plugin. Why not create my own grid playing with the JSON data and have full control on the code? And finally I came up with something. This is a beginning, there will be much more programmer friendly efficient plugins available very soon.