Question

这是我的控制器。这里我从两个表中获取数据，一个是父表，第二个是子表。

 public JsonResult ReadAllFeatures()
            {
                var fetaures = _featuresService.GetFeatures(0);
                //HaBo: I recommend not doing this here, right way to do it is using client template on the client side
                foreach (var fetaure in fetaures)
                {
                    fetaure.Name = $"{fetaure.Module.Name} >> {fetaure.Name}";
                }
                return Json(fetaures, JsonRequestBehavior.AllowGet);
            }

我想像这样显示我的数据：

但我不想使用像fetaure.Name = $"{fetaure.Module.Name} >> {fetaure.Name}";这样的控制器代码。我需要使用Kendo listbox客户端模板，这样很容易。

这是我的view.cshtml代码

@(Html.Kendo().Grid<OfficeGx.Domain.Model.SubscriptionTier>()
      .Name("SubscriptionGrid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Id);
          columns.Bound(c => c.Name);
          columns.Command(command =>
          {
              command.Edit().Text(" ").UpdateText("Save");
              command.Destroy().Text(" ");
          });
      })
      .ClientDetailTemplateId("SubscriptionTierGriditem")
      .Sortable()
      .ToolBar(toolbar =>
      {
          toolbar.Create().Text("Add New SubscriptionTier");
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine)
      )
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5))
      .Resizable(resize => resize.Columns(true))
      .Reorderable(reorder => reorder.Columns(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .Model(model =>
          {
              model.Id(x => x.Id);
              model.Field(c => c.Id).Editable(false);
              model.Field(c => c.Name).Editable(true);
          })
          .Read(read => read.Action("ReadTiers", "Config"))
          .Create(update => update.Action("AddTier", "Config"))
          .Update(update => update.Action("UpdateTier", "Config"))
          .Destroy(update => update.Action("DeleteTier", "Config"))
          .PageSize(20)
      ))
<script id="SubscriptionTierGriditem" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<OfficeGx.Domain.Model.Subscription>()
             .Name("SubscriptionTierGriditem_#=Id#")
             .Columns(columns =>
             {
                 //columns.Bound(c => c.Id);
                 columns.Bound(c => c.Name);
                 //columns.Bound(c => c.Description);
                 columns.Bound(c => c.Price);
                 columns.Bound(c => c.MaxUserInvites).Title("Users");
                 //columns.Bound(c => c.TierId);
                 columns.Bound(c => c.CallForQuote);
                 columns.Bound(c => c.DiscountTerm).Title("Disc. Term");
                 columns.Bound(c => c.TearmWiseDiscount).Title("Discount");
                 columns.Bound(c => c.IsActive);
                 columns.Command(command =>
                 {
                     command.Edit().Text(" ").UpdateText("Save");
                     command.Destroy().Text(" ");
                 });
             })
             .ClientDetailTemplateId("Feature")
             .Sortable()
             .ToolBar(toolbar =>
             {
                 toolbar.Create().Text("Add New Subscription");
             })
             .Pageable(pageable => pageable
                 .Refresh(true)
                 .PageSizes(true)
                 .ButtonCount(5))
             .Resizable(resize => resize.Columns(true))
             .Reorderable(reorder => reorder.Columns(true))
             .DataSource(dataSource => dataSource
                 .Ajax()
                 .Batch(true)
                 .Model(model =>
                 {
                     model.Id(x => x.Id);
                     model.Field(c => c.Id).Editable(false);
                     model.Field(x => x.Name).Editable(true);
                     model.Field(x => x.Description).Editable(true);
                     model.Field(x => x.IsActive).Editable(true);
                     model.Field(x => x.Price).Editable(true);
                     model.Field(x => x.MaxUserInvites).Editable(true);
                     model.Field(x => x.TierId).Editable(false);
                     model.Field(x => x.CallForQuote).Editable(true);
                     model.Field(x => x.DiscountTerm).Editable(true);
                     model.Field(x => x.TearmWiseDiscount).Editable(true);
                 })
                .Read(read => read.Action("ReadSubscriptions", "Config", new { TierId = "#=Id#" }))
                .Create(update => update.Action("AddSubsctiption", "Config", new { TierId = "#=Id#" }))
                .Update(update => update.Action("UpdateSubscription", "Config", new { TierId = "#=Id#" }))
                .Destroy(update => update.Action("DeleteSubscription", "Config"))
                .PageSize(20)
             ).ToClientTemplate()
    )
</script>
<script id="Feature" type="text/kendo-tmpl">
    <div id="access-section">
        <label for="AllRoles" id="allRoles">Available Features</label>
        <label for="selectedRoles">Assigned Features</label>
        <br />
        @(Html.Kendo().ListBox()
                          .Name("module")
                          .Toolbar(toolbar =>
                          {
                              toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                              toolbar.Tools(tools => tools
                                  .TransferAllFrom()
                                  .TransferFrom()
                                  .TransferTo()
                                  .TransferAllTo()
                                  .Remove());
                          })
                    //        .Events(events => events
                    //.Add("onRemove")
                    //.Remove("onAdd")
                    .ConnectWith("selected")
                    .DataSource(x => x.Read(r => r.Action("ReadAllFeatures", "Config",0)))
                    .DataTextField("Name").DataValueField("Id")
                    .DropSources("selected")
                    .BindTo(new OfficeGx.Domain.Model.Module().Name)
                    .ToClientTemplate()

        )
        @(Html.Kendo().ListBox()
            .Name("selected")
            .DataTextField("Name")
            .ToClientTemplate()
    )
    </div>
</script>
<script>
    function onRemove(e) {
        postToDb(e, false);
    }
    function onAdd(e) {
        postToDb(e, true);
    }
</script>
<script id="item-template" type="text/x-kendo-template">
    @*<span class="k-state-default" style="background-image: url('../content/web/Customers/#:data.CustomerID#.jpg')"></span>*@
    <span class="k-state-default"><b>#=data fetaure.Module.Name=#</b></p>#:==#</p></span>
</script>

如何在Kendo MVC中使用Clientbox for Listbox，这样我可以正确显示我的数据？

Answer 1

您需要将以下行添加到两个列表框（左侧和右侧）

.TemplateId("feature-item-template")

然后你的模板看起来像这样

<script id="feature-item-template" type="text/x-kendo-template">
<span class="k-state-default"><h3>#: data.Name # </h3><p>#: data.Module.Name #</p></span>
</script>

Kendo文档非常详细，如果您想花一些时间阅读，可以快速学习。

如何在Kendo MVC中使用客户端模板进行列表框

1 个答案: