c# - ASP.NET show div on button click - Stack Overflow

admin管理员组

文章数量:1324621

am trying to show a loading div on button click, but it is not working at the moment.

Javascript :

<script type="text/javascript">
        $(document).ready(function (e) {      
            $('#BtnSend').click(function () {
                $('#<%= loading.ClientID %>').toggle("slow");
            });
        });
    </script>

Div:

<div id="loading" class="Loading" runat="server" visible="false">
  <div class="loadingImg">
    <img src="../Images/loading.gif" alt="loading" />
    </div>
  </div>

Button:

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
            onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

the div is set to runat server so that I can change its visibility also through code.

am trying to show a loading div on button click, but it is not working at the moment.

Javascript :

<script type="text/javascript">
        $(document).ready(function (e) {      
            $('#BtnSend').click(function () {
                $('#<%= loading.ClientID %>').toggle("slow");
            });
        });
    </script>

Div:

<div id="loading" class="Loading" runat="server" visible="false">
  <div class="loadingImg">
    <img src="../Images/loading.gif" alt="loading" />
    </div>
  </div>

Button:

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
            onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

the div is set to runat server so that I can change its visibility also through code.

• c#
• javascript
• asp
• html

Share Improve this question Follow asked Jul 22, 2013 at 20:29 user1986761user1986761 22911 gold badge77 silver badges2020 bronze badges 10

• Have you considered using a jQuery plugin like BlockUI? – Karl Anderson Commented Jul 22, 2013 at 20:30
• Did you check whether in the HTML generated by ASP.NET, the button retains the ID specified in the aspx file? I am 100% sure that the ID you see in the file is not the same one it'll have in the page when the button is part of a custom user control. – Geeky Guy Commented Jul 22, 2013 at 20:30
• Note: The ID is a server control is not [usually] the same as the ClientID. The ClientID (aka DOM ID) uses the control ID, the control hierarchy, and mapping rules to create the derived ClientID. – user2246674 Commented Jul 22, 2013 at 20:32
• from both sides for validation in case javascript is turned off – user1986761 Commented Jul 22, 2013 at 20:35
• Do you want to do this server or client side? If you want client side you need to not use the onClick because it will look in the code behind for the function and run that; instead use onClientClick and make your jquery a function with a name and call the name. If you do want server side, please show us the server side code. – B-M Commented Jul 22, 2013 at 20:41

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

Use the onClientClick for the asp button. Then make the jquery function that you ahve called BtnSend_Click

If you want to do it via Client side:

jQuery

function BtnSend_Click () {
     $('#<%= loading.ClientID %>').toggle("slow");
}

ASP Button

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
            onClientClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

If you want to do it via the server:

C#

protected void BtnSend_Click(object sender, EventArgs e){
     loading.Visibility = 'visible' //not sure on syntax to show it in code behind off the top my head
}

ASP Button

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
            onClick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

The ASP.Net AJAX library has an UpdateProgress control that sounds like it would fit your needs.

I've tried adding in a prevent default, as the code as described below would postback before the loading div was shown otherwise.

<script type="text/javascript">
    $(document).ready(function (e) {      
        $('#<%= BtnSend.ClientID %>').click(function (e) {
            e.preventDefault();
            $('#<%= loading.ClientID %>').toggle("slow");
        });
    });
</script>

Another thing I've noticed is you have set Visible="false":

<div id="loading" class="Loading" runat="server" visible="false">

This means the div doesn't exist as its not output from the server side. Look in the view source when the page loads, it wont be there and hidden, its just not there. Remove the visible="false" and use CSS to hide it to start off with.

本文标签： cASPNET show div on button clickStack Overflow