在 UpdatePanel 中提交后隐藏 Div答案

【问题标题】：Div is hidden after submit in UpdatePanel在 UpdatePanel 中提交后隐藏 Div
【发布时间】：2013-12-23 23:27:50
【问题描述】：

我在UpdatePanel 中有一个div，当用户单击编辑链接时会显示此 div。要保存的提交按钮位于此 div 中。现在，当使用单击提交按钮时，一切都很好，只是这个 div 被自动隐藏了！可见性是使用 jQuery 的 show() 更改客户端。

为什么UpdatePanel 隐藏了我的div，即使它是我显示的？我尝试设置runat='server' 并启用视图状态，但我得到了相同的结果。

如何在提交之前告诉 UpdatePanelto leave thediv`？

这是一个显示问题的迷你项目：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <a href="#" id="edit-link">edit</a>
            </div>
            <div id="edit-div" style="display:none; border: 2px black solid;">
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

<script>
    $(document).ready(function(){
        $('#edit-link').on('click', function () {
            $('#edit-div').show();
        });
    });
</script>

提交按钮的代码：

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.UtcNow.ToString();
}

【问题讨论】：

标签： asp.net ajax webforms updatepanel

【解决方案1】：

这个问题最简单的解决方案是：-

不要使用jQuery来显示edit-div
使edit-div成为服务器控件
将您的<a href="#" id="edit-link">edit</a> 转换为<asp:LinkButton> 控件，并在其服务器端点击事件中显示您的编辑div

问题在于 UpdatePanel 正在根据页面的标记恢复原始状态； edit-div 不是服务器控件，您正在通过客户端脚本显示它，UpdatePanel 不知道这一点，并将始终返回原始标记。

有种方法可以让 jQuery 在这些场景中与 UpdatePanels 配合得很好，但它比上面的简单解决方案更复杂。

希望对您有所帮助。

【讨论】：