`

jquery 向MVC controller 发送数组参数

    博客分类:
  • js
阅读更多
遇到了问题,在网上找到了解决方案
自己的代码是
js:
        var nodes = new Array();
        //得到所选节点下面所有节点
        getNodes(treeNode);

        function getNodes(selectedNode) {

            var item = { id: selectedNode.id, pId: selectedNode.pId, name: selectedNode.name, cltRnk: selectedNode.cltRnk, ncbFlg: selectedNode.ncbFlg, rcdSts: selectedNode.rcdSts };
            if (selectedNode.isParent && selectedNode.children.length > 0) {
                var child = selectedNode.children;
                nodes.push(item);
                for (var i = 0; i < child.length; i++) {
                    getNodes(child[i]);
                }
            } else {
                nodes.push(item);
            }
        }
       
        //传递数组参数
        var array = JSON.stringify({ 'array': nodes });
        $.ajaxExtend({
            contentType: 'application/json; charset=utf-8',            url: clickUrl,
            data: array,
            type: "post",
            cache: false,
            success: function (result) {
                $("#" + targetDiv).html(result);
            }
        });


MVC3 controller:
        [HttpPost]
        public ActionResult GetClientInfo(List<ClientTreeItem> array)
        {

            var ret = new PagedList<ClientTreeItem>(array, 1, 30);
            return PartialView("~/Views/Client/_ClientInfo.cshtml", ret);
        }

其中黑体部分是需要注意的地方,否则不加上的话后台得到的是个空。

网上原文:

I'm trying to pass an array of objects into an MVC controller method using jQuery's ajax() function. When I get into the PassThing() C# controller method, the argument "things" is null. I've tried this using a type of List for the argument, but that doesn't work either. What am I doing wrong?

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}
c# jquery asp.net-mvc jquery-ajax
share|improve this question edited Nov 6 '12 at 0:56

tereško
23.9k102972  asked Nov 6 '12 at 0:01

Halcyon
1,27821231 

  You can try JavaScriptSerializer.Deserialize Method (String, Type) – jk. Nov 6 '12 at 0:21
1    
Your data is a string, yet your method accepts an array. Change your method to accept a string, then deserialize it within the method. – Bob Horn Nov 6 '12 at 0:36
1    
Your code is correct. I tested it and it worked using MVC 4. Please provide more data to figure it out. – Diego Nov 6 '12 at 1:47

add comment (requires an account with 50 reputation) 

2 Answers
active oldest votes
up vote 3 down vote accepted  Using NickW's suggestion, I was able to get this working using things = JSON.stringify({ 'things': things }); Here is the complete code.

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];     

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {         
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {         
            $('#result').html(response);
        }
    });
});


public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}
There are two things I learned from this: 1) The contentType and dataType settings are absolutely necessary in the ajax() function. It won't work if they are missing. I found this out after much trial and error. 2) To pass in an array of objects to an MVC controller method, simply use the JSON.stringify({ 'things': things }) format.

I hope this helps someone else!


分享到:
评论

相关推荐

    springmvc 传递和接收数组参数的实例

    从 URL 中传递数组参数到 Controller 类中接收数组参数,我们将一步步地学习如何实现。 URL 中传递数组参数 在 SpringMVC 中,可以使用 GET 或 POST 方法将数组参数传递到 Controller 中。下面是一个使用 GET 方法...

    Spring MVC不能直接接收list类型参数的问题

    当前端使用 jQuery 向后台传递数组类型的参数时,Java 后台尝试直接通过 `List` 类型来接收这些参数,却发现无法取到任何数据。例如: **前端代码示例**: ```javascript $.ajax({ url: "xxxx", data: { areaList...

    jquery向后台提交数组的代码分析

    这里的`@RequestParam`注解用于从请求参数中获取数据,`name = "resArray[]"`指明数组参数的名称,必须以方括号`[]`结尾,这样才能正确解析为数组。`required = false`表示该参数不是必需的,以防前端没有发送这个...

    jQuery.ajax向后台传递数组问题的解决方法

    在上述代码中,通过设置`traditional:true`,可以确保前端发送的数组参数不会在名称后自动添加方括号,从而解决后端接收不到数组的问题。这样后端的控制器就能正确地将参数绑定到数组类型的参数上了。 通过上述方法...

    js传递数组参数到后台controller的方法

    在JavaScript(JS)中,将数组作为参数传递到后端控制器(如在Java Spring MVC、ASP.NET MVC或Node.js Express等框架中)是一项常见的任务。本文将详细介绍如何实现这一过程,以及涉及的关键知识点。 首先,我们...

    springMvc 前端用json的方式向后台传递对象数组方法

    本示例中,前端使用JSON格式向后台传递对象数组,这是一个常见的Ajax异步请求。以下将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先,前端部分: 1. 创建一个JavaScript数组`vipFee`来存储待传递的对象: ...

    AJAX和struts2传递JSON数组

    而Struts2是一个基于MVC(Model-View-Controller)架构的Java Web框架,它极大地简化了Java应用程序的开发。在本场景中,我们将探讨如何使用AJAX来传递JSON数组,并在Struts2的Action中接收和处理这些数据。 首先,...

    AutoComplete for MVC自动完成

    在ASP.NET MVC中实现AutoComplete功能,通常会利用jQuery库,因为jQuery提供了一套强大的DOM操作和事件处理方法,使得在客户端实现动态效果变得简单。在这个场景中,"jQueryExtensions.Sample"可能是一个包含示例...

    asp.net mvc +sql 2012批量删除

    当用户确认删除,可以使用AJAX异步请求向服务器发送这些ID,以避免页面刷新。同时,JavaScript还可以处理确认对话框,确保用户知晓其操作后果。 4. Controller处理: 在控制器中,接收到前端的请求后,需要对传入的...

    struts2 ajax jquery 验证用户名,有后台代码

    jQuery的$.ajax()函数是关键,它包含了请求的配置参数,如URL(指向Struts2 Action的路径)、类型(GET或POST)、数据(发送到服务器的数据)和回调函数(处理服务器响应)。 下面是一个简单的jQuery示例,用于发起...

    jqueryUI的Autocomplete实现代码

    `source`参数可以是数组,也可以是函数或URL,用于获取建议数据。 ### 后端Controller实现 #### Java (Spring MVC) 在Java环境中,我们可以使用Spring MVC框架来实现后端Controller。创建一个处理AJAX请求的`@...

    C# MVC 上传多图案例

    C# MVC(Model-View-Controller)是一种广泛使用的Web应用程序开发模式,它鼓励代码分离,使得项目结构清晰,易于维护。在这个案例中,我们将重点关注控制器、视图和模型之间的交互,以及如何处理多文件上传并实现...

    mvc中checkbox的删除

    这个方法通常接收一个包含选中项ID的数组作为参数: ```csharp [HttpPost] public ActionResult Delete(int[] selectedIds) { // 实体框架操作 } ``` 3. **模型(Model)**:实体类应与数据库表结构匹配,...

    struts2+jquery实现ajax

    Struts2作为MVC(Model-View-Controller)架构的一部分,主要用于处理控制器层的逻辑,而jQuery则是一个强大的JavaScript库,简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本篇文章中,我们将探讨如何...

    Asp.Net Mvc 多图上传

    在Controller的Action方法中,你可以遍历`Images`数组,对每个文件进行处理,如验证大小、类型等,然后将其保存到服务器: ```csharp [HttpPost] public ActionResult Upload(ImageUploadModel model) { ...

    再谈Jquery Ajax方法传递到action(补充)

    在上文中提到的Jquery Ajax方法传递到Action的例子中,展示了如何通过Ajax方法向后端发送数据。这里后端使用的是*** MVC框架的Controller,而前端使用Jquery来发起Ajax请求。 具体来说,前端页面通过JavaScript对象...

    MVC4 批量删除数据

    1. **创建控制器动作**:在控制器中定义一个处理批量删除请求的动作方法,该方法接收一个字符串数组参数`delitems`,表示要删除的项。 2. **执行删除操作**:根据接收到的`delitems`参数,在数据库中查找并删除相应...

    mcv3 jquery-Ztree

    接下来,我将详细讲解如何在MVC3项目中集成和使用jQuery ZTree。 首先,我们需要理解MVC3,这是一个基于.NET Framework的模型-视图-控制器(Model-View-Controller)架构模式的Web应用程序开发框架。它允许开发者将...

    springMvc集合接收参数的用法

    在JavaScript中,你可以创建一个JSON对象,将集合数据转换为数组形式,然后通过`jQuery.ajax`或`fetch`等方法发送到后端。 ```javascript var dataList = [{id: 1, name: 'item1'}, {id: 2, name: 'item2'}]; var ...

Global site tag (gtag.js) - Google Analytics