C# 如何将剑道下拉列表转换为剑道多选

C# 如何将剑道下拉列表转换为剑道多选,c#,ajax,model-view-controller,kendo-ui,C#,Ajax,Model View Controller,Kendo Ui,我正在将剑道下拉列表从现有代码转换为剑道多选 角色代码:当前下拉列表转换为剑道多选 我没有得到正确的输出 我有以下代码: <div class="col-md-4 form-group"> @Html.LabelFor(model => model.RoleCode, htmlAttributes: new { }) <span style="color: Red">*</span> <

我正在将剑道下拉列表从现有代码转换为剑道多选

角色代码:当前下拉列表转换为剑道多选

我没有得到正确的输出

我有以下代码:

<div class="col-md-4 form-group">
                @Html.LabelFor(model => model.RoleCode, htmlAttributes: new { }) <span style="color: Red">*</span>
                <select id="DDRolecode" multiple="multiple" data-placeholder="Select attendees...">

        </select>


</div>
...
...
var url = '@Url.Action("GetRoleCode", "FlowGenerator")';
            url = url + '?FlowID=' + flowid + '&RegID=' + RegId;
            $.ajax({


                url: url,
                dataType: 'json',
                type: 'POST',

                success: function (result) {

                    debugger;

                    //$("#DDRolecode").kendoDropDownList({
                    //    dataTextField: "Name",
                    //    dataValueField: "ID",
                    //    optionLabel: "Select",
                    //    dataSource: result

                    //});

                    $("#DDRolecode").kendoMultiSelect({
                        dataTextField: "Name",
                        dataValueField: "ID",                       
                        dataSource: result,
                    });

                     var selectedData = [];
                    for (var i = 0; i < result.length; i++) {


                        selectedData.push({
                            text: result[i].Name,
                            value: result[i].ID
                        })

                    }

                    DDRoleCode.dataSource.data(selectedData);
                    //DDRoleCode.setDataSource(selectedData);
                    DDRoleCode.value('');
                    DDRoleCode.enable(true);

                },
                error: function (data) {
                    debugger;
                    var itemRow = "<ul id='listError'><li>" + "Data Not Bind" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 0, 0, "", "");
                    // alert("error");
                }
            });
以下是我获取角色代码的控制器代码:

 public JsonResult GetRoleCode(int FlowID,int RegID)
        {
            IEnumerable<GenericValues1> RoleCode = _repository.Context.Database.SqlQuery<GenericValues1>("PROC_GET_ROLECODE @DATA_FLOW_ID={0},@REG_ID={1}", FlowID, RegID).ToList().AsQueryable();

           // ViewBag.Tariffs = RoleCode;
            return Json(RoleCode, JsonRequestBehavior.AllowGet);


        }


如您所见,我尝试在上述代码中使用multiselect功能。但是它没有起作用。

以避免长评论链

从您提供的第二个图像来看,它看起来像是将多个多选项添加到同一项目的问题。这是由于将新的multiselect控件附加到同一输入

这真的是一个简单的解决方案。 有两种方法可以解决这个问题。 1销毁剑道小部件并重新创建它 2假设基础数据源和其他设置中使用了相同的结构,只需将新的数据源数据应用于小部件

下面是一个dojo,向您展示了这两个示例:

就我个人而言,我会选择选项2,因为它是一个更干净的解决方案,避免了不断地破坏和重新创建小部件

因此,如果在第二个示例中更改所需的人员,它将从multiselect的数据数组中随机抽取一些人员,然后将这些选项重新绑定到该控件

这就是ajax调用所要做的一切,一旦得到结果,只需将新数据应用到数据源,然后就不需要像当前那样继续重新创建小部件。 在你的例子中:

       $("#DDRolecode").data('kendoMultiSelect').value(null);
       $("#DDRolecode").data('kendoMultiSelect').dataSource.data(selectedData);
这样可以确保在附加新数据源之前清除所有选定项


如果你需要更多关于正在发生的事情的信息。请询问,我将相应地更新我的答案

以下代码适用于我:

 $(document).ready(function () {
        debugger;

        $("#DDRolecode").kendoMultiSelect({
            dataTextField: "Name",
            dataValueField: "ID",
        });

        ....
        ....

//go to controller and call Sp and get the result
success: function (result) {

                    debugger;

                    var multiSelect = $('#DDRolecode').data("kendoMultiSelect");
                    multiSelect.value([]);

                    $("#DDRolecode").data("kendoMultiSelect").setDataSource(new kendo.data.DataSource({ data: result }));                                    
                    var selectedData = [];
                    for (var i = 0; i < result.length; i++) {


                        selectedData.push({
                            Text: result[i].Name,
                            Value: result[i].ID
                        })

                    }


哪一部分不起作用?如中所示,数据源是否未被绑定?您选择的值是否未预设?代码有助于尝试和跟踪问题,但您尚未说明具体问题。@DavidShorthes请检查链接。这就是我得到的。但您也没有说明/显示实际问题所在。从图像中可以获得的信息非常有限。我可以看到multiselect在那里,但看起来它处于禁用状态,这就是问题所在吗?@davidshorthes我认为这是ui问题。我正在把结果写进去。但正如你所看到的multiselect的结构,这对我来说是一个问题。@DavidShort我的multiselect方法是正确的吗?因为我是第一次尝试剑道。谢谢你的回复。非常感谢