Kendo UI window 使服务器控制松散值

Question

我在我的 aspx 页面中使用 Kedo UI Window，如下所示。 window 内的服务器控件在回发后失去了它的价值。我知道 Kendo 是一个客户端库，不负责我的服务器端控件的状态管理，但为什么它会导致它们失去价值？？？

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test3.aspx.cs" Inherits="Test3" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
    <form runat="server" id="form1">
        <div id="dialog">
            <asp:TextBox runat="server" ID="TxtIn" />
        </div>

        <asp:TextBox runat="server" ID="TxtOut" />

        <asp:Button runat="server" ID="Btn" Text="Submit" />
    </form>
    <script>
        $("#dialog").kendoWindow({
            actions: ["Minimize", "Maximize"]
        });
        $("#dialog").data("kendoWindow").center();
    </script>
</body>
</html>

在上面的代码片段中，点击 Btn 回发，之后 TxtOut 保留其值，但 TxtIn 失去它，为什么我不清楚。我相信这与 Kendo window 所做的 DOM 更改有关，但不确定。有人可以解释一下吗，并提供任何解决方法...

Answer 1

当您将任何 div 元素转换为 Kendo-Window 时，它会从表单标签中删除 div 并创建新的 div 并添加您现有的 div在里面。

请查看下面的屏幕截图了解更多详情。

请检查以下代码片段的行为，您将了解为什么 'TxtIn' 文本框在回发后不保留其值。

<body>
    <form runat="server" id="form1">
        <asp:TextBox runat="server" ID="TxtOut" />

        <asp:Button runat="server" ID="Btn" Text="Submit" />
    </form>
    <input type="text" id="TxtIn" /> 
</body>

如有任何疑问，请告诉我。

Answer 2

我找到了！ Kendo 为这个问题提供了一个优雅的解决方案。这是一个配置 appendTo。使用它，您可以定义 DOM 的哪个元素应附加 window。默认情况下，它必须是正文，因此它附加到它 "after form tag"，只是将它更改为我的表单以使其附加到我的表单元素，现在效果很好。

$("#dialog").kendoWindow({
  actions: ["Minimize", "Maximize"],
  appendTo: "form#form1" // This one does the magic
});

Kendo UI window 使服务器控制松散值

Kendo UI window making server control to loose values

asp.net

kendo-ui

telerik

postback