您的代码有很多问题。让我们从标记开始。您有一个表,该表的每一行中都包含隐藏字段。除了您已经
id对那些隐藏元素的属性进行了硬编码之外,这意味着您可能最终在标记中使用具有相同id的多个元素,从而导致无效标记。
因此,让我们首先修复标记:
@foreach (var t in Model.Types.ToList()){ <tr> <td> <input type="hidden" value="@t.TransID" name="TransID" /> <input type="hidden" value="@t.ItemID" name="ItemID" /> <input type="hidden" value="@t.TypeID" name="TypeID" /> </td> </tr>}好了,现在您有了有效的标记。现在,让我们继续进行javascript事件,该事件将在
submitTest单击某些按钮时触发。如果这是表单的提交按钮,我建议您订阅
.submit表单的
.click事件而不是表单的提交按钮的事件。这样做的原因是,例如,如果用户在焦点位于某个输入字段内时按Enter键,则可以提交表单。在这种情况下,您的点击事件不会被触发。
所以:
$(document).ready(function () { $('form').submit(function () { // pre to follow return false; });});好的,接下来是需要收集表中隐藏元素的值并将其放入javascript对象的部分,我们随后将对其进行JSON序列化并将其作为AJAX请求的一部分发送到服务器。
让我们继续:
var parameters = [];// TODO: maybe you want to assign an unique id to your table element$('table tr').each(function() { var td = $('td', this); parameters.push({ transId: $('input[name="TransID"]', td).val(), itemId: $('input[name="ItemID"]', td).val(), typeId: $('input[name="TypeID"]', td).val() });});到目前为止,我们已经填写了参数,现在将它们发送到服务器:
$.ajax({ url: this.action, type: this.method, data: JSON.stringify(parameters), contentType: 'application/json; charset=utf-8', success: function (result) { // ... }, error: function (request) { // ... }});现在让我们继续到服务器端。与往常一样,我们从定义视图模型开始:
public class MyViewModel{ public string TransID { get; set; } public string ItemID { get; set; } public string TypeID { get; set; }}以及将采取此模型集合的控制器动作:
[HttpPost]public ActionResult Update(IList<MyViewModel> model){ ...}这是最终的客户端代码:
$(function() { $('form').submit(function () { if ($(this).valid()) { var parameters = []; // TODO: maybe you want to assign an unique id to your table element $('table tr').each(function() { var td = $('td', this); parameters.push({ transId: $('input[name="TransID"]', td).val(), itemId: $('input[name="ItemID"]', td).val(), typeId: $('input[name="TypeID"]', td).val() }); }); $.ajax({ url: this.action, type: this.method, data: JSON.stringify(parameters), contentType: 'application/json; charset=utf-8', success: function (result) { // ... }, error: function (request) { // ... } }); } return false; });});显然,如果您的视图模型不同(您的问题中未显示),则可能需要调整代码以使其与您的结构匹配,否则默认的模型绑定器将无法反序列化JSON。



