如何将元组从 javascript 传递到 ASP.NET MVC 控制器操作

Question

I have below tuple in javascript that I use to group some kind of data:

var myTuple = {
  item1 : value1,
  item2 : value2,
  item3 : value3
};

Now I want to pass it to an ASP.NET MVC controller action as the last parameter. This ASP.NET MVC controller action already has a lot of parameters passed. I am using an ajax call like below:

$.ajax({
    url: '@Url.Action("MyActionController", "MyController")?Param1=' + $('#Object1').val() + '&Param2=' + param2 + '&param3=' + param3 + ... + '&param10=' + param10 + '&param11=' + myTuple,
    type : "POST",
    async: false,
    dataaType: "JSON",
    success: function (result) {
        // my stuff
    },
});

How can I do it? Or is there any other better way to do it?

Answer 1

In my opinion, with so many parameters being passed it's better to create an object. So your controller should expect just one object - I often make a request model that suits my needs. This model would contain an object that matches the structure of what's in your Tuple.

On your JS end I would create a similar object to your model and instead of putting it into your url like that I would put it as part of the data of the call since you already say you're sending json and the type is post :

$.ajax({
    url: '@Url.Action("MyActionController", "MyController"),
    type : "POST",
    data: yourRequestObject, //contains the Tuple
    async: false,
    dataType: "json",
    success: function (result) {
        // my stuff
    },
});

Of course if you need to keep some of those in the query string that would work too.

EDIT: Example as requested

Your JS could look something like this:

let tuple = {
  Item1 : value1,
  Item2 : value2,
  Item3 : value3
};

let requestObject = {
  SomeThing : someValue,
  MyTuple : tuple
};

$.ajax({
    url: '@Url.Action("MyActionController", "MyController"),
    type : "POST",
    data: requestObject, 
    async: false,
    contentType: 'application/json', 
    dataType: "json",
    success: function (result) {
        // my stuff
    },
});

Your C# could look something like this:

public ActionResult MyActionController(MyRequestModel request)
    {
        // Your Tuple would be accessible here via request.MyTuple
        // Do stuff
        // ... 
        return View();
    }

    public class MyRequestModel 
    {
        public string SomeThing { get; set; }
        public MyTuple MyTuple { get; set; }
    }

    public class MyTuple 
    {
        public string Item1 { get; set; }
        public string Item2 { get; set; }
        public string Item3 { get; set; }
    }

Note that it's important to match the structure of the object your Action is expecting with the object you are sending.