html - Kendo MVC 非唯一 ID 问题

Question

示例:我们有一个员工列表页面，它由过滤条件表单和员工列表网格组成。您可以筛选的标准之一是经理。如果用户想选择一个经理作为过滤依据，他可以使用查找控件并打开弹出窗口，其中还有过滤条件和员工列表网格。

现在的问题是，如果弹出窗口不是 iframe，一些弹出元素将具有与所有者页面相同的名称和 ID。重复的 ID 会导致 Kendo UI 中断，因为默认情况下 MVC 包装器会生成带有 $("#id").kendoThingie 的脚本标签。

我过去使用过 iframe，但是不适合 iframe 窗口的内容(如长下拉列表)会被截断，现在 IE11 尤其会导致各种问题，例如 https://connect.microsoft.com/IE/feedback/details/802251/script70-permission-denied-error-when-trying-to-access-old-document-from-reloaded-iframe .

这里最好的解决方案是什么？为 Razor 页面上的所有元素生成唯一 ID？修改 Ajax 检索的部分页面内容，使 id 唯一？还有别的吗？

Answer 1

听起来您正在使用部分页面作为 Kendo 窗口的内容。如果是这种情况，那么只需在页面顶部为您的部分提供一个前缀即可。

@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "MyPrefix"
}

现在，当您像这样通过 MVC 包装器创建剑道控件时

@(Html.Kendo().DropDownListFor(o => o.SomeProperty)
    .....
)

name 属性将生成为“MyPrefix.SomeProperty”，id 属性将生成为“MyPrefix_SomeProperty”。在 Jquery 中访问它时，我喜欢更短的变量名，所以我通常这样做

string Prefix = ViewData.TemplateInfo.HtmlFieldPrefix

设置前缀后。然后使用

var val = $('#@(Prefix)_SomeProperty').data('kendoDropDownList').value();

此更改后的注意事项。如果您从该部分发布表单，则需要将以下属性添加到 Controller 方法的模型参数中，就像这样。这样绑定(bind)就会正确发生。

[HttpPost]
public ActionResult MyPartialModal([Bind(Prefix = "MyPrefix")] ModeViewModel model) {
    .....
}

现在说了这么多。只要您保持每个部分的前缀不同，您的控件 ID 和名称将是唯一的。为了确保这一点，我通常使我的前缀名称与我正在创建的 cshtml 页面相同。您只需要担心 JS 函数名称。另外，请注意关闭剑道窗口时所有 DOM 仍然存在。你只是隐藏它。如果这导致您遇到同样的问题，您只需要确保在关闭时清除模态的 DOM。类似于 BurnsBA 提到的方式。请注意，因为这就是我尝试确保使用尽可能少的剑道窗口并通过指向不同 URL 的刷新功能重用它们的原因。

$('#my-window').data('kendoWindow').refresh({
    url: someUrlString
    , data: {
        someId: '@Model.MyId'
    }
}).open().center();

然后在模态页面本身。发帖时我会假设发帖时不需要发生任何复杂的事情。

var form = $('#my-form'); //Probably want this to be unique. What I do is provide a GUID on the view model

$('#my-window').data('kendoWindow').refresh({
    url: form.attr('action')
    , data: form.serialize()
    , type: 'POST'
}).open().center();