我正在尝试将 JSON 数组发布到 MVC Controller 。但无论我尝试什么,一切都是 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;
});
});
这是我的 View 代码:
<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>
这是我正在尝试接收数据的 Controller :
[HttpPost]
public ActionResult Update(CustomTypeModel ctm)
{
return RedirectToAction("Index");
}
我做错了什么?
最佳答案
您的代码有很多问题。让我们从标记开始。您有一个表,并且在该表的每一行中都包含隐藏字段。除了您已对这些隐藏元素的 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>
}
好的,现在您有了有效的标记。现在让我们继续讨论当单击某些 submitTest
按钮时将触发的 javascript 事件。如果这是表单的提交按钮,我建议您订阅表单的 .submit
事件,而不是其提交按钮的 .click
事件。这样做的原因是因为如果用户在焦点位于某个输入字段内时按下 Enter 键,则可以提交表单。在这种情况下,您的点击事件将不会被触发。
所以:
$(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) {
// ...
}
});
现在让我们转到服务器端。一如既往,我们从定义 View 模型开始:
public class MyViewModel
{
public string TransID { get; set; }
public string ItemID { get; set; }
public string TypeID { get; set; }
}
和一个 Controller Action ,将采取这个模型的集合:
[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;
});
});
显然,如果您的 View 模型不同(您没有在问题中显示它),您可能需要调整代码以使其与您的结构匹配,否则默认模型绑定(bind)器将无法反序列化 JSON .
关于c# - 将 JSON 数组发布到 mvc Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13779043/