我正在尝试将JSON数组发布到MVC控制器。但是,无论我尝试什么,都为0或null。
我有包含文本框的表。我需要所有这些文本框中的ID和值作为对象。
这是我的Javascript:
$(document).ready(function () { $('#submitTest').click(function (e) { var $form = $('form'); var trans = new Array(); var parameters = { TransIDs: $("#TransID").val(), ItemIDs: $("#ItemID").val(), TypeIDs: $("#TypeID").val(), }; trans.push(parameters); if ($form.valid()) { $.ajax( { url: $form.attr('action'), type: $form.attr('method'), data: JSON.stringify(parameters), dataType: "json", contentType: "application/json; charset=utf-8", success: function (result) { $('#result').text(result.redirectTo) if (result.Success == true) { return fase; } else { $('#Error').html(result.Html); } }, error: function (request) { alert(request.statusText) } }); } e.preventDefault(); return false; }); });
这是我的查看代码:
<table> <tr> <th>trans</th> <th>Item</th> <th>Type</th> </tr> @foreach (var t in Model.Types.ToList()) { { <tr> <td> <input type="hidden" value="@t.TransID" id="TransID" /> <input type="hidden" value="@t.ItemID" id="ItemID" /> <input type="hidden" value="@t.TypeID" id="TypeID" /> </td> </tr> } } </table>
这是控制器即时通讯试图接收数据以:
[HttpPost] public ActionResult Update(CustomTypeModel ctm) { return RedirectToAction("Index"); }
我究竟做错了什么?
您的代码有很多问题。让我们从标记开始。您有一个表,该表的每一行中都包含隐藏字段。除了您已经id对那些隐藏元素的属性进行了硬编码之外,这意味着您可能最终在标记中使用具有相同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键,则可以提交表单。在这种情况下,您的点击事件不会被触发。
submitTest
.submit
.click
所以:
$(document).ready(function () { $('form').submit(function () { // code 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。