asp.net-mvc - 请推荐为 MVC 网格实现内联编辑的方法？

Question

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

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

我需要一个内联解决方案，其中只有 1 或 2 个字段需要更新。通常，用户将单击该行或“编辑”链接，该行将更改为“编辑模式”。然后编辑数据。然后单击“保存”，该行将变为只读，或者网格将刷新。您能推荐一个简单而强大的解决方案吗？目前我没有考虑诸如 Telerik Kendo UI Grids 之类的第 3 方组件解决方案，尽管在不久的将来我无疑会升级到类似的解决方案。目前我想让它变得非常简单。

思想、智慧、建议值得赞赏。

非常感谢。

编辑:

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

Answer 1

这是最简单的方法，请参阅 fiddle .

使用 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 View 中生成表，并且不需要将数据加载到表中。因此，您可以在服务器上“加载”数据并使用上面的小 JS 片段保存更改。

您还可以设置表格中输入单元格的样式，这样它们在焦点和非焦点时看起来会有所不同，使其看起来像 Excel 电子表格(尽管没有精美的 Excel 功能，只需看看)。