从 ajax 获取数据到 mvc 动作

Posted

技术标签:

【中文标题】从 ajax 获取数据到 mvc 动作【英文标题】:Get data from ajax to mvc action 【发布时间】:2018-03-25 05:47:13 【问题描述】:

我想将 ajax 调用中的对象数组发送到控制器操作。

在后端我有

容器类:

public class MyContainer

    public string Id  get; set; 
    public Filter[] Filters  get; set; 


public class Filter

    public string Name  get; set; 
    public string[] Values  get; set; 

和行动:

public ActionResult MyAction(MyContainer container)

   var id = container.Id;
   foreach(Filter filter in container.Filters)
   
       //Do something
   

在前端我有

$(document).on('click', 'mySelector', function (event) 

    //Create first object
    var firstIds = ;
    firstIds.Name = "Custom Name 1";
    firstIds.Values = GetIds('param1'); //this return an array of strings

    //Create second object
    var secondIds = ;
    secondIds.Name = "Custome Name 2";
    secondIds.Values = GetIds('param2'); //another array

    var Id = $(this).attr('id'); //id of element

    //Add objects to array
    var filters = [];
    filters.push(firstIds);
    filters.push(secondIds);

    $.ajax(
        method: "GET",
        url: baseUrl+"/MyAction",
        //traditional: true, //I tried with and without that parameter
        data:
        
            Id: Id,
            Filters: filters
        ,
        contentType: 'application/json',
        success: function (res) 
            alert('success')
        
    );
);

因此,如果我像上面的示例一样使用它,则运行中的容器对象具有 Id 值并在过滤器中具有 2 个元素的数组,但是它们的名称和值都为空。

将传统设置为 True,我设置了 container.Id 但 container.Filters = null。

有什么建议吗? 谢谢。

【问题讨论】:

【参考方案1】:

虽然它是一个旧帖子,但添加我的一点。我会问你是否从动作中返回视图?在这里,您似乎没有返回视图,而只是想更新一些数据。

但如果您想返回一个视图,例如显示一些产品信息,那么您只需将所选产品的 id 传递给操作方法,检索相关的产品信息,然后将此数据作为模型传递给视图,然后返回完整视图。在这种情况下,您不需要单独的 ajax 调用来处理数据,而只需在请求视图本身(通过 action 方法)时执行。

相反,如果您已经渲染了视图并且只想更改当前视图中的数据,那么只需诉诸 ajax 调用即可在没有任何视图的情况下获取数据。

希望对你有帮助

【讨论】:

【参考方案2】:

POST 请求与JSON.stringify() 方法结合使用。

C#

[HttpPost]
public ActionResult MyAction(MyContainer container)

   var id = container.Id;
   foreach(Filter filter in container.Filters)
   
       //Do something
   

JQUERY

$.ajax(
    method: "POST",
    url: baseUrl+"/MyAction",
    data:JSON.stringify(
    
        Id: Id,
        Filters: filters
    ),
    contentType: 'application/json',
    success: function (res) 
        alert('success')
    
);

为什么需要JSON.stringify() 方法?

contentType是你要发送的数据类型,所以application/json;默认是application/x-www-form-urlencoded; charset=UTF-8.

如果您使用application/json,则必须使用JSON.stringify() 才能发送JSON 对象。

JSON.stringify()javascript object 转换为 json 文本并将其存储在 string 中。

【讨论】:

【参考方案3】:

您应该在ajax 请求中使用POST 方法而不是GET。当您发布数据时。而且你的动作应该有[HttpPost] 装饰器。

$.ajax(
        method: "POST",
        url: baseUrl+"/MyAction",
        data:
        
            Id: Id,
            Filters: filters
        ,
        contentType: 'application/json',
        success: function (res) 
            alert('success')
        
    );

【讨论】:

以上是关于从 ajax 获取数据到 mvc 动作的主要内容,如果未能解决你的问题,请参考以下文章

MVC 从控制器获取数据以使用 AJAX 查看有啥问题?

如何在 ASP.Net MVC 5 中调用嵌套 ajax 调用并将对象数据发送到控制器

如何从MVC5中的jquery ajax调用中获取部分视图和JSON数据?

从ajax发送时动作参数获取值为null是可以的

显示从 ASP.NET MVC 中的命令行进程获取的数据

MVC—实现ajax+mvc异步获取数据