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

Question

I am trying to hide my content by clicking the button. But when the page is loading, content is hiding but after finishing page load content is showed. This content doesn't hide. I am using Visual Studio 2017 community and asp.net/vb.net framework. But the same JQuery code is working on my text editor and my browser. Here is my sample code:

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

I am try to passing alert inside hide() and it is run successfully :

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

What is the problem? How can I solve this?

Answer 1

In case your are just using this button to hide/show your content on the client side (no server side calculation or something like that) use a normal input / button tag:

Replace this: <asp:Button ID="testbtn" runat="server" Text="hide me" />

With this line: <button type="button" id="testbtn">Hide me!</button>

As mentioned above this solution will only work if you don't need to submit any data.

Answer 2

What is the problem?

The button submits your form after the click so the page will be refreshed and the view will return to the default status.

How can I solve this?

You've several ways to change this behavior :

1. if you have got a control on the asp code you could remove the runat="server" to prevent the button from submitting :

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

2. You could simply add the return false; statement at the end of the event.

3. Another way is preventing the default behavior using preventDefault() like :

    $('#testbtn').click(function (e) { e.preventDefault(); $('.testcls').hide(); }); 

4. The one that I recommend to you is using UseSubmitBehavior :

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

5. Last choice is using the plain HTML code like :

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