Jquery.cascade plugin change the format of the Ajax URL

Question

I'm using the jQuery.Cascade plugin in my Asp.Net MVC application. I've got it all working in a manner as follows:

jQuery("#CompareModelList").cascade("#CompareManufacturerList", {
                ajax: { url: '/Home/Models' },
                template: commonTemplate,
                match: function (selectedValue) { return this.ManufacturerId == selectedValue;},
            });

However, when this fires it calls the action in my controller via the following request:

http://localhost/Home/Models?val=50

What I would prefer is:

http://localhost/Home/Models/50

Now in the examples provided there is the following comment:

Passes selected value of parent select to url as 'val=', but accepts the full ajax options hash so you can append other data as well

So I'm presuming what I wish to achieve is possible - but as a newcommer to jQuery and Ajax I'm at a loss as to how to do this. Can anyone help?

Answer 1

The Cascade plugin is creating the default AJAX options (example: http://docs.jquery.com/Types#Options) which are:

    type: "GET",
    dataType: "json",
    success: function(json) { $this.trigger("updateList", [json]); },
    data: $.extend(_ajax.data,ajax.data,{ val: opt.getParentValue(parent) })

In other words, change the line:

ajax: { url: '/Home/Models' }

to

ajax: { url: '/Home/Models/' + jQuery( '#CompareManufacturerList' ).val() }

instead.