Question

我很难将自定义EditorTemplate连接到MVC 5应用程序中的网格。我有一个整数字段，只接受1或2作为值。我不想使用标准的数字文本框或滑块控件，而是使用按钮（通过Bootstrap的组按钮）连接它。如果用户单击第一个按钮，则该值应设置为1，否则应设置为2.

我遇到的问题是，当用户点击“编辑”按钮时，“级别”值永远不会应用于编辑器模板。模板按我的意愿显示，但我无法弄清楚如何将选定的值绑定回Kendo网格。当用户单击网格上的“保存”按钮时，永远不会调用控制器操作。

如果我用标准的Kendo控件（如数字文本框或Kendo滑块）替换编辑器模板，它可以正常工作。

视图模型

public class LotViewModel
{
   public int LotId { get; set; }
   [Display(Name = "Level")]
   [Range(1, 2)]
   [UIHint("LotLevel")]
   public int Level { get; set; }
}

查看

@(Html.Kendo().Grid<LotViewModel>()
  .Name("lotGrid")
  .Columns(columns =>
  {
    columns.Bound(x => x.LotId).Visible(false);
    columns.Bound(x => x.Level);
    columns.Command(command =>
    {
      command.Edit();
    }).Width(100);
  })
  .ToolBar(toolbar => toolbar.Create())
  .Editable(editable => editable.Mode(GridEditMode.InLine))
  .AutoBind(true)
  .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
      model.Id(m => m.LotId);
      model.Field(m => m.Level).DefaultValue(1);
    })
    .Read(update => update.Action("GetLots", "Lot"))
    .Create(update => update.Action("CreateLot", "Lot"))
    .Update(update => update.Action("UpdateLot", "Lot"))
  )
  )

EditorTemplate：LotLevel

@model int
@{
   var levelOne = Model.Equals(1) ? "active btn-primary" : null;
   var levelTwo = Model.Equals(2) ? "active btn-primary" : null;

   var htmlField = ViewData.TemplateInfo.HtmlFieldPrefix;
 }

@Html.HiddenFor(model => model)
<div class="btn-group btn-group-@htmlField">
  <button type="button"
          class="btn btn-default @levelOne bool-@htmlField"
          onclick="javascript: setValue(this, 1);">
    Level 1
  </button>
  <button type="button"
          class="btn btn-default @levelTwo bool-@htmlField"
          onclick="javascript:setValue(this, 2);">
    Level 2
  </button>
</div>

<script>
  function setValue(button, level) {
    $('.btn-group-@htmlField button.active').removeClass('active btn-primary');
    $(button).addClass('active btn-primary');
    $('#@htmlField').val(level); // TODO: Set the value of the model here
  }
</script>

Answer 1

归结为绑定。在创建网格然后隐藏网格时，编辑器模板将被实例化一次（使用空模型对象）。当您点击＆＃34;编辑＆＃34;将编辑器放入DOM中，替换显示行，并将dataSource对象中的值绑定到编辑器模板中的输入（我认为按名称）。使用标准或kendo输入时，编辑器会更新并显示正确的值。使用复杂的编辑器（或复杂的对象），绑定本质上会失败并且不再发生。

在您的情况下，您可以向Grid的编辑事件添加一个事件处理程序，该事件将强制按钮在显示编辑器时更新为输入值。

绑定Kendo网格的编辑器模板

1 个答案: