Passing an array using Ajax (MVC) problem

Question

User-195907812 posted

Hi,

I have the following code that works fine:

        var obj = {};
        obj.vara = $.trim("1");
        obj.varb = $.trim("2");

        $.ajax({
            url: "/example/Update",
            type: "GET",
            data: obj,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            failure: function (response) {
                //alert(response.d);
            }
        });

        [HttpGet]
        public void Update(string vara, string varb)
        {
            string test = vara;
        }   

However, I can't get this to work with an array:

        var obj = {};
        obj.vara = $.trim("1");
        obj.varb = JSON.stringify(mystores);

        $.ajax({
            url: "/example/Update",
            type: "GET",
            data: obj,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            failure: function (response) {
                //alert(response.d);
            }
        });

        [HttpGet]
        public void Update(string vara, string[] varb)
        {
            string test = vara;
        } 

Something is stopping the call to the controller, what am I doing wrong?

Answer 1

User475983607 posted

Use HTTP POST not GET.  GET passes parameters in the URL.  There's a length restriction for URL. POST sends the parameters in the message body and the recommended approach when passing complex parameters.

    public class VarVm
    {
        public int vara { get; set; }
        public List<int> varb { get; set; }
    }

Actions

        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Varvm vm)
        {
            return Json(vm);
        }

View

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<input id="Button1" type="button" value="button" />

@section scripts {
    <script>
        var obj = {
            vara: 1,
            varb: [1,2,3,4,5,6,7]
        };
        $('#Button1').click(function () {
            $.ajax({
                url: "/ajax/index",
                type: "POST",
                data: JSON.stringify(obj),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    console.log(response);
                },
                failure: function (response) {
                    console.log(response);
                }
            })
        });

    </script>
    
    }