Click here to Skip to main content
15,867,453 members
Articles / Database Development

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

Rate me:
Please Sign up or sign in to vote.
4.93/5 (11 votes)
5 Jun 2013CPOL2 min read 54.8K   2.6K   22   15
Grid based on JSON data using MVC with Entity Framework and MySQL.

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.

License

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


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralSource code missing Pin
Smitha Nishant31-May-13 8:08
protectorSmitha Nishant31-May-13 8:08 
QuestionRe: Source code missing Pin
Rajat Bittharia2-Jun-13 20:06
Rajat Bittharia2-Jun-13 20:06 
AnswerRe: Source code missing Pin
Smitha Nishant3-Jun-13 1:33
protectorSmitha Nishant3-Jun-13 1:33 
GeneralRe: Source code missing Pin
3134z4r4-Jun-13 7:25
3134z4r4-Jun-13 7:25 
GeneralRe: Source code missing Pin
Rajat Bittharia4-Jun-13 20:05
Rajat Bittharia4-Jun-13 20:05 
Hi Smitha,

I have uploaded the source code again and checked it by downloading. It is pending approval.

I have added the delete functionality also in the grid. I will add more text details and screenshots to the article soon.
Thanks for converting it into an Article. Smile | :)
AnswerRe: Source code missing Pin
Rajat Bittharia4-Jun-13 20:13
Rajat Bittharia4-Jun-13 20:13 
BugFormat the code text please! Pin
Jaydeep Jadav30-May-13 23:20
Jaydeep Jadav30-May-13 23:20 
GeneralRe: Format the code text please! Pin
Rajat Bittharia31-May-13 0:03
Rajat Bittharia31-May-13 0:03 
GeneralRe: Format the code text please! Pin
Jaydeep Jadav31-May-13 21:42
Jaydeep Jadav31-May-13 21:42 
GeneralRe: Format the code text please! Pin
GregoryW31-May-13 0:44
GregoryW31-May-13 0:44 
QuestionNon-formated text in article Pin
GregoryW30-May-13 20:07
GregoryW30-May-13 20:07 
AnswerRe: Non-formated text in article Pin
Rajat Bittharia30-May-13 23:58
Rajat Bittharia30-May-13 23:58 
GeneralRe: Non-formated text in article Pin
GregoryW31-May-13 0:00
GregoryW31-May-13 0:00 
QuestionNice Pin
HostForLIFE.eu - Europe ASP.NET Hosting30-May-13 19:45
HostForLIFE.eu - Europe ASP.NET Hosting30-May-13 19:45 
GeneralMy vote of 5 Pin
Rockstar_30-May-13 18:43
professionalRockstar_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.