从剑道网格内的剑道颜色选择器更新服务器

时间:2017-06-23 14:59:45

标签: javascript jquery asp.net-mvc kendo-ui kendo-grid

问题

所以我正在尝试在Kendo网格中实现颜色选择器,希望将所选颜色发送到我的Sql表。不幸的是,它似乎并没有达到更新控制器。我对Kendo UI比较陌生,因此可能会出现一些令人难以置信的愚蠢错误。

问题

我想我的主要问题是:如何在网格上点击更新时调用更新方法。基本上,颜色选择器和编辑命令以漂亮的方式出现。我只是想知道如何确保在更新'时调用该方法。点击,看到它没有到达我的控制器。随意询问您是否需要查看更多代码或屏幕截图。

代码

Config.cshtml(网格)

@model IEnumerable<STZN.Models.AGCData.ErrorCode>

@{
    ViewBag.Title = "Config";
}


@section HeadContent{
<script src="~/Scripts/common.js"></script>
    <script>

        $(document).ready(function () {
           $("#grid").kendoGrid({
               editable: "inline",
               selectable: "row",
               dataSource: {
                   schema: {
                       model: {
                           id: "error_code",
                           fields: {
                               color: { type: 'string' }
                           }
                       }
                   },

                   transport: {

                       read: {
                           type: "POST",
                           dataType: "json",
                           url: "@Url.Action("ErrorCodes")"
                       },
                       update: {
                           type: "POST" ,
                           dataType: "json",
                           url: "@Url.Action("UpdateErrorCodes")",

                       }
                   }
               },

               columns: [
                   { command : [ "edit" ] },
                   {
                       field: "error_code", title: "Error Code",

                   },
                   {
                       field: "error_description", title: "Error Description"
                   },
                   {
                       field: "color",
                       width: 150,
                       title: "Color",
                       template: function (dataItem) {
                           return "<div style = 'background-color: " + dataItem.color + ";'&nbsp;</div>"
                       },
                       editor: function (container, options) {
                           var input = $("<input/>");
                           input.attr("color",options.field);
                           input.appendTo(container);
                           input.kendoColorPicker({
                               value: options.model.color,
                               buttons: false
                           })
                       },

                   }

               ]
           });
       });


    </script>
}

更新控制器

public JsonResult UpdateErrorCodes(ErrorCode model)
        {


            using (var db = new AgcDBEntities())
            {
                db.Entry(model).State = System.Data.Entity.EntityState.Modified;
                db.SaveChanges();

                db.Configuration.ProxyCreationEnabled = false;
                var data = db.ErrorCodes.Where(d => d.error_code == model.error_code).Select(x => new
                {
                    error_code = x.error_code,
                    description = x.error_description,
                    color = x.color,
                });

                return new JsonResult()
                {
                    JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.AllowGet,
                };
            }
        }

1 个答案:

答案 0 :(得分:0)

我实际上设法通过在&#34; color&#34;中为我的编辑器功能添加一个额外的输入属性来解决我的问题。领域。它看起来像这样:

input.attr("data-bind","value:" + options.field);

仍然存在一些问题(与修复/服务器更新无关),但就更新到服务器而言,它按预期工作。