javascript ASP.NET 在按钮单击时显示 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17796786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:39:56  来源:igfitidea点击:

ASP.NET show div on button click

c#javascriptasp.nethtml

提问by user1986761

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

我试图在单击按钮时显示加载 div,但目前它不起作用。

Javascript :

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.

div 设置为 runat 服务器,以便我也可以通过代码更改其可见性。

回答by B-M

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

使用onClientClickfor asp 按钮。然后创建你调用的 jquery 函数BtnSend_Click

If you want to do it via Client side:

如果您想通过客户端执行此操作:

jQuery

jQuery

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

ASP Button

ASP按钮

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

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

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

回答by rtpHarry

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

我尝试添加一个阻止默认值,因为下面描述的代码会在加载 div 显示之前回发。

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

我注意到的另一件事是你已经设置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.

这意味着 div 不存在,因为它不是服务器端的输出。页面加载时查看视图源,它不会在那里和隐藏,只是不在那里。删除visible="false"并使用 CSS 隐藏它开始。

回答by Jim

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

ASP.Net AJAX 库有一个UpdateProgress控件,听起来很适合您的需要。