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
};
The MultiSelect component is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications.
To initialize the MultiSelect, use the <option> tag of an existing <select> element with defined data items. You can also initialize the MultiSelect through binding it to local or remote data and then using the <select> element.
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
var multisel = $("#sites").data("kendoMultiSelect").value(); was not being converted to a string.
var multisel = $("#sites").data("kendoMultiSelect").value().toString(); solved the problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With