在 MVC 的部分视图中制作可编辑的剑道网格答案

【问题标题】：Make editable Kendo grid in partial view in MVC在 MVC 的部分视图中制作可编辑的剑道网格
【发布时间】：2016-05-18 02:27:04
【问题描述】：

我想制作可编辑的剑道网格作为局部视图控件，以便在需要时多次使用它。

我的客户和员工有多个地址所以我想为部分视图中的地址制作可编辑的剑道网格，以便在员工和客户中使用它。

我对剑道网格的部分看法是

    @model AddressesModel
@using Kendo.Mvc.UI


@{
    var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
    var propertyPrefixName = "";
    if (string.IsNullOrEmpty(prefix))
    {
        propertyPrefixName = nameof(AddressesModel.AddressesList);
    }
    else
    {
        propertyPrefixName = prefix + "." + nameof(AddressesModel.AddressesList);
    }
    var cityId = nameof(AddressModel.CityId);
    var email = nameof(AddressModel.Email);

}

@(Html.Kendo().Grid(Model.AddressesList)
              .Name("AddressGrid")
              .ToolBar(tools => tools.Create().Text(GlobalResources.Add))
              .Editable(editable
              => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
              .Columns(columns =>
              {


                  columns.Bound(p => p.CityId).ClientTemplate("#= " + cityId + " #" +
                  "<input type='hidden' name='" + propertyPrefixName + "[#= index(data)#]." + cityId + "' value='#= " + cityId + " #' />"

                       );

                  columns.Bound(p => p.Email).ClientTemplate("#= " + email + " #" +
                    "<input type='hidden' name='" + propertyPrefixName + "[#= index(data)#]." + email + "' value='#= " + email + " #' />"
                  );


                  columns.Command(command => command.Destroy()).Width(20).Title(GlobalResources.Delete);
              })
              .DataSource(dataSource => dataSource.Ajax()
                   .Model(model =>
                   {
                       model.Id(p => p.Id);
                       model.Field(p => p.Id).Editable(false);
                   })
                   .ServerOperation(false)
              )
)





<script>

    function index(dataItem) {

        var data = $("#AddressGrid").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

</script>

在员工视图中我是这样使用的

@Html.Partial("_AddressesGrid", Model.Addresses, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix =nameof(CreateEmployeeModel.Addresses)} })

当我编辑电子邮件时出现此错误

它没有被编辑！

请帮忙，我如何在局部视图中制作可编辑的剑道网格！！

请注意，如果我将剑道网格放在没有部分视图的员工视图中，剑道网格可以正常工作。

【问题讨论】：

显然 Kendo 小部件喜欢在部分中使用 unique ids。也见this answer。
我在视图中使用一个网格，我的问题是在编辑单元格时出现错误

标签： asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

改变

@Html.Partial("_AddressesGrid", Model.Addresses, new ViewDataDictionary { TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix =nameof(CreateEmployeeModel.Addresses)} })

到

@Html.Partial("_AddressesGrid", Model.Addresses)

注意不要使用 HtmlFieldPrefix ，剑道会制作带有错误名称的编辑器单元格模板，所以我有上述错误

【讨论】：