Question

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

<%@ 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>

在上面的Snippet中点击 Btn 回发，之后 TxtOut 保留了它的值，但 TxtIn 丢失它，为什么是我不清楚。我相信它与Kendo窗口所做的DOM更改有关，但不确定。有人可以解释，并提供任何工作......

Answer 1

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

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

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

<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的哪个元素。默认情况下它必须是body，因此它在“form form”之后附加到它，只是将其更改为我的表单，使其附加到我的表单元素，而且它现在工作得很好。

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

Kendo UI窗口使服务器控制松散值

2 个答案: