时间戳

首页 > 解决方案 > 为什么 Ajax 在每次调用时都请求重复的 Kendo DropDownList k-list-container？

asp.net-mvc - 为什么 Ajax 在每次调用时都请求重复的 Kendo DropDownList k-list-container？

问题描述

我正在开发一个ASP.NET MVC应用程序。

在部分中，我有我的Kendo DropDownList：

@model MyNamespace.Models.MyModel
@(Html.Kendo().DropDownListFor(m => m.CompanyId)
    .DataTextField("Description")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCompanies", "WebAPI");
        });
    })
)

这是它的基本Controller：

public ActionResult Test()
{
    return CorrectView("Test");
}

在布局中，我在服务器上做了一些 Ajax 请求，基本的ActionLink：

<!DOCTYPE html>
<html>
<head>
    <script src="/Scripts/plugins/jquery-2.2.3.js"></script>
    <script src="/Scripts/plugins/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/kendo/2016.1.112/kendo.all.js"></script>
</head>

<body>
    @Ajax.ActionLink("Ajax Request", "Test", "Partners", new AjaxOptions { HttpMethod = "get", UpdateTargetId = "targetAjax" })

    <div id="targetAjax">
        @RenderBody()
    </div>
</body>
</html>

问题是每次我打电话时，它都会复制Kendo DropDownList k-list-container. 因此，如果我提出 10 个请求，我将得到：

<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>
<div class="k-list-container k-popup k-group k-reset" id="CompanyId-list" data-role="popup" style="display: none; position: absolute;"></div>

这是一个问题，因为它在 DOM 中多次复制该 ID。

这是一个常见的Bug吗？我该如何解决？或者我哪里错了？

标签： asp.net-mvckendo-uidropdown

解决方案

在渲染 kendo 下拉列表时，除了对控件的可见部分进行标记外，它还会为控件的弹出/下拉/列表部分创建标记。这就是那些“k-list-container k-popup ...” div 的内容。这些 div 附加到主体，在 targetAjax div之外。

当您替换 targetAjax 的内容时，“旧”可见部分将被删除并替换为“新”可见部分，并且将创建一个新的弹出窗口。由于“旧”弹出窗口位于 targetAjax div 之外，除非您处理它，否则不会发生任何事情，因为 @Ajax 处理程序不知道它的存在……您最终会得到越来越多的这些孤立弹出窗口.

因此，每当您需要删除“旧”kendo 小部件时，您需要使用 kendo DropdownList 的 destroy() 方法自行清理作为小部件一部分的所有额外标记https://docs.telerik.com /kendo-ui/api/javascript/ui/dropdownlist/methods/destroy或 kendo.destroy() 方法https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/destroy 删除所有额外的标记、事件处理程序等。

推荐阅读