asp.net-mvc 请推荐为 MVC 网格实现内联编辑的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18895365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recommended approach to implementing inline editing for a MVC grid please?
提问by SamJolly
I am using MVC3, C#, Razor, EF4.1
我正在使用 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 Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.
我已经以最简单的形式实现了网格，即 Razor Tables。目前我已经实现了页面外记录字段的编辑，即单击“编辑”，出现编辑页面，然后填写数据然后保存，返回用户到主网格页面。
I need an inline solution where only 1 or 2 fields need updating. Typically the user would either click on the row or on "edit" link and the row would change to "edit mode". One would then edit the data. One would then click on "Save" and the row would resort to read only, or the grid would refresh. Can you recommend a simple and robust solution for this. At present I am not thinking about 3rd party component solutions such as Telerik Kendo UI Grids , although in the near future I will no doubt upgrade to something like this. At present I want to keep it really simple.
我需要一个内联解决方案，其中只有 1 或 2 个字段需要更新。通常，用户会单击该行或“编辑”链接，该行将更改为“编辑模式”。然后将编辑数据。然后单击“保存”，该行将变为只读，否则网格将刷新。您能否为此推荐一个简单而强大的解决方案。目前我没有考虑像 Telerik Kendo UI Grids 这样的 3rd 方组件解决方案，尽管在不久的将来我无疑会升级到这样的东西。目前我想保持它非常简单。
Thoughts, wisdom, recommendations appreciated.
思想，智慧，建议表示赞赏。
Many thanks.
非常感谢。
EDIT:
编辑：
Thanks all. I am going to give these suggestions a try.
谢谢大家。我将尝试一下这些建议。
回答by vittore
Here is simplest way of doing it, see fiddle.
这是最简单的方法，请参阅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)
使用 JSON Web 服务保存所有数据。您最终将拥有单元阵列或单元阵列阵列。（或者，您可以将 JSON 放入隐藏的输入框中）
Use $.data api and put all information needed for server to save in data attributes.
使用 $.data api 并将服务器所需的所有信息保存在数据属性中。
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; }<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>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.
鉴于您在 Razor 视图中生成表并且不需要将数据加载到表中。因此，您在服务器上“加载”数据并使用上面的小 JS 片段保存更改。
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).
您还可以为表格中的输入单元格设置样式，这样它们在有焦点和没有焦点时看起来会有所不同，使其看起来像 Excel 电子表格（虽然没有花哨的 Excel 功能，只是看看）。
回答by DK Chauhan
Well in that case I will suggest you to add a div with a unique id with each grid row. and on the click of edit button insert a row having text boxes with value using java script.
那么在这种情况下，我会建议您为每个网格行添加一个具有唯一 ID 的 div。并单击编辑按钮插入一行具有使用 java 脚本的值的文本框。
回答by Jeremy Cook
Using knockout.js is my preferred approach, and in my opinion, is simple to get started with but flexible enough to keep up with project demands.
使用knockout.js 是我的首选方法，在我看来，它易于上手，但足够灵活以跟上项目需求。
Here are examples:
以下是示例：
http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html
http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html
http://knockoutjs.com/examples/gridEditor.html
http://knockoutjs.com/examples/gridEditor.html
If you think this is for you then take an hour or two and go through the tutorials, it's well worth the time:
如果您认为这是适合您的，那么花一两个小时来完成教程，这是非常值得的：
回答by BdN3504
I have implemented exactly what you are asking for, but I cannot assure you that it is robust. It definitely is not simple. Based on the article Get the Most out of WebGrid in ASP.NET MVCby Stuart Leeks I have created an MVC project which I have heavily modified with my own javascript. In the end I have come up with a solution that works but could be vastly improved. Took me at least a week to implement.
我已经完全实现了你的要求，但我不能向你保证它是强大的。这绝对不简单。基于Stuart Leeks的文章Get the Most of WebGrid in ASP.NET MVC我创建了一个 MVC 项目，我用我自己的 javascript 对其进行了大量修改。最后，我想出了一个有效但可以大大改进的解决方案。我花了至少一周的时间来实施。
回答by Anh Bui
I write tutorial for implementing inline editable grid using mvc, knockoutjs with source code: http://www.anhbui.net/blog?id=kojs-1
我编写了使用 mvc、knockoutjs 和源代码实现内联可编辑网格的教程：http://www.anhbui.net/blog? id=kojs-1
