Recommended approach to implementing inline editing for a MVC grid please?

Question

I am using MVC3, C#, Razor, EF4.1

I have implemented grids in their most simple form ie Razor Tables. At present I have implemented editing of record fields off page ie

Answer 1

Here is simplest way of doing it, see fiddle.

Save all your data using JSON web service. You'll end up having either array of cells or array of array of cells. (Alternatively you can put JSON in a hidden input box)

Use $.data api and put all information needed for server to save in data attributes.

You'll endup having something simple as

var f=$('#myform')
  , t = $('table')
  , inputs = t.find('input')
  , b1 = $('button.save1')
  , b2 = $('button.save2')
  , ta = $('#save')

// update data-val attribute when value changed 
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))

// store everything in $.data/data-* attributes
b1.on('click', () => {
  	var data = []
  	inputs.each((i,inp) => data.push($(inp).data()) )
	ta.text(JSON.stringify(data))
})

// use $.serialize
b2.on('click', () => {      	
    var data = f.serializeArray()
	ta.text(JSON.stringify(data))
})

input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }

    

        

        
A
        
B
        
C
    
    

        
1
        

        

        

    
    

        
2
        

        

        

    
    

        
3
        

        

        

    



Save 1
Save 2

Given that you generate your table in Razor view and don't need to load data into table. So you "loading" data on the server and saving changes with tiny JS snippet above.

You can also style your input cells in the table so they would look different when with focus and not, making it look like Excel spreadsheet (without fancy Excel features though, just look).