Question

我正在使用Telerik进行MVC并尝试使用多选来填充编辑方案中的初始值。

  <script>

                function filterProducts() {
                    return {
                        manufacturerId: $("#ServiceBulletinItem_ManufacturerId").val()
                    };
                }

                function onManufacturerChange(e) {                                   
                    var v = e.sender.dataItem().Value;
                    $.post("@Url.Action("GetCascadeProducts", "Components")", { manufacturerId: v }, function (result) {
                    var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
                    grid.setDataSource(result)
                });                        
                }

                function InitialPopulate(manId) {                                                           
                    $.post("@Url.Action("GetCascadeProducts", "Components")", { manufacturerId: manId }, function (result) {
                        var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
                        grid.setDataSource(result)

                    });



                }


                $(document).ready(function () {
                    $('.control-datepicker').Zebra_DatePicker();
                    var m = $("#ServiceBulletinItem_ManufacturerId").val();
                    InitialPopulate(m);
                });




        </script>





                <div class="form-group">
                    @Html.LabelFor(m => m.ManufacturerList, "Manufacturer", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
            @(Html.Kendo().DropDownListFor(m => m.ServiceBulletinItem.ManufacturerId)
                                     .HtmlAttributes(new { @class = "col-md-6 form-control" })
                                     .Filter("contains")
                                     .DataValueField("Value")
                                     .DataTextField("Text")
                                     .BindTo((IEnumerable<SelectListItem>)Model.ManufacturerSelectList)
                                     .HtmlAttributes(new { style = "width:70%;" }).Events(e =>
                                     {
                                         e.Change("onManufacturerChange");
                                     })
                                     )
                    </div >
                </div >


                <div class="form-group">
                    @Html.LabelFor(m => m.ProductList, "Product", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @(Html.Kendo().MultiSelectFor(m => m.ServiceBulletinItem.ApplicableProducts)
                              .AutoClose(false)
                              .DataTextField("ProductName")
                              .DataValueField("ProductId")
                              .Placeholder("Select products...")

                        )




                    </div>
                </div>

我试图填充制造商下拉菜单和产品multiSelect。 ApplicableProducts项是IEnumerable，表示以前选择的所有产品的ProductId，我知道当我选择制造商并调用GetCascadeProducts控制器方法时，它将返回所有制造商产品的ProductId和ProductName的集合。那些productId是ApplicableProducts属性应该存在。

在document.ready上，我可以使用manufacturerID调用InitialPopulate方法，该方法将填充multiSelect项目，但似乎无法填充初始值。

Answer 1

我无法使绑定正常工作，所以最终使用

                    @(Html.Kendo().MultiSelect()
                              .Name("ServiceBulletinItem_ApplicableProducts")
                              .AutoClose(false)
                              .DataTextField("ProductName")
                              .DataValueField("ProductId")
                              .Placeholder("Select products 2...")
                              .AutoBind(false)                                  
                            )

然后在文档上使用以下代码准备进行ajax调用以填充制造商和产品控件

function PopulateProductsInitial(manId) {
                    $.post("@Url.Action("GetCascadeProducts", "Components")", { manufacturerId: manId }, function (result) {

                        var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
                        grid.setDataSource(result);

                        var s = $("#ServiceBulletinItem_Id").val();

                        $.post("@Url.Action("GetSBProducts", "ServiceBulletins")", { Id: s}, function (result) {
                            var arr = [];
                            result.forEach(function (element) {
                                arr.push(element.ProductId);
                            });

                            var grid = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect")
                            grid.value(arr);                            
                        });



                });
                }
                }

                $(document).ready(function () {

                    //Populate Initial Values
                    PopulateProductsInitial($("#ServiceBulletinItem_ManufacturerId").val());
                    $('#YourButton').click(SendForm);

                });

当编辑完成时，问题就变成了将选定的项目发送回控制器，因为控件没有绑定，所以我看起来很复杂，因此我不得不进行Ajax调用来提交数据。

function SendForm() {
                    var items = $("#ServiceBulletinItem_ApplicableProducts").data("kendoMultiSelect").value();

                    //Manipulate into ServiceBulletinViewModel for the save
                    var data = {
                                 Id: $("#ServiceBulletinItem_Id").val(),
                                 ServiceBulletinItem: {
                                     Id: $("#ServiceBulletinItem_Id").val(),
                                     ManufacturerId: $("#ServiceBulletinItem_ManufacturerId").val(),
                                     IssueDate: $('#ServiceBulletinItem_IssueDate').val(),
                                     Heading: $('#ServiceBulletinItem_Heading').val(),
                                     Details: $('#ServiceBulletinItem_Details').val(),
                                     Url: $('#ServiceBulletinItem_Url').val(),
                                     SelectedProducts: items
                                 }
                                }

                    $.ajax({
                        type: 'POST',
                        url: '/ServiceBulletins/Edit',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (result) {
                            //Your success code here..
                            if (result.redirectUrl != null) {
                                window.location = result.redirectUrl;
                            }
                        },
                        error: function (jqXHR) {
                            if (jqXHR.status === 200) {
                                alert("Value Not found");
                            }
                        }
                    });
                }

这一切看起来比任何一个有关teleriks的演示都要复杂得多，而且我找不到任何看似类似的远程来源绑定的好例子。

由于绑定是基于约定的，我想知道是否有可能通过控件的正确命名简化ajax调用post功能，以便我可以简单地在multiselect控件上获取所选项目或者如果ajax发布是要走的路。

在层叠方案中的Kendo Multi-select无法填充初始值

1 个答案: