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
– Catalin, Commented Sep 2, 2014 at 12:40

Satpal · Accepted Answer · 2014-09-02 12:40:49Z

1

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() + '}'),

answered Sep 2, 2014 at 12:40

Satpal

133k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Soni · Accepted Answer · 2014-09-02 12:45:45Z

0

try below

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

answered Sep 2, 2014 at 12:45

Amit Soni

3,3267 gold badges34 silver badges52 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:21:40Z

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);

Collectives™ on Stack Overflow

passing multiple params to a mvc controller from jquery

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related