推荐的方法来实现内联编辑的MVC格吗？ [英] Recommended approach to implementing inline editing for a MVC grid please?
问题描述
我使用MVC3，C＃，剃须刀，EF4.1
我在其最简单的形式，即剃刀表实现的网格。在present我已经实现了创纪录的编辑字段关闭网页即点击编辑，出现编辑页面，之一，然后在填充数据，然后保存，返回用户主网页。
我需要一个嵌入式解决方案，其中只有1个或2个字段需要更新。通常情况下，用户要么在该行上的编辑链接点击和行会改变为编辑模式。一会又编辑数据。一会又点击保存，该行不惜为只读，或电网将刷新。你可以推荐这一个简单而强大的解决方案。在present我没有想过第三方组件解决方案，例如Telerik的剑道UI电网，虽然在不久的将来，我无疑会提升到这样的事情。在present我想保持它真的很简单。
思想，智慧，建议AP preciated。
非常感谢。
编辑：
感谢所有。我打算给这些建议一试。
下面是做的最简单的方法，请参见小提琴。
保存使用JSON的Web服务的所有数据。你会最终不得不细胞或细胞阵列阵列的任一阵列。 （或者你可以把JSON在一个隐藏的输入框）
使用$。数据API，并把所需要的服务器的所有信息，数据属性保存。
您会endup有得简单
变种F = $（'＃MyForm的'），T = $（'表'），输入= t.find（输入），B1 = $（'button.save1'），B2 = $（'button.save2'），TA = $（'＃保存）\r
\r
t.on（改变，输入，（E）=＆GT; $（e.target）。数据（VAL，e.target.value））\r
\r
b1.on（'点击'，（）=＆GT; {\r
VAR数据= []\r
inputs.each（（I，INP）=＆GT; data.push（$（INP）。数据（）））\r
ta.text（JSON.stringify（数据））\r
}）\r
b2.on（'点击'，（）=＆GT; {\r
VAR数据= f.serializeArray（）\r
ta.text（JSON.stringify（数据））\r
}） \r
输入{边框：1px的固体#FFF;保证金：0;字体大小：20像素; }\r
输入：重点{概要：1px的固体#eee;背景色：#eee; }\r
表{边界：1px的固体＃999;边境崩溃：崩溃;边框间距：0; }\r
表TD {填充：0;保证金：0;边界：1px的固体＃999; }\r
表日{背景颜色：#aaa;最小宽度：20像素;边界：1px的固体＃999; } \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;表名='MyForm的'ID ='MyForm的'＆GT;\r
＆LT;表＆gt;\r
＆所述; TR＆GT;\r
百分位＆GT;＆LT; /第i\r
百分位＆gt;一种＆LT; /第i\r
＆LT;第i B＆LT; /第i\r
＆LT;第i℃下/第i\r
＆LT; / TR＆GT;\r
＆所述; TR数据列=0＆GT;\r
百分位＆GT; 1 LT; /第i\r
＆所述; TD＆GT;＆下;输入类型=文本数据列=0数据-COL =0数据-VAL =a值=一个名称='数据[0] [0]'/ ＆GT;＆LT; / TD＆GT;\r
＆所述; TD＆GT;＆下;输入类型=文本数据列=0数据-COL =1数据-VAL =b的值=b的名称='数据[0] [1]'/ ＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=0数据-COL =2数据-VAL =C值=C的名字='数据[0] [2]/ ＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR数据列=1＆GT;\r
百分位→2＆下; /第i\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=1数据-COL =0数据-VAL =D值=d的名字='数据[1] [0]/ ＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=1数据-COL =1数据-VAL =E值=ENAME ='数据[1] [1]/ ＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=1数据-COL =2数据-VAL =F值=FNAME ='数据[1] [2]/ ＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR数据列=2＆GT;\r
＆所述;第i 3'; /第i\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=2数据-COL =0数据-VAL =G值=G名称='数据[2] [0]/ ＆GT;＆LT; / TD＆GT;\r
＆所述; TD＆GT;＆下;输入类型=文本数据列=2数据-COL =1数据-VAL =h的值=h的名称='数据[2] [1]'/ ＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入类型=文本的数据行=2数据-COL =2数据-VAL =I值=我的名字='数据[2] [2]/ ＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; /表及GT;\r
＆LT; div名称=数据ID =拯救COLS =30行=10＆GT;＆LT; / DIV＆GT;\r
＆LT;按钮类='保存1'＆GT;保存1 LT; /按钮＆GT;\r
＆LT;按钮类='保存2'＆GT;保存2'，/按钮＆GT; \r
既然你生成的Razor视图的表，不需要将数据加载到表中。
你也可以风格你输入单元格中的表，这样他们就看不同的重点，而不是在。
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 Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.
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.
Thoughts, wisdom, recommendations appreciated.
Many thanks.
EDIT:
Thanks all. I am going to give these suggestions a try.
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')
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))
b1.on('click', () => {
var data = []
inputs.each((i,inp) => data.push($(inp).data()) )
ta.text(JSON.stringify(data))
})
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. You can also style your input cells in the table so they would look different when with focus and not.
这篇关于推荐的方法来实现内联编辑的MVC格吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
