Click here to Skip to main content
13,555,567 members
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 30 May 2013
Licenced CPOL

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

, 5 Jun 2013
Rate this:
Please Sign up or sign in to vote.
Grid based on JSON data using MVC with Entity Framework and MySQL.


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rajat Bittharia
Software Developer (Senior)
India India
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralSource code missing Pin
Smitha Vijayan31-May-13 8:08
staffSmitha Vijayan31-May-13 8:08 
QuestionRe: Source code missing Pin
Rajat Bittharia2-Jun-13 20:06
professionalRajat Bittharia2-Jun-13 20:06 
AnswerRe: Source code missing Pin
Smitha Vijayan3-Jun-13 1:33
staffSmitha Vijayan3-Jun-13 1:33 
GeneralRe: Source code missing Pin
3134z4r4-Jun-13 7:25
member3134z4r4-Jun-13 7:25 
GeneralRe: Source code missing Pin
Rajat Bittharia4-Jun-13 20:05
professionalRajat Bittharia4-Jun-13 20:05 
AnswerRe: Source code missing Pin
Rajat Bittharia4-Jun-13 20:13
professionalRajat Bittharia4-Jun-13 20:13 
BugFormat the code text please! Pin
Jaydeep Jadav30-May-13 23:20
memberJaydeep Jadav30-May-13 23:20 
GeneralRe: Format the code text please! Pin
Rajat Bittharia31-May-13 0:03
professionalRajat Bittharia31-May-13 0:03 
GeneralRe: Format the code text please! Pin
Jaydeep Jadav31-May-13 21:42
memberJaydeep Jadav31-May-13 21:42 
GeneralRe: Format the code text please! Pin
GregoryW31-May-13 0:44
memberGregoryW31-May-13 0:44 
QuestionNon-formated text in article Pin
GregoryW30-May-13 20:07
memberGregoryW30-May-13 20:07 
AnswerRe: Non-formated text in article Pin
Rajat Bittharia30-May-13 23:58
professionalRajat Bittharia30-May-13 23:58 
GeneralRe: Non-formated text in article Pin
GregoryW31-May-13 0:00
memberGregoryW31-May-13 0:00 
QuestionNice Pin
HostForLIFE.eu30-May-13 19:45
professionalHostForLIFE.eu30-May-13 19:45 
GeneralMy vote of 5 Pin
Rockstar_30-May-13 18:43
memberRockstar_30-May-13 18:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180515.1 | Last Updated 5 Jun 2013
Article Copyright 2013 by Rajat Bittharia
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid