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

我使用的是MVC3、C#、Razor、EF4.1

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

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

感谢您的想法、智慧和建议

非常感谢

编辑：

---

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

我已经完全实现了您的要求，但我不能向您保证它是可靠的。这绝对不简单。根据Stuart Leeks的文章，我创建了一个MVC项目，我用自己的javascript对其进行了大量修改。最后，我提出了一个可行的解决方案，但可以大大改进。我至少花了一周的时间来实现。

在这种情况下，我建议您在每个网格行中添加一个具有唯一id的div。

---

在单击edit按钮时，使用java脚本插入一行，其中包含具有值的文本框

使用knockout.js是我首选的方法，在我看来，这是一个简单的入门方法，但足够灵活，可以满足项目需求

以下是一些例子：

如果您认为这是适合您的，那么花一两个小时阅读教程，这是非常值得的：

---

以下是最简单的方法，请参阅

使用JSON web服务保存所有数据。您将得到一个单元格数组或一个单元格数组。（或者，您可以将JSON放在隐藏的输入框中）

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

你最终会得到一些简单的东西，比如

var f=$（“#myform”）
，t=$（“表”）
，inputs=t.find（'input'）
，b1=$（'button.save1'）
，b2=$（'button.save2'）
，ta=$（“#保存”）
//值更改时更新数据val属性
t、 on（'change'，'input'，（e）=>$（e.target.data（'val'，e.target.value））
//将所有内容存储在$.data/data-*属性中
b1.在（'点击'，（）=>{
var数据=[]
inputs.each（（i，inp）=>data.push（$（inp.data（）））
text（JSON.stringify（数据））
})
//使用$.serialize
b2.on（'点击'，（）=>{
var data=f.serializeArray（）
text（JSON.stringify（数据））
})

input{border:1px solid#fff；边距：0；字体大小：20px；}
输入：焦点{轮廓：1px实心#eee；背景色：#eee；}
表{边框：1px实心#999；边框折叠：折叠；边框间距：0；}
表td{padding:0；margin:0；border:1px solid#999；}
表th{背景色：aaa；最小宽度：20px；边框：1px实心#999；}

A.
B
C
1.
2.
3.
节省1
Save 2

我编写了使用mvc、knockoutjs实现内联可编辑网格的教程，源代码如下：