1

私が持っているとしましょう.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ページを使用しています。質問は次のとおりです。

ボタンをクリックすると同時に.gif、JavaScriptでを表示し、コードビハインドからラベルを変更できますか?それとも、物事が同時に表示されることはありませんか?

4

1 に答える 1

0

ポストバックの間に忙しいアニメーションGIFを表示したいようですが、そうですか?

これが私がそれを行う方法です(独自の進行状況インジケーターサーバーコントロールを持つ更新パネルを使用している場合を除く)

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

ポストバック(サーバーにPOSTするボタンをクリック)のためにページがアンロードされたら、gif画像を表示します。新しいページがサーバーから戻ってくると、新しいページになっているため、画像は消えます。

ラベルの変更は小さな操作であるため、要求/応答が非常に迅速に変わるため、画像が表示されることはおそらくありません。テストのために、ボタンハンドラーにSystem.Threading.Thread.Sleep(3000)を追加して、実行時間の長いプロセスをシミュレートできます。

編集

その場合、AJAXが唯一の選択肢ですが、多くの方法があります。考えられる解決策の1つ:

ラベルをUpdatePanelサーバーコントロールに配置し、ボタンを更新パネルの外側に配置しますが、aspxページの更新パネルの宣言型マークアップでAsyncPostbackTriggerとして設定します。クライアント側のOnClientClickハンドラーを使用するか、JQueryを使用してクライアント側のクリックハンドラーをボタンにアタッチしてgifを表示します。

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";
        }
    }
}
于 2013-02-12T13:19:15.263 に答える