推荐的方法来实现MVC网格的内联编辑吗？

Question

我正在使用MVC3,C#,Razor,EF4.1

我已经以最简单的形式实现了网格,即Razor Tables.目前我已经实现了对页面记录字段的编辑,即点击"编辑",出现编辑页面,然后填写数据然后保存,将用户返回到主网格页面.

我需要一个内联解决方案,其中只有1或2个字段需要更新.通常,用户可以单击该行或"编辑"链接,该行将更改为"编辑模式".然后,人们可以编辑数据.然后,单击"保存",该行将采用只读,否则网格将刷新.你能为此推荐一个简单而强大的解决方案吗？目前我不考虑第三方组件解决方案,如Telerik Kendo UI网格,虽然在不久的将来我无疑会升级到这样的东西.目前我想保持简单.

思想,智慧,建议赞赏.

非常感谢.

编辑:

谢谢大家.我将尝试这些建议.

Answer 1

这是最简单的方法,请参阅小提琴.

使用JSON Web服务保存所有数据.你最终会得到一组单元格或一组单元格数组.(或者你可以把JSON放在一个隐藏的输入框中)

使用$ .data api并将服务器所需的所有信息保存在数据属性中.

你最终会有一些简单的事情

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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
    <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr data-row="0">
        <th>1</th>
        <td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
        <td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
        <td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
    </tr>
    <tr data-row="1">
        <th>2</th>
        <td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
        <td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
        <td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
    </tr>
    <tr data-row="2">
        <th>3</th>
        <td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
        <td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
        <td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
    </tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>

假设您在Razor视图中生成表,并且不需要将数据加载到表中.因此,您可以在服务器上"加载"数据并使用上面的微小JS片段保存更改.

您还可以在表格中设置输入单元格的样式,以便在使用焦点时看起来不同,使其看起来像Excel电子表格(虽然没有精美的Excel功能,但只看).