CODEWITHSUNDEEP
asp.netjavascriptjquerygif
Jebli
Jebli

Reputation: 2825

How to show/hide gif image when button click in asp.net

I have a asp page where i have a button.When i click on the button i should display a gif image.When the process is completed ,again the images has to be hidden.

Please find my below code behind 

<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" language="javascript">

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="display: none" id="dvloader">
            <img src="Images/process_status.gif" /></div>
        <asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" />
    </form>
</body>

Please find the below code behind

 protected void btnLoad_Click(object sender, EventArgs e)
    {
       // Show the gif image
        System.Threading.Thread.Sleep(5000);
        // hide the gif image
    }

How can i achive this ?

Thanks.

Upvotes: 1

Views: 10070

Answers (2)

matpol
matpol

Reputation: 3074

You could actually apply the event to the element without using the inline event handler.

Using jquery you could say:

 $(document).ready(function() {

$('#btnLoad').click(function(){alert('JavaScript to show GIF goes here...');});


});

This assumes your button has an id of btnload.

Upvotes: 0

Vinz
Vinz

Reputation: 2005

The method in your example is server-sided. What you want to do is on the client side and must be done in javascript therefore.

You could use the client-sided onclick-event to show the GIF after the button has been clicked. You can set the client-sided onclick-event somwhere in the Page-Load method for example:

btnLoad.Attributes.Add("onclick", "alert('JavaScript to show GIF goes here...');");

After the PostBack, the GIF will be hidden again automatically...

Upvotes: 3

Related Questions