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

【问题标题】：ASP.NET show div on button clickASP.NET 在按钮单击时显示 div
【发布时间】：2013-07-22 20:29:01
【问题描述】：

我试图在按钮单击时显示加载 div，但目前无法正常工作。

Javascript：

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

分区：

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

按钮：

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

div 设置为 runat server，这样我也可以通过代码更改其可见性。

【问题讨论】：

你有没有考虑过使用像BlockUI这样的jQuery插件？
你检查过ASP.NET生成的HTML中，按钮是否保留了aspx文件中指定的ID？当按钮是自定义用户控件的一部分时，我 100% 确定您在文件中看到的 ID 与页面中的 ID 不同。
注意：ID 是服务器控件，不 [通常] 与 ClientID 相同。 ClientID（又名 DOM ID）使用控件 ID、控件层次结构和映射规则来创建派生的 ClientID。
在javascript关闭的情况下从双方进行验证
你想做这个服务器端还是客户端？如果你想要客户端，你不需要使用onClick，因为它会在函数后面的代码中查找并运行它；而是使用onClientClick 并使您的jquery 成为具有名称的函数并调用该名称。如果您确实想要服务器端，请向我们展示服务器端代码。

标签： c# javascript asp.net html

【解决方案1】：

使用 onClientClick 作为 asp 按钮。然后制作你调用的jquery函数BtnSend_Click

如果你想通过客户端来做：

jQuery

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

ASP 按钮

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

如果你想通过服务器来做：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

我注意到的另一件事是你设置了Visible="false":

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

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

【讨论】：

它只是一个用于自定义 div 的 css 类。不过还是不行。
哦，我现在明白了，您为 div 做了 ClientID，但不是按钮！更新 sn-p
实际上你有 ClientIDMode 静态所以它可能不是那个，而是可见的错误问题。
你指的是哪一个？
指的是您设置为静态的 clientID。我删除了 visible="false" 并设置了 style="display:none;"但是单击按钮时仍不显示 div