Kendo MVC 非唯一 id 问题答案

【问题标题】：Kendo MVC non-unique id issuesKendo MVC 非唯一 id 问题
【发布时间】：2014-10-29 07:43:37
【问题描述】：

示例：我们有一个员工列表页面，它由过滤条件表单和员工列表网格组成。您可以过滤的标准之一是经理。如果用户想选择一个经理进行过滤，他使用查找控件并打开弹出窗口，该窗口也具有过滤条件和员工列表网格。

现在的问题是，如果弹出窗口不是 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 唯一？还有什么？

【问题讨论】：

我现在正在处理这个问题。许多 Kendo 控件在同一元素有两个 id 时执行此操作。发现这个 fiddle 用 Jquery 选择重复的 ID。 jsfiddle.net/P2j3f/2

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

【解决方案1】：

我们做了类似的事情，并且遇到了同样的问题。我们创建/编辑/删除通过 ajax 获取数据的弹出窗口。不同的视图模型可能在同一页面上引用相同的模型，如果您打开多个弹出窗口（创建项目类型 1，创建项目类型 2），那么第二个和后续弹出窗口可能会被破坏（kendo ui 错误，因此下拉菜单现在只是一个纯文本框）。我们的解决方案是在弹出窗口关闭时删除所有 dom 条目，这样不同弹出窗口中的 id 之间就不会发生冲突。我们使用引导程序，所以它看起来像

<script type="text/javascript">
    $('body').on(
        // hook close even on bootstrap popup
        'hidden.bs.modal', '.modal',
        function () {
            $(this).removeData('bs.modal');
            $(this).find('.modal-content').html(''); // clear dom in popup
        });
</script>

注意我们的弹窗有一些外部的html元素和标识符，但是内容都在里面

<div class="modal-content"> ... </div>

【讨论】：

【解决方案2】：

听起来您正在使用部分页面作为 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();

此更改后的注意事项。如果您要从该部分发布表单，则需要将以下属性添加到控制器方法上的模型参数中，如下所示。这样绑定就正确发生了。

[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();

【讨论】：