Kendo UI MVC Send MultiSelect data values to Action method

Question

The Kendo UI Ajax Binding documentation at Ajax Binding describes passing multiple data parameters to an Action method but it does not address passing arrays like MultiSelect values.

In the example below, if multisel is set to a string like "237896", the controller receives sitesFilter="237896". But if multisel is set to the MultiSelect value as shown below, the controller receives sitesFilter = null.

What is the proper way to send all of the MultiSelect values to the Action method using the MVC wrapper?

    .DataSource(dataSource => dataSource
                              .Ajax()
                              .ServerOperation(false)
                              .Read(read => read.Action("Documents_Read", "Document")
                                                .Type(HttpVerbs.Post)
                                                .Data("getCriteria"))

    function getCriteria() {
    var multisel = $("#sites").data("kendoMultiSelect").value();
    return {
        sitesFilter: multisel
    };
}

    public ActionResult Documents_Read([DataSourceRequest] DataSourceRequest request, string sitesFilter=null)
    {
        return Json(GetDocuments(sitesFilter).ToDataSourceResult(request), JsonRequestBehavior.DenyGet);
    }

EDIT: getCriteria should convert the data to a string as shown below:

 function getCriteria() {
        var multisel = $("#sites").data("kendoMultiSelect").value().toString();
        return {
            sitesFilter: multisel
        };

florian.isopp florian.isopp · Accepted Answer · 2013-04-04T12:33:59

My solution doesn't use Ajax, but describes the transmission of multiselected values to the Controller in general! Ajaxify it, Model transmission should work similarly!

.cshtml Filter View: form with selection fields to POST the chosen values to the Controller. Model.Products is a List of Type Product with properties ID and DisplayName.

<div class="editor-field">
    @{
        IEnumerable<Product> productSelectList = Model.Products;
        Html.Kendo().MultiSelectFor(model => model.ProductIds)
            .BindTo(new SelectList(productSelectList, "ID", "DisplayName"))
            .HtmlAttributes(new { style = "width: 400px;" })
            .Render();    
    }
</div>

Controller.cs: Action

[HttpPost]
public ActionResult SearchForLicenseTerm(SearchLicenseTermFilterViewModel searchLicenseTermFilterViewModel)
{
    // Search logic
}

Model.cs: specific Model used

public class SearchLicenseTermFilterViewModel
{
    public SearchLicenseTermFilterViewModel()
    {
        ProductIds = new List<Guid?>();
    }        
    public List<Guid?> ProductIds { get; set; }
}

Received POST data in the Controller Action .jpeg: You are seeing the filled List of GUIDs of the select entries from the Kendo.MultiSelect

enter image description here

Kendo UI MVC Send MultiSelect data values to Action method

2 Answers