MVC Grid Inline Edit

• Download source - 1.6 KB

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