Click here to Skip to main content
Click here to Skip to main content

MVC Grid Inline Edit

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

Introduction

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.

Background

To use this code, it's necessary to include this plugin: http://www.codeproject.com/Tips/665477/LINQ-to-JQuery.

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) {
            <tr>
                <td>
                    <input type="text"
                        value="@item.Name" data-row="@i" 
                        data-col="Name" data-val="@item.Name" />
                    <input type="hidden" id="@i" value="@item.Id" />
            i++;
        }
} 

<!-- 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 -->
<script>
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
    grid.fieldsValidators.push({
        fieldName: "name"
       , checkValidateFunc: function (value) { return (value.length > 0); }
       , msg: "required field"
    });
    
    //bind fields definied with grid class. 
    grid.bindFields();
});
</script>   

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;
        $(this).removeClass("gridFieldEdit");
        //if field not modified: return
        if ($(this).val() == $(this).data("val")) return;
        //checkField
        if (!grid.checkField($(this).data("col").toLowerCase(), $(this).val())) {
            var msgError = grid.fieldsValidators.First("['fieldName']=='" + 
            $(this).data("col").toLowerCase() + "'").msg;
            alert(msgError);
            $(this).val($(this).data("val"));
            $(this).focus();
            return;
        }
        var idValue = $("#" + $(this).data("row")).val();
        //set callback
        var that = this;
        var callback = function () {
            $(that).data("val", $(that).val());
        };
        //save
        grid.save(idValue, $(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
Grid.prototype.save = function (id, fieldName, fieldValue,callback) {
    var data = { id: id, fieldName: fieldName, fieldValue: fieldValue };
    //POST
    $.ajax({
        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.

[HttpPost]
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;
   db.SaveChanges();

   return Json(new { success = true });
}     

Screenshoot

License

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

About the Author

meula
Software Developer (Senior)
Unknown
No Biography provided
Follow on   LinkedIn

Comments and Discussions

 
GeneralSample project Pinmembershekky12-Jun-14 19:29 
QuestionSource code file require PinmemberTridip Bhattacharjee4-Feb-14 20:50 
AnswerRe: Source code file require Pinmembermeula4-Feb-14 23:39 
QuestionServer side should infer type Pinmembermeula3-Feb-14 22:12 
QuestionAdd Description [modified] PinmemberPranay Rana3-Feb-14 6:10 
AnswerRe: Add Description Pinmembermeula3-Feb-14 12:02 
AnswerRe: Add Description Pinmembermeula3-Feb-14 22:10 
GeneralRe: Add Description PinmemberPranay Rana3-Feb-14 22:16 
AnswerRe: Add Description Pinmembermeula4-Feb-14 23:29 

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
Web03 | 2.8.140709.1 | Last Updated 3 Feb 2014
Article Copyright 2014 by meula
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid