passing multiple params to a mvc controller from jquery

Question

I'm trying to pass a couple of params to an mvc controller from jquery but the method is receiving null values even though the debugger shows the val() of both controls in the browser debugger are present.

$(function () {
    $('#Counties').cascade({
        data: JSON.stringify('{state: ' +  $("#States").val() + ', county: ' + $("#Counties").val() + '}'),
        url: '@Url.Action("GetCities")',
        childSelect: $('#Cities')
    });
});

enter image description here

I tried both methods in the answers below one with JSON.stringify and without. The values are still coming across as null

enter image description here

Here is the updated code. I read on another post that I may need to write a Route for the method. I added that but that didn't work either

$(function () {
    $('#Counties').cascade({
        data: {state: $("#States").val(), county: $("#Counties").val()},
        url: '@Url.Action("GetCities")',
        childSelect: $('#Cities')
    });
});


[HttpGet]
public ActionResult GetCities(string state, string county)
{
    var cities = _carrierRouteAssignmentRepository.GetCities(state, county);
    return Json(cities, JsonRequestBehavior.AllowGet);
}

routes.MapRoute(
    name: "GetCities",
    url: "{controller}/{action}/{state}/{county}",
    defaults: new { controller = "CarrierRouteAssignments", action = "GetCities", state = UrlParameter.Optional, county = UrlParameter.Optional }
    );

running fiddler I see the request going out as

/CarrierRouteAssignments/GetCities?undefined=LOS+ANGELES

which is incorrect

Try to pass the actually javascript object to `JSON.stringify` instead of a string — Catalin, Sep 02 '14 at 12:40

score 1 · Answer 1 · answered Sep 02 '14 at 12:40

You should pass a object to JSON.stringify() method, Currently you are passing string

Use

data: JSON.stringify({
    state: $("#States").val() , 
    county: $("#Counties").val() 
}),

instead of

data: JSON.stringify('{state: ' +  $("#States").val() + ', county: ' + $("#Counties").val() + '}'),

score 0 · Answer 2 · answered Sep 02 '14 at 12:45

0

try below

$(function () {
    $('#Counties').cascade({
         data:{ state: $("#States").val() ,  county: $("#Counties").val() },
        url: '@Url.Action("GetCities")',
        childSelect: $('#Cities')
    });
});

answered Sep 02 '14 at 12:45

Amit Soni

3,216
6
31
50

score 0 · Accepted Answer · edited May 23 '17 at 12:21

I just realized what the problem was. I was using the helper method from this post and didn't look there for the problem. I also didn't post this in the original question. As you will notice the helper method only takes 1 param and that is the one that is passed to the helper. I will either have to expand this helper or just bypass it for the last dropdownlist cascade. Thanks for all the input. It did clear up an issue.

(function ($) {
    $.fn.cascade = function (options) {
        var defaults = {};
        var opts = $.extend(defaults, options);

        return this.each(function () {
            $(this).change(function () {
                var selectedValue = $(this).val();
                var params = {};
                params[opts.paramName] = selectedValue;
                $.getJSON(opts.url, params, function (items) {
                    opts.childSelect.empty();
                    $.each(items, function (index, item) {
                        opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item)
                            .text(item)
                    );
                    });
                });
            });
        });
    };
})(jQuery);

passing multiple params to a mvc controller from jquery

3 Answers3