如何为模板重用 Kendo UI 组件？属性“.name”为多个 HTML 元素在 DOM 中提供完全相同的 ID答案

【问题标题】：How to reuse Kendo UI Components for a template? Attribute ".name" gives multiple HTML-elements the exact same ID in the DOM如何为模板重用 Kendo UI 组件？属性“.name”为多个 HTML 元素在 DOM 中提供完全相同的 ID
【发布时间】：2017-04-12 06:31:16
【问题描述】：

我想创建一个可重复使用的 Kendo UI 按钮和下拉菜单模板。

目的是拥有 1 个 Template.cshtml 文件，并在我想使用它们的任何地方隐藏/显示该文件的某些部分。

一些功能（点击按钮）是常用的，因此需要检查某些 HTML 元素的可见性。其他功能（下拉菜单的选择）在整个应用程序中只会使用一次或两次。但是我仍然希望在我的模板中使用这些很少使用的组件，并且显示将设置为“无”。

为了在我的 ASP.NET MVC 应用程序中实现模板，我使用的是 razor 语法：

@Html.Action("myTemplate", "Controller")

此操作返回我的部分视图：

    public ActionResult myTemplate()
    {
        return PartialView("Template");
    }

在我看来，我在 Kendo UI 演示页面中使用此示例代码在 ASP.NET MVC 语法中：http://demos.telerik.com/aspnet-mvc/dropdownlist/index

模板.cshtml

@(Html.Kendo().DropDownList()
      .Name("color")                       // this sets the elements ID in the DOM
      .DataTextField("Text")
      .DataValueField("Value")
      .Events(e => e.Change("change"))
      .BindTo(new List<SelectListItem>() {
          new SelectListItem() {
              Text = "Black",
              Value = "1"
          },
          new SelectListItem() {
              Text = "Orange",
              Value = "2"
          },
          new SelectListItem() {
              Text = "Grey",
              Value = "3"
          }
      })
      .Value("1")
      .HtmlAttributes(new { style = "width: 100%" })
)

如果我只在整个应用程序中使用一次，我的模板就可以正常工作（这与“模板”的目的相反）。

如果我在同一页面上使用我的模板两次（或更频繁），那么 ID #color 会在同一页面上使用多次。

这是我想使用我的模板的方式：

我确实需要多次重用我的模板（远不止一次）。模板的某些元素（按钮、下拉菜单等）在 DOM 的某些部分将设置为“显示：无”。
如果我需要模板的一些元素，那么我想嵌入整个模板并显示我需要的内容并隐藏我不需要的元素。
我的模板中的一些元素是“通用的”，并且会使用通用的 JavaScript 函数。我的模板的其他部分将只有 1 个指定功能（onclick），它们几乎一直设置为“显示：无”。
我不想在 DOM 中多次使用 ID
如果在 DOM 中多次使用类，我没有问题

【问题讨论】：

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

【解决方案1】：

我能够做到这一点如下：
1.创建一个名为color.cs的模型

    public class Color
    {
        public string Name { get; set; }
    }

控制器

public ActionResult MultipleControls()
{
    var colors = new List<Color>();
    colors.Add(new Color() { Name = "Pink0"});
    colors.Add(new Color() { Name = "Pink1" });
    colors.Add(new Color() { Name = "Pink2" });
    colors.Add(new Color() { Name = "Pink3" });
    return View(colors);
}

MultipleControls.cshtml 页面。在此页面中，您可以提供一个唯一的名称，因为我正在连接每种颜色的名称。

 @using Kendo.Mvc.UI
 @model List<WebApplication1.Models.Color>

 @foreach (var color in Model)
 {
     @Html.EditorFor(x => color,"Color"+color.Name)
 }

创建以下 EditorTemplate Color.cshtml。模板 .Name 属性使用@Model.Name，因此它每次都会生成一个唯一的 id。

 @using Kendo.Mvc.UI
 @model WebApplication1.Models.Color   

 @(Html.Kendo().DropDownList()
  .Name(@Model.Name)
  .DataTextField("Text")
  .DataValueField("Value")
  .Events(e => e.Change("change"))
  .BindTo(new List<SelectListItem>() {
      new SelectListItem() {
          Text = "Black",
          Value = "1"
      },
      new SelectListItem() {
          Text = "Orange",
          Value = "2"
      },
      new SelectListItem() {
          Text = "Grey",
          Value = "3"
      }
  })
  .Value("1")
  .HtmlAttributes(new { style = "width: 100%"})
   )

【讨论】：

【解决方案2】：

我知道这个答案已经晚了，但我刚刚解决了这个问题，所以我想我会留下我的解决方案在这里供未来的观众观看。

ViewBag 可用于传入名称。

在 Template.cshtml 中：

@(Html.Kendo().DropDownList() .Name(ViewBag.Name)

在包含视图中：

@Html.EditorFor(m => m.someProperty, "Template", new { Name = "mycontrol" })

【讨论】：