Почему Ajax запрашивает дубликат k-list-container Kendo DropDownList при каждом вызове? - PullRequest
Новая
       16

Почему Ajax запрашивает дубликат k-list-container Kendo DropDownList при каждом вызове?

0 голосов
/ 27 июня 2018

Я разрабатываю приложение 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 с этим идентификатором много раз.

Это обычная ошибка? Как я могу это исправить? Или где я не прав?

1 Ответ

0 голосов
/ 27 июня 2018

При отображении раскрывающегося списка кендо, в дополнение к разметке для видимой части элемента управления, он также создает разметку для части элемента управления всплывающего окна / раскрывающегося списка. Это то, чем являются эти div-ы "k-list-container k-popup ...". Эти div добавляются к телу, за пределами targetAjax div.

Когда вы заменяете содержимое targetAjax, «старая» видимая часть будет удалена и заменена «новой» видимой частью и , будет создано новое всплывающее окно. Так как «старое» всплывающее окно находится за пределами div targetAjax, с ним ничего не случится, если you не справится с этим, поскольку обработчик @Ajax не знает, что он существует ... и вы в конечном итоге получаете все больше и больше из этих осиротевших всплывающих окон.

Таким образом, всякий раз, когда вам нужно удалить «старый» виджет кендо, вам нужно самостоятельно очистить от всей дополнительной разметки, являющейся частью виджета, используя метод destroy () кендо DropdownList 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 удалить все лишние разметки, обработчики событий и т. д.

...