Question

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

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

如何在提交之前告诉UpdatePanel to leave the div`？

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

<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();
}

Answer 1

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

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

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

在这些场景中，有方法可以让jQuery在UpdatePanels中发挥出色，但它比上面的简单解决方案更具参与性。

希望有所帮助。

在UpdatePanel中提交后隐藏Div

1 个答案: