jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容

Posted 2023-05-08

【中文标题】jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容

【英文标题】：jQuery hide doesn't hide any content in vb.net/asp.net webform

【发布时间】：2019-01-15 11:06:58

【问题描述】：

我试图通过单击按钮来隐藏我的内容。但是页面加载时，内容是隐藏的，但是页面加载完成后会显示内容。此内容不隐藏。我正在使用 Visual Studio 2017 社区和 asp.net/vb.net 框架。但是相同的 JQuery 代码正在我的文本编辑器和浏览器上运行。 这是我的示例代码：

<p id="justp" class="testcls">Hi Hide me!</p>
    <asp:Button ID="testbtn" runat="server" Text="hide me" />
     <script>
        $(function () 
            $('#testbtn').click(function () 
                $('.testcls').hide();

            );
        );
    </script>

我尝试在 hide() 中传递警报，它运行成功：

$('.testcls').hide(alert("Hello"));

有什么问题？ 我该如何解决这个问题？

【问题讨论】：

当你点击按钮时，它会触发一个表单发布（PostBack）。那么客户端代码所做的所有更改都将丢失。

谢谢。我该如何解决这个问题？

为什么要发送表单帖子？是因为<asp>标签吗？

@ShiroiTora 因为runat="server" 属性，但仅仅删除它可能会导致其他问题。

@ShiroiTora，是的，不是的。 asp:Button 将生成 input type=submit。提交按钮将触发表单发布。

【参考方案1】：

如果您只是使用此按钮在客户端隐藏/显示您的内容（没有服务器端计算或类似的东西），请使用普通的 input / button 标签：

替换这个： <asp:Button ID="testbtn" runat="server" Text="hide me" />

用这条线： <button type="button" id="testbtn">Hide me!</button>

如上所述，此解决方案仅在您不需要提交任何数据时才有效。

【参考方案2】：

有什么问题？

该按钮在点击后提交您的表单，因此页面将被刷新，视图将返回默认状态。

我该如何解决这个问题？

您有几种方法可以改变这种行为：

如果您对 asp 代码有控制权，您可以删除 runat="server" 以防止按钮提交：

<asp:Button ID="testbtn" Text="hide me" />

您可以简单地在事件结束时添加return false; 语句。

另一种方法是使用preventDefault() 来防止默认行为，例如：

$('#testbtn').click(function (e) 
    e.preventDefault();

    $('.testcls').hide();
);

我推荐给你的是UseSubmitBehavior：

<asp:Button ID="testbtn" runat="server" UseSubmitBehavior="false" Text="hide me" />

最后的选择是使用纯 html 代码，例如：

<button type="button" id="testbtn">Hide me!</button>

【讨论】：

很抱歉，我正在尝试从您的答案中解决我的问题，但没有一个对我有用。

我已经用这段代码解决了我的问题<button type="button" id="testbtn">Hide me!</button> 但你的答案对我不起作用。