将剑道网格绑定到下拉列表，未填充时列显示“未定义”

Question

我的剑道网格中似乎有一个独特的问题。我到处搜索并尝试了多种方法，但没有运气。我需要将我的“HoldReason”下拉列表绑定到剑道网格，并且“HoldReason”将始终为空或最初未选择任何内容。目前我的网格在该网格列中显示“未定义”。

视图模型：

  public class PaymentDetailTerm
  {
    public PaymentDetailTerm()
    {
    }

    private int? holdReasonId;
    private bool holdFlag;
    private decimal disbursed;
    private SysHoldReason holdReason;

    //some properties omitted 

    [Display(Name = "Disbursed")]
    [NonNegative]
    [DataType(DataType.Currency), DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Disbursed
    {
      get
      {
        return disbursed;
      }
      set
      {
        disbursed = value;
      }
    }

    [Display(Name = "Hold")]
    [BoolFieldRequiredWhenInt("HoldReasonId")]
    public bool HoldFlag
    {
      get
      {
        return holdFlag;
      }
      set
      {
        holdFlag = value;
      }
    }

    [Display(Name = "Hold Reason")]
    [IDFieldRequiredWhenBool("HoldFlag")]
    public int? HoldReasonId
    {
      get
      {
        return holdReasonId;
      }
      set
      {
        holdReasonId = value;
      }
    }

    [UIHint("HoldReasonEditor")]
    public SysHoldReason HoldReason
    {
      get
      {
        if (holdReason == null || holdReason.HoldReasonId == 0)
        {
          return new SysHoldReason() { HoldReasonId = 0, HoldReasonTitle = string.Empty };
        }
        else return holdReason;
      }
      set { holdReason = value; }   
    }
}

模板编辑器“HoldReasonEditor”：

  @using System.Collections
  @using Kendo.Mvc.UI


<kendo-dropdownlist name="HoldReasonId" bind-to="ViewBag.HoldReasonId" Auto-Width="true" option-label=" " datatextfield="Text" datavaluefield="Value" value-primitive="true"></kendo-dropdownlist>

控制器（这是有关下拉列表的仅有的两个语句）：

  ViewData["HoldReasonId"] = new SelectList(_context.SysHoldReason.Where<SysHoldReason>(x => x.SiteId == 99 || x.SiteId == _user.SiteId), "HoldReasonId", "HoldReasonTitle");
  ViewData["HoldReasonCollection"] = new SelectList(_context.SysHoldReason.Where<SysHoldReason>(x => x.SiteId == 99 || x.SiteId == _user.SiteId), "HoldReasonId", "HoldReasonTitle");

我将 HoldReasonCollection 用作隐藏字段，以便稍后在网格保存时正确设置信息。 SysHoldReason 模型包含 HoldReasonId 和 HoldReasonTitle 属性（还有更多，但我只关心这些）。

以及我认为定义的剑道网格：

@(Html.Kendo().Grid<eCLERC.ViewModels.PaymentDetailTerm>(Model.PaymentDetailTerms)
  .Name("TermGrid")
  .DataSource(ds => ds
  .Ajax()
  .ServerOperation(false)
  .Model(m =>
  {
    m.Field(d => d.TermTypeTitle).Editable(false);
    m.Field(d => d.PayeePartyName).Editable(false);
    m.Field(d => d.PayoffBalance).Editable(false);
    m.Field(d => d.PeriodicAmount).Editable(false);
    m.Field(d => d.UnpaidBalance).Editable(false);
    m.Field(d => d.ClerkFeeFlag).Editable(false);
    m.Field(d => d.HoldFlag).Editable(true);
    m.Field(d => d.HoldReasonId).Editable(true);
    m.Field(d => d.HoldReason);
    //m.Field(p => p.HoldReason).DefaultValue(ViewData["HoldReasonId"] as eCLERC.Models.DB.SysHoldReason);
  })
  )
  .Columns(columns =>
  {
    columns.Bound(e => e.TermTypeTitle).Width(110).Title("Term Type");
    columns.Bound(e => e.PayeePartyName).Width(110).Title("Payee");
    columns.Bound(e => e.PayoffBalance).Width(110);
    columns.Bound(e => e.PeriodicAmount).Width(110); //TODO: Nikki - what is recap amount
    columns.Bound(e => e.UnpaidBalance).Width(100);
    columns.Bound(e => e.ClerkFeeFlag).Width(100);

    columns.Bound(e => e.Disbursed).Width(100);
    columns.Bound(e => e.HoldFlag).Width(100);
    columns.Bound(e => e.HoldReason).EditorTemplateName("HoldReasonEditor").ClientTemplate("#=HoldReason.Text#");
  })
  .Sortable()
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Events(x => { x.Save("function(e){onGridSave(e)}"); })
  .Scrollable()
  .HtmlAttributes(new { style = "height:350px" }))

下拉菜单有效，如果我选择一个值，我会看到 HoldReason 标题值，但我只是不知道如何修复最初显示的“未定义”文本。同样，如果我想将下拉菜单设置回选项标签（“”），下拉控件会显示 HoldReasonId 所需的验证。

Answer 1

终于！！所以，我想通了。首先，HoldReasonId required 错误。我将该控件绑定到整个代码表、id、标题、描述等的数据库模型。这也是控制该代码表的数据输入的模型，因此需要 id 值，这就是为什么我是得到那个错误。它给了我来自 SysHoldReason 数据库模型的验证。我通过为 ViewSysHoldReason 创建一个单独的视图模型解决了这个问题，它只包含一个可为空的 HoldReasonId 值和一个字符串 HoldReasonTitle 值。

  public class ViewSysHoldReason
  {
    public int? HoldReasonId { get; set; }
    public string HoldReasonTitle { get; set; }
  }

接下来，我更新了我的 PaymentDetailTerm 视图模型，将其用于编辑器，而不是像以前那样使用整个代码表数据库模型。

public class PaymentDetailTerm
  {
    public PaymentDetailTerm()
    {
    }

    private int? holdReasonId;
    private bool holdFlag;
    private decimal disbursed;
    private ViewSysHoldReason viewSysHoldReason;

    //some properties omitted 

    [Display(Name = "Disbursed")]
    [NonNegative]
    [DataType(DataType.Currency), DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Disbursed
    {
      get
      {
        return disbursed;
      }
      set
      {
        disbursed = value;
      }
    }

    [Display(Name = "Hold")]
    [BoolFieldRequiredWhenInt("HoldReasonId")]
    public bool HoldFlag
    {
      get
      {
        return holdFlag;
      }
      set
      {
        holdFlag = value;
      }
    }

    [Display(Name = "Hold Reason")]
    [IDFieldRequiredWhenBool("HoldFlag")]
    public int? HoldReasonId
    {
      get
      {
        return holdReasonId;
      }
      set
      {
        holdReasonId = value;
      }
    }

    [UIHint("HoldReasonEditor")]
    public ViewSysHoldReason HoldReason
    {
      get
      {
        if (viewSysHoldReason == null || viewSysHoldReason.HoldReasonId == 0)
        {
          return new ViewSysHoldReason() { HoldReasonId = 0, HoldReasonTitle = string.Empty };
        }
        else return viewSysHoldReason;
      }
      set { viewSysHoldReason = value; }
    }
}

HoldReason 上面的最后一个属性就是这里的全部变化。接下来，我更新了显示的网格，如下所示：

  @(Html.Kendo().Grid<eCLERC.ViewModels.PaymentDetailTerm>(Model.PaymentDetailTerms)
      .Name("TermGrid")
      .DataSource(ds => ds
      .Ajax()
      .ServerOperation(false)
      .Model(m =>
      {
        m.Field(d => d.TermTypeTitle).Editable(false);
        m.Field(d => d.PayeePartyName).Editable(false);
        m.Field(d => d.PayoffBalance).Editable(false);
        m.Field(d => d.PeriodicAmount).Editable(false);
        m.Field(d => d.UnpaidBalance).Editable(false);
        m.Field(d => d.ClerkFeeFlag).Editable(false);
        m.Field(d => d.HoldFlag).Editable(true);
        m.Field(d => d.HoldReasonId).Editable(true);
        m.Field(d => d.HoldReason);
      })
      )
      .Columns(columns =>
      {
        columns.Bound(e => e.TermTypeTitle).Width(110).Title("Term Type");
        columns.Bound(e => e.PayeePartyName).Width(110).Title("Payee");
        columns.Bound(e => e.PayoffBalance).Width(110);
        columns.Bound(e => e.PeriodicAmount).Width(110); //TODO: Nikki - what is recap amount
        columns.Bound(e => e.UnpaidBalance).Width(100);
        columns.Bound(e => e.ClerkFeeFlag).Width(100);

        columns.Bound(e => e.Disbursed).Width(100);
        columns.Bound(e => e.HoldFlag).Width(100);
        columns.ForeignKey(p => p.HoldReason, (System.Collections.IEnumerable)ViewData["HoldReasonId"], "Value", "Text")
          .EditorViewData(new {HoldReasonId = (System.Collections.IEnumerable)ViewData["HoldReasonId"]})
          .EditorTemplateName("HoldReasonEditor").ClientTemplate("#=HoldReason.Value > 0 ? HoldReason.Text : '' #")
          .Title("Hold Reason")
          .Width(110);
      })
      .Sortable()
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Events(x => { x.Save("function(e){onGridSave(e)}"); x.CellClose("function(e){onCellClose(e)}"); })
      .Scrollable()
      .HtmlAttributes(new { style = "height:350px" }))

请注意，我为 CellClose 添加了一个事件。这是因为我想在用户选择 optionlabel = " " 以从网格中删除 HoldReason 时捕捉编辑器。一旦用户从下拉列表中选择了一个值，我无法弄清楚如何将该值设置回空，因此 CellClose 是我的解决方案。

function onCellClose(e) {
    var grid = $("#TermGrid").data("kendoGrid");
    var fieldName = grid.columns[e.container.index()].field;

    if (fieldName == "HoldReason" && e.container.find("input").val() == "") {
      e.model.HoldReasonId = 0;
      e.model.HoldReason.Value = 0;
      e.model.HoldReason.Text = "";
    }
  }

如果没有 onGridSave 事件，模型将无法正确设置，所以我觉得我也应该显示该代码。我没有在我的原始帖子中分享它。

function onGridSave(e) {
    e.preventDefault();
    var grid = $("#TermGrid").data("kendoGrid");
    var fieldName = grid.columns[e.container.index()].field;

    if (fieldName == "HoldReason") {
      $('#HoldReasonCollection').data('kendoDropDownList').value(e.container.find("input").val());
      e.model.HoldReasonId = e.values["HoldReason.HoldReasonId"];
      e.model.HoldReason = $('#HoldReasonCollection').data('kendoDropDownList').dataItem();
    }
    if (fieldName == "Disbursed") {
      e.model.Disbursed = e.container.find("input").val();
    }
    if (fieldName == "HoldFlag" && e.model.HoldFlag == true) {
      e.model.HoldFlag = false;
    }
    else if (fieldName == "HoldFlag" && e.model.HoldFlag == false) {
      e.model.HoldFlag = true;
    }
  }