将参数从 Select2 下拉列表传递到 Kendo UI MVC 数据源

Question

我们今天刚得到 Telerik 控件，我正在尝试为新 Kendo UI MVC 控件“切换”旧控件。

我有一个 select2 多选下拉列表，我正在尝试通过 Kendo UI 数据源将“选择的参数发送到控制器方法到 return 具体记录。

这是我的 .cshtml Razor 代码：

@(Html.Kendo().Grid<ICAN.Models.Competency.ViewModels.AssessmentModel>()
    .Name("grid")
    .Columns(columns =>
    {
      columns.Bound(c => c.AssessmentId).Width(50);
      columns.Bound(c => c.AssessmentName).Width(350);
      columns.Bound(c => c.NumOfUnits).Width(150);

    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("unitTemplate")
    .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("GetAssessmentSearch", "Config", new { area = "Competency" }))
    )
    .Events(events=>events.DataBound("dataBound"))
)

这是我的 select2 Html 和 jQuery:

<div class="form-group"><label>Assessments:</label>@Html.ListBoxFor(x => x.Assessments, new MultiSelectList(Model.assessmentSelect, "Id", "Text"), new { Id = "AssessmentId", @class = "form-control select-multiple", multiple = "multiple" })</div>

$('#AssessmentId').select2({ width: "100%", placeholder: "Select an Assessment" });

控制器代码如下：

public ActionResult GetAssessmentSearch([DataSourceRequest]DataSourceRequest request, string Assessments)
{
  var result = service.GetAssessmentSearch(Assessments);
  return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

我有一个“提交”按钮供用户在 select2 下拉列表中进行多项选择后单击：

<button class="btn btn-alt3 mySubmit" id="submitButton" style="background-color:#bbc4cc; color:#2A4351" onclick="loadUnitTable();"> <i class="lnir lnir-checkmark-circle"></i> Submit Search Criteria</button>

Answer 1

在分配给提交按钮的 onclick 的 loadAssessmentTable() 中，所需要的只是以下内容：

        var values = $('#AssessmentId').val().toString();
    grid.dataSource.read({ "Assessments": values })

将参数从 Select2 下拉列表传递到 Kendo UI MVC 数据源

Pass Parameter from Select2 Dropdown to Kendo UI MVC DataSource

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc