Click here to Skip to main content
13,147,540 members (29,957 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 3 Feb 2014

MVC Grid Inline Edit

, 3 Feb 2014
Rate this:
Please Sign up or sign in to vote.
MVC Grid quick inline edit with Jquery


Using this code is possible to update fields in any HTML table, it's not necessary to open an edit view and confirm each modification, save action fires on blur event, as in Excel grid.


To use this code, it's necessary to include this plugin:

All JavaScript files are included to download.

Server side is focused in Entity Framework and uses reflection.

Using the Code

Client Side: The View

How to use the plugin in client side:

//.cshtml File  
// for each row in model, you have to map each editable field with the attributes:
// data-row (number of row),  data-col (name of field), data-val (original value).

//Each row should contains an input hidden with id=@rowNumber and value=@id
//<input type="hidden" id="@i" value="@item.Id" />
        int i = 0;
        foreach (var item in Model) {
                    <input type="text"
                        value="@item.Name" data-row="@i" 
                        data-col="Name" data-val="@item.Name" />
                    <input type="hidden" id="@i" value="@item.Id" />

<!-- Javascript files required -->
<script src="~/JS/linqToJquery.js"></script> 
<!-- plugin must be downloaded before -->
<script src="~/JS/grid.js"></script>  
<!-- The Grid Javascript class attached below -->

<!-- The javascript/Jquery code -->
var grid={}; //declare grid

$(document).ready(function () {
    //instance grid with server side controller and action name
    grid = new Grid("controllerName","actionName"); //default actionName=UpdateField

    //push to fieldsValidators array all the validation rules this way:
    // {fieldName: name field to check
    //  , checkValidateFunction: a boolean validation function 
    //  , msg: msg to alert in case checkValidateFunction == false
        fieldName: "name"
       , checkValidateFunc: function (value) { return (value.length > 0); }
       , msg: "required field"
    //bind fields definied with grid class. 

Client Side: Grid JavaScript Class

The JavaScript plugin, it's not necessary to modify it.

function Grid(controller, action) {
    var that = this;
    this.controller = controller;
    this.action = (action == null ? "UpdateField" : action);
    this.fieldsValidators = [{}];

Grid.prototype.bindFields = function () {
    var grid = this;

    //bind focus event to all inputs
    $("td input").focus(function () {
        if ($(this).data("col") == undefined) return;
        $(this).addClass("gridFieldEdit"); //CSS class default name used when focus

    //bind blur event to fire save method
    $("td input").blur(function () {
        if ($(this).data("col") == undefined) return;
        //if field not modified: return
        if ($(this).val() == $(this).data("val")) return;
        if (!grid.checkField($(this).data("col").toLowerCase(), $(this).val())) {
            var msgError = grid.fieldsValidators.First("['fieldName']=='" + 
            $(this).data("col").toLowerCase() + "'").msg;
        var idValue = $("#" + $(this).data("row")).val();
        //set callback
        var that = this;
        var callback = function () {
            $(that).data("val", $(that).val());
        //save, $(this).data("col"), $(this).val(), callback);

Grid.prototype.checkField = function (fieldName, fieldValue) {
    var valid=true;
    $.each(this.fieldsValidators.Where("['fieldName']=='" + 
    fieldName + "'"), function (index, item) {
        if (!item.checkValidateFunc(fieldValue)) {
            valid = false;
    return valid;

//call controller(Server side code) to update field = function (id, fieldName, fieldValue,callback) {
    var data = { id: id, fieldName: fieldName, fieldValue: fieldValue };
        url: this.controller + "/" + this.action
        , type: "POST"
        , data: data
        , cache: false
        , success: function (node) {
            if (node.success) {
                if (callback != null) callback();

Server Side: The Controller

It uses reflection, so that one action works for any field of entity.

public JsonResult UpdateField(int id, string fieldName, string fieldValue)
   EntityBD entity;
   entity= db.EntityBD.First(e => e.Id == id);
   if (entity== null) return Json(new { success = false });
   //this line must to be improved
   // fieldValue parameter should be an object, not an string
   // , it should infer field type and instance a new object of field type with fieldValue
   entity.GetType().GetProperty(fieldName).SetValue(entity, fieldValue);
   db.Entry(entity).State = EntityState.Modified;

   return Json(new { success = true });



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


About the Author

Software Developer (Senior)
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionDouble controller Pin
Member 958922216-Jun-16 10:01
memberMember 958922216-Jun-16 10:01 
AnswerRe: Double controller Pin
Member 109850667-Jun-17 22:25
memberMember 109850667-Jun-17 22:25 
GeneralSample project Pin
shekky12-Jun-14 19:29
membershekky12-Jun-14 19:29 
QuestionSource code file require Pin
Tridip Bhattacharjee4-Feb-14 20:50
memberTridip Bhattacharjee4-Feb-14 20:50 
AnswerRe: Source code file require Pin
meula4-Feb-14 23:39
membermeula4-Feb-14 23:39 
GeneralRe: Source code file require Pin
imagolfpro16-Jan-15 9:05
memberimagolfpro16-Jan-15 9:05 
QuestionServer side should infer type Pin
meula3-Feb-14 22:12
membermeula3-Feb-14 22:12 
QuestionAdd Description Pin
Pranay Rana3-Feb-14 6:10
memberPranay Rana3-Feb-14 6:10 
AnswerRe: Add Description Pin
meula3-Feb-14 12:02
membermeula3-Feb-14 12:02 
AnswerRe: Add Description Pin
meula3-Feb-14 22:10
membermeula3-Feb-14 22:10 
GeneralRe: Add Description Pin
Pranay Rana3-Feb-14 22:16
memberPranay Rana3-Feb-14 22:16 
AnswerRe: Add Description Pin
meula4-Feb-14 23:29
membermeula4-Feb-14 23:29 

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 | 2.8.170915.1 | Last Updated 3 Feb 2014
Article Copyright 2014 by meula
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid