Perform at same time javascript and asp.net rendering

Question

Suppose I have a .gif:

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

And I have a Label:

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

And a button:

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

I'm using aspx pages, the question is:

Can I click on the button and at same TIME show the .gif with JavaScript and change the Label from code behind? Or will things never be shown at same time?

hollystyles · Accepted Answer · 2013-02-12T14:11:23.453

It looks to me like you want to show a busy animated gif between postbacks, is that right?

Here's how I do it (unless I'm using update panels which have their own progress indicator server control)

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

When the page unloads because of a postback (click the button which POSTs to the server), reveal the gif image. When the new page comes back from the server the image will disappear because it's now a new page.

Changing a label is a small operation, so you will probably never see the image as the request/response will turn around very quickly. For testing you can add a System.Threading.Thread.Sleep(3000) in your button handler to simulate a longer running process.

EDIT

AJAX is your only option then, but there are many many ways. One possible solution:

Put the label in an UpdatePanel server control, place button outside of update panel, but set it as an AsyncPostbackTrigger in the update panel's declarative mark-up in the aspx page. Show the gif with OnClientClick handler client-side or using JQuery to attach a client-side click handler to the button.

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";
        }
    }
}

It looks to me like you want to show a busy animated gif between postbacks, is that right? No... On click button i want show a gif and change a lable , label is changed on server side with code behind and gif with client side .. and i think them will never show toghter ... — FrankTan, Feb 12 '13 at 13:34
yes i m trying jquery like this http://stackoverflow.com/questions/348689/jquery-ajax-with-asp-net-webmethod-returning-entire-page do you think it will works ? — FrankTan, Feb 12 '13 at 14:00
Yes the JQuery way you link to would work too and is in fact the same thing. — hollystyles, Feb 12 '13 at 14:29
I want add another solution to this problem it is a free asp library http://www.ajaxtutorials.com/ajax-control-toolkit-tutorials/ajax-control-toolkit-tutorails-using-dynamicpopulate-extender-c-asp-net/ — FrankTan, Feb 18 '13 at 16:31

Perform at same time javascript and asp.net rendering

1 Answers1