Question

假设我有.gif：

<img alt="" src="./wait.gif" />

我有一个标签：

<asp:Label ID="tbnotif" runat="server" ReadOnly="True" Text="" ></asp:Label>

还有一个按钮：

<asp:Button ID="Button1" runat="server" Text="Pubblica" OnClientClick="show_table();add_gif();" OnCommand="Button1_Click" />

我正在使用aspx页面，问题是：

我是否可以点击该按钮，并在同一时间用JavaScript显示.gif并从后面的代码更改标签？或者事情永远不会同时出现？

Answer 1

在我看来，你想在回发之间展示一个忙碌的动画GIF，是吗？

以下是我的工作方式（除非我使用的是具有自己的进度指示器服务器控件的更新面板）

<script type="text/javascript">
    window.onbeforeunload = function(){showGif();};
</script>

当页面由于回发而卸载（单击POST到服务器的按钮）时，显示gif图像。当新页面从服务器返回时，图像将消失，因为它现在是一个新页面。

更改标签是一项小操作，因此您可能永远不会看到图像，因为请求/响应会很快转变。对于测试，您可以在按钮处理程序中添加System.Threading.Thread.Sleep（3000）以模拟更长时间运行的进程。

修改

AJAX是你唯一的选择，但有许多方法。一种可能的解决方案：

将标签放在UpdatePanel服务器控件中，将按钮放在更新面板之外，但在aspx页面的更新面板的声明性标记中将其设置为AsyncPostbackTrigger。使用OnClientClick处理程序客户端显示gif，或使用JQuery将客户端点击处理程序附加到按钮。

ASPX

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AjaxLabel._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Label runat="server" ID="ajaxLabel">Initial value</asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="asyncButton" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

        <img id="theImage" src="img/success.png" style="display: none;" />

        <asp:Button runat="server" ID="asyncButton" Text="Client & Server Click" OnClientClick="showImage();" OnClick="asyncButton_Click" />

    </div>
    </form>

    <script type="text/javascript">

        function showImage() {

            document.getElementById('theImage').style.display = "block";
        }

    </script>

</body>
</html>

aspx.cs

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxLabel
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void asyncButton_Click(object sender, EventArgs e)
        {
            ajaxLabel.Text = "Server-side value";
        }
    }
}

同时执行javascript和asp.net渲染

1 个答案: