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

Posted 2023-05-07

【中文标题】如何为模板重用 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

【发布时间】：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 中多次使用类，我没有问题

【参考方案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" )