从ajax获取数据到mvc操作

时间:2017-10-13 06:47:06

标签: javascript c# jquery ajax asp.net-mvc

我想从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')
        }
    });
});

因此,如果我在顶部的示例中使用它,则action中的container-object具有Id值并且在Filters中具有2个元素的数组,但是它们都具有Name和Values为null。

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

有什么建议吗? 谢谢。

3 个答案:

答案 0 :(得分:4)

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 对象转换为 json 文本,并将其存储在string

答案 1 :(得分:2)

您应该在POST请求中使用GET方法代替ajax。在发布数据时。而你的行动也应该有[HttpPost]装饰者。

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

答案 2 :(得分:0)

尽管它是一个老帖子,但还是增加了一点点。请问您是否要从操作中返回视图?在这里,您似乎并没有返回视图,而只是想更新一些数据。

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

相反,如果您已经渲染了视图,并且只想更改当前视图中的数据,则可以使用ajax调用来获取没有任何视图的数据。

希望有帮助