Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

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)

Share

About the Author

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

Comments and Discussions

 
GeneralSource code missing PinstaffSmitha Vijayan31-May-13 8:08 
QuestionRe: Source code missing PinprofessionalRajat Bittharia2-Jun-13 20:06 
AnswerRe: Source code missing PinstaffSmitha Vijayan3-Jun-13 1:33 
GeneralRe: Source code missing Pinmember3134z4r4-Jun-13 7:25 
GeneralRe: Source code missing PinprofessionalRajat Bittharia4-Jun-13 20:05 
AnswerRe: Source code missing PinprofessionalRajat Bittharia4-Jun-13 20:13 
BugFormat the code text please! PinmemberJaydeep Jadav30-May-13 23:20 
GeneralRe: Format the code text please! PinprofessionalRajat Bittharia31-May-13 0:03 
GeneralRe: Format the code text please! PinmemberJaydeep Jadav31-May-13 21:42 
GeneralRe: Format the code text please! PinmemberGregoryW31-May-13 0:44 
QuestionNon-formated text in article PinmemberGregoryW30-May-13 20:07 
AnswerRe: Non-formated text in article PinprofessionalRajat Bittharia30-May-13 23:58 
GeneralRe: Non-formated text in article PinmemberGregoryW31-May-13 0:00 
QuestionNice PinprofessionalHostForLIFE.eu30-May-13 19:45 
GeneralMy vote of 5 PinmemberRockstar_30-May-13 18:43 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 5 Jun 2013
Article Copyright 2013 by Rajat Bittharia
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid