Kendo UI 窗口使服务器控制失去价值答案

【问题标题】：Kendo UI window making server control to loose valuesKendo UI 窗口使服务器控制失去价值
【发布时间】：2016-01-25 12:02:27
【问题描述】：

我在我的 aspx 页面中使用Kedo UI 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 窗口所做的 DOM 更改有关，但不确定。有人可以解释一下，并提供任何解决方法...

【问题讨论】：

标签： asp.net kendo-ui telerik postback

【解决方案1】：

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

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

请检查以下代码 sn-p 的行为，您将了解为什么“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>

如果有任何问题，请告诉我。

【讨论】：

啊！！对...有什么解决方法吗？可能正在使用其他一些提供插件而不是 Kendo UI 的弹出窗口？你有什么想法吗？
我只知道两个 Javascript/Jquery 插件（Kendo-UI、Jquery-UI）并且行为也相同。我们必须从 hiddenfield/cookie 中手动存储和检索文本框值。

【解决方案2】：

我找到了！ Kendo 为这个问题提供了一个优雅的解决方案。这是一个配置appendTo。使用它，您可以定义窗口应附加在 DOM 的哪个元素下。默认情况下它必须是正文，因此它在“表单标签之后”附加，只是将其更改为我的表单以使其附加到我的表单元素，现在它工作得很好。

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

【讨论】：