read() method not sending values to the controller action

[Shailendra]

Hi,

I have successfully implemented two multiselect list. List1 contains states and List2 contains counties. What I want to achieve is when I click on List2, it populate only with counties exist in selected states from List1.

Here is what I did;

1. Attached to open even on List2.
2. Wrote a JS function that cause datasource to update for List2 sending data. data is selected from List1.

    function open() {
        console.log("event: open");
        var values = {
            selectedStates: $("#stateMultiSelect").val()
        };

        var stateItem = $('#countyMultiSelect').data('kendoMultiSelect');
        stateItem.dataSource.read(values);
    };
The problem seems to be in model binding, I can see the request contains the data but at controller action it does not map to the model.

Controller Action:

        public JsonResult GetCounties(StateMultiSelectModel seletedStates)
        {
// seletedStates is alway null when breakpoint hits here.

            if (selectedStates == null)
            {
...
            }
...
}
Model
    public class StateMultiSelectModel
    {
        public List<string> SelectedStates { get; set; }
    }
Following is the request sent to controller.


Request URL:
http://localhost:61135/Dashboard/GetCounties?text=&SelectedStates%5B%5D=NC


In the same JS file I have chart controls that are getting updated on a button click using similar mechanism.
Please suggest changes. For your reference attached cshtml file that contain UI control code and JS.

[Shailendra]

After a lot many different tries, I am able to now post the value to server on List1 change event. On change event I call read() method of List2 with List1 selected values so it just display based on List1 selection. The trick in this case work is fetching list1 value by calling value().ToString() instead of simple val() method:

    function multiselect_change() {
        console.log("event: openmultiselect_change");
        var stateItem = $('#countyMultiSelect').data('kendoMultiSelect');
        stateItem.dataSource.read(getStates());
    };

    function getStates() {
        var multisel = $("#stateMultiSelect").data("kendoMultiSelect").value().toString();
        return {
            sitesFilter: multisel
        };
    } 
Controller method just accepting a string:
        public JsonResult GetCounties(string sitesFilter)
        {
//Convert to model here...
}