栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

将JSON数组发布到MVC控制器

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

将JSON数组发布到MVC控制器

您的代码有很多问题。让我们从标记开始。您有一个表,该表的每一行中都包含隐藏字段。除了您已经

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。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/485431.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号