Kendo UI - MVC - 使用自定义 jQuery 选择器进行初始化

Question

我正在使用 Kendo UI 2013.Q2。

我的页面正在加载多个模式弹出窗口（页面内 div 元素）。内容是从带有 ajax 请求的部分视图加载的。因此，如果我的部分视图内容包含剑道组件，则第二个弹出窗口无法初始化剑道元素，因为它们的 ID 与前一个模式弹出窗口中的元素相同。

有什么方法可以修改 jQuery 选择器以进行剑道初始化，这样我就可以在选择器中指定父窗口元素。

MVC 代码：

@(Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false))
          

呈现为：

jQuery(function(){jQuery("#DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

我想修改为：

 jQuery(function(){jQuery("#ModalWin_2 #DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

---

2020 年更新

这个问题是针对主页中的多个模式同时提出的，例如为不同的数据库记录显示并排的多个窗口。我已经找到了一个使用<iframe> modals 的解决方案。但最好的做法是永远不要从一开始就使用 MVC 助手。

如果您一次使用一个模态窗口，只需简单地销毁之前的模态内容，这样剑道元素就会被销毁。然后重新打开第二个模态。

---

Answer 1

不支持开箱即用。你有两个选择：

1. 使用 JavaScript 版本的 NumericTextBox

2. 修改包装器的源代码。您需要编辑 WidgetBase.cs 并更改 Selector 属性的实现。例如你可以为它创建一个setter

   private string _selector;
   
   public string Selector
   {
       get
       { 
           return _selector ?? (IsInClientTemplate ? "\\#" : "#") + Id;
       }
       set
       {
           _selector = value;
       }
   }
   

然后像这样使用它：

@{

// initialize the NumericTextBox
var numeric = Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false));

// Set the Selector 
numeric.ToComponent().Selector = "#ModalWin_2 #DemirbasInfo_SicilSiraNo";
};

@* render it *@
@numeric