Question

我正在使用ASP.NET MVC实现Web的Kendo Ui。以下是Kendo UI Grid的代码。

 <div id="grid"></div>

<script>
    $(function () {
        $("#grid").kendoGrid({
            height: 400,
            columns: [
                "Name",
                { field: "Address" },
                { field: "Latitude", width: "150px" },
                { field: "Longitude", width: "150px" },
                { field: "UserId", editor: UserDropDownEditor, title: "User", template: "#=UserName#" },
                { command: "destroy", title: "Delete", width: "110px" }
            ],
            editable: true, // enable editing
            pageable: true,
            sortable: true,
            filterable: true,
            toolbar: ["create", "save", "cancel"], // specify toolbar commands
            dataSource: {
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                pageSize: 10,
                schema: {
                    data: "Data",
                    total: "Total",
                    model: { // define the model of the data source. Required for validation and property types.
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true },
                            Name: { validation: { required: true } },
                            Address: { validation: { required: true } },
                            Latitude: { validation: { required: true } },
                            Longitude: { validation: { required: true } },
                            UserId: { validation: { required: true } }
                        }
                    }
                },
                batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
                transport: {
                    create: {
                        url: "/Admin/Sites/Create", //specify the URL which should create new records. This is the Create method of the HomeController.
                        type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                    },
                    read: {
                        url: "/Admin/Sites/Read", //specify the URL which should return the records. This is the Read method of the HomeController.
                        contentType: "application/json",
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    },
                    update: {
                        url: "/Admin/Sites/Update", //specify the URL which should update the records. This is the Update method of the HomeController.
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    },
                    destroy: {
                        url: "/Admin/Sites/Destroy", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    },
                    parameterMap: function (data, operation) {
                        if (operation != "read") {
                            // post the products so the ASP.NET DefaultModelBinder will understand them:

                            // products[0].Name="name"
                            // products[0].ProductID =1
                            // products[1].Name="name"
                            // products[1].ProductID =1

                            var result = {};

                            for (var i = 0; i < data.models.length; i++) {
                                var site = data.models[i];

                                for (var member in site) {
                                    result["sites[" + i + "]." + member] = site[member];
                                }
                            }

                            return result;
                        } else {
                            return JSON.stringify(data)
                        }
                    }
                }
            }
        });

        function UserDropDownEditor(container, options) {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        transport: {
                            read: "/Admin/Sites/GetUsersList"
                        }
                    }
                });
        }


    });
</script>

这会正确显示网格中的下拉列表。但是当我通过在下拉列表中选择值来更新任何行时，我没有在控制器中获得所选值。

[HttpPost]
        public ActionResult Update(IEnumerable<Site> sites)
        {
            try
            {

                //Iterate all updated products which are posted by the Kendo Grid
                foreach (var siteModel in sites)
                {
                    // Create a new Product entity and set its properties from productViewModel
                    var site = db.Sites.Find((int)siteModel.Id);
                    site.Name = siteModel.Name;
                    site.Address = siteModel.Address;
                    site.Latitude = siteModel.Latitude;
                    site.Longitude = siteModel.Longitude;
                    site.UserId = siteModel.UserId;
                    site.ModifiedBy = User.Identity.GetUserId();
                    site.ModifiedOn = DateTime.Now;

                }

                // Save all updated products to the database
                db.SaveChanges();

            }
            catch (DbEntityValidationException e)
            {
                foreach (var eve in e.EntityValidationErrors)
                {
                    Console.WriteLine("Entity of type \"{0}\" in state \"{1}\" has the following validation errors:",
                        eve.Entry.Entity.GetType().Name, eve.Entry.State);
                    foreach (var ve in eve.ValidationErrors)
                    {
                        Console.WriteLine("- Property: \"{0}\", Error: \"{1}\"",
                            ve.PropertyName, ve.ErrorMessage);
                    }
                }
            }
            //Return emtpy result
            return Json(null);
        }

site.UserId = siteModel.UserId;

这始终为空。任何人都可以指出这里出了什么问题。

更新

这表明id已经过去了。但是，当我尝试在服务器端观看时，它不可用。

Answer 1

添加数据值原语属性：

$('<input required data-text-field="Name" data-value-field="Id" data-value-primitive="true" data-bind="value:' + options.field + '"/>')

请参阅http://blog.falafel.com/kendo-ui-mvvm-and-the-primitive-type-value/

Answer 2

如果您为输入提供名称属性

会发生什么

$('<input name="UserId" id="UserId" required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')

Kendo UI下拉列值未提交给控制器

2 个答案: