kendo mvc editortemplate无法从网格填充viemodel属性

时间:2018-07-10 21:02:08

标签: asp.net-mvc telerik kendo-grid

按预期方式填充kendo网格,按预期方式将ConfigurationSettings显示为明细行,但是当尝试编辑该行时,viewModel的状态不同,编辑时某些先前填充的属性为null显示弹出窗口。是否需要剑道“技巧”或其他接线?

网格

  @(Html.Kendo().Grid<ConfiguationViewModel>()
          .Name("configurationGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.Id).Width(150).Hidden(true);
              columns.Bound(c => c.Name);
              columns.Bound(c => c.ConfigurationType).ClientTemplate("#= ConfigurationType.ConfigurationTypeName  #").EditorTemplateName("ConfigurationType");
              columns.Bound(c => c.HasParentConfiguration);
              columns.Bound(c => c.CanOverride);
              columns.Bound(c => c.IsActive);
              columns.Command(command =>
              {
                  command.Edit().Text(" ").HtmlAttributes(new { title = "Edit Configuration" });
                  command.Destroy().Text(" ").HtmlAttributes(new { title = "Delete Configuration" });
              }).Width(210);
          })
          .Editable(editable => editable.Mode(GridEditMode.PopUp)
                                        .TemplateName("Configuration").Window(w => w.Width(860).Resizable(r => r.Enabled(true)))
                                        .ConfirmDelete("Are you sure you want to delete this configuration?")
                                        .DisplayDeleteConfirmation("Configuration deleted"))
          .Pageable(pager => pager
              .Input(false)
              .Numeric(true)
              .Info(true)
              .PreviousNext(true)
              .Refresh(true)
              .PageSizes(new[] { 10, 15, 20 }))
          .ClientDetailTemplateId("configDetailTemplate")
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .Scrollable(scrollable => scrollable.Enabled(false))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .Events(events => events.Error("handleErrors").Sync("sync_handler"))
              .Model(model => model.Id(c => c.Id))
              .Read(read => read.Action("Read", "Configuration"))
              .Create(create => create.Action("Create", "Configuration"))
              .Update(update => update.Action("Edit", "Configuration"))
              .Destroy(delete => delete.Action("Delete", "Configuration"))
          ))

最初显示网格时查看模型

   public class ConfiguationViewModel
   {
    public int Id { get; set; }
    [Required]
    [MaxLength(255)]
    public virtual string Name { get; set; }
    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
    public DateTime DateCreated { get; set; } = DateTime.UtcNow;

     ...

    public virtual ICollection<ConfigurationSettingViewModel> ConfigurationSettings { get; set; } = new HashSet<ConfigurationSettingViewModel>();

  }

  // detail rows view model
  public class ConfigurationSettingViewModel
  {
    public int ConfigurationId { get; set; }
    [Required]
    [MaxLength(200)]
    public string Key { get; set; }
    [Required]
    [MaxLength(100)]
    public string Value { get; set; }
  }

用于网格EditorTemplate的模板

使用@ Model.Property将为属性(在网格中填充)产生null。   例如,尝试使用@ Model.DateCreated显示日期属性会显示默认日期值,但是如果我使用html helper @Html.EditorFor(model => model.DateCreated),则会显示具有正确值的日期选择器

  @model  ConfiguationViewModel

 <div class="form-horizontal" style="padding: 12px 4px;">
    <h4>Configuration</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="row">
        <div class="col-md-10">
            <div class="col-md-4">
                <div class="form-group">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>
            ...
    </div>
  </div>
  ...
 <div class="row">
    <div class="col-md-10">
        <div class="col-md-4">
            <div class="form-group" style="padding-left: 18px;">
                @Html.LabelFor(model => model.DateCreated, htmlAttributes: new { @class = "control-label" }) : <text>@Model.DateCreated</text><br />
                @Html.LabelFor(model => model.ModifiedById, htmlAttributes: new { @class = "control-label text-muted" }) : <text class="text-muted">@Model.ModifiedById</text> <br />
                @Html.LabelFor(model => model.DateModified, htmlAttributes: new { @class = "control-label text-muted" }) : <text class="text-muted">@Model.DateModified</text>
            </div>
        </div>
        <div class="col-md-6">&nbsp;</div>
    </div>
  </div>
  ...
  <div class="row">
    <div class="col-md-10">
        <div class="col-md-8">
            //NPE
            @if (Model != null && Model.ConfigurationSettings.Any())
            {
                <table class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <th scope="col">Configuration Id</th>
                            <th scope="col">Key</th>
                            <th scope="col">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        // NPE HERE
                        @foreach (var config in Model.ConfigurationSettings)
                        {
                            <tr>
                                <td>
                                    <h2>@config.ConfigurationId</h2>
                                </td>
                                <td>@config.Key</td>
                                <td>@config.Value</td>
                            </tr>
                        }
                    </tbody>
                </table>

            }
            else
            {
                <div class="alert alert-warn">No Settings Defined </div>

            }
     </div>

0 个答案:

没有答案