ASP.NET中点击单选按钮时如何显示加载图片？

你的单选按钮开启了AutoPostBack="True"，点击会触发服务器回发，我们需要在点击瞬间显示加载图，回发完成后自动隐藏，具体实现步骤如下：

1. 给单选按钮添加客户端点击事件 #

给每个<asp:RadioButton>控件添加OnClientClick属性，触发显示加载图的函数：

<asp:RadioButton CssClass="checkmark" ID="RadioButton1" runat="server" Text="1" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />

所有单选按钮都需要加上这个属性，确保点击任意一个都会触发加载图显示。

2. 添加JavaScript脚本控制加载图显示/隐藏 #

在页面的<form>标签内先添加ScriptManager（ASP.NET AJAX必备控件），然后在页面底部添加脚本：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<!-- 你的fieldset和加载div代码保持不变 -->

<script type="text/javascript">
    // 显示加载图
    function showLoading() {
        document.querySelector('.loading').style.display = 'block';
    }

    // 监听回发完成事件，隐藏加载图
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
        document.querySelector('.loading').style.display = 'none';
    });
</script>

3. 备选方案（无需ScriptManager） #

如果不想使用ScriptManager，可以在服务器端的Group1方法中，回发完成后注册脚本隐藏加载图：

protected void Group1(object sender, EventArgs e)
{
    // 这里写你的业务逻辑代码

    // 注册脚本隐藏加载图
    ClientScript.RegisterStartupScript(this.GetType(), "hideLoading", "document.querySelector('.loading').style.display = 'none';", true);
}

完整修改后代码示例 #

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<fieldset class="feildset">
    <asp:Label ID="Label1" runat="server" Text="Output" Font-Bold="True" Font-Size="Larger"></asp:Label><br />
    <div class="radioBtn">
        <asp:RadioButton CssClass="checkmark" ID="RadioButton1" runat="server" Text="1" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />
        <br />
        <asp:RadioButton CssClass="checkmark" ID="RadioButton2" runat="server" Text="2" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />
        <br />
        <asp:RadioButton CssClass="checkmark" ID="RadioButton3" runat="server" Text="3" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />
        <br />
        <asp:RadioButton CssClass="checkmark" ID="RadioButton4" runat="server" Text="4" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />
        <br />
        <asp:RadioButton CssClass="checkmark" ID="RadioButton5" runat="server" Text="5" OnCheckedChanged="Group1" AutoPostBack="True" GroupName="Ktek" OnClientClick="showLoading();" />
        <br />
    </div>
</fieldset>

<div class="loading" style="margin-top: 100px; margin-left: 330px; display: none">
    <asp:Image ID="Image2" runat="server" ImageUrl="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif?20151024034921" />
</div>

<script type="text/javascript">
    function showLoading() {
        document.querySelector('.loading').style.display = 'block';
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
        document.querySelector('.loading').style.display = 'none';
    });
</script>

内容的提问来源于stack exchange，提问作者Siddhesh Nikam