Javascript 如何为模板重用剑道UI组件？属性"；。名称“；在DOM中为多个HTML元素提供完全相同的ID

我想创建一个可重用的剑道UI按钮和下拉列表模板

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

一些函数（按钮上的onclick）是常用的，因此需要检查某些HTML元素的可见性。其他功能（下拉列表选择）在整个应用程序中仅使用一次或两次。然而，我仍然希望这些很少使用的组件在我的模板和显示将设置为“无”

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

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

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

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

在我看来，我在ASP.NET MVC语法中使用了来自剑道UI演示页面的示例代码：

Template.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%" })
) 

@（Html.Kendo（）.DropDownList（））
.Name（“color”）//设置DOM中的元素ID
.DataTextField（“文本”）
.DataValueField（“值”）
.事件（e=>e.Change（“Change”））
.BindTo（新列表（）{
新建SelectListItem（）{
Text=“黑色”，
Value=“1”
},
新建SelectListItem（）{
Text=“橙色”，
Value=“2”
},
新建SelectListItem（）{
Text=“Grey”，
Value=“3”
}
})
.价值（“1”）
.HtmlAttributes（新的{style=“width:100%”）
) 

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

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

以下是我想如何使用我的模板：

我真的需要重用我的模板很多（远远不止一次）。在DOM的某些部分中，模板的某些元素（按钮、下拉列表等）将设置为“display:none”

如果我需要模板中的一些元素，那么我想嵌入整个模板，显示我需要的内容，隐藏我不需要的元素

我的模板的一些元素是“通用”的，将使用通用JavaScript函数。我的模板的其他部分将只有一个指定的函数（onclick），它们几乎总是被设置为“display:none”

我不想在DOM中多次使用ID

如果类在DOM中被多次使用，我没有问题

---

我能做到以下几点：
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);
}

---

我知道这个答案太晚了，但我刚刚解决了这个问题，所以我想我应该放弃我的解决方案 这是给未来的观众看的

ViewBag可用于传入名称

在Template.cshtml中：

@（Html.Kendo（）.DropDownList（））
.Name（ViewBag.Name）

在包含视图中：

@Html.EditorFor（m=>m.someProperty，“Template”，new{Name=“mycontrol”}）

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

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

 @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%"})
   )