Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

turn graphic on/off with c# codebehind

Posted on 2010-01-08
15
Medium Priority
?
308 Views
Last Modified: 2012-08-13
I have an aspx page in c# 2008.  

I have a combo box and a list box.  

when the combo box selection changes, the listbox gets loaded with values from the server.

I am doing partial updates using update panel with a post-back trigger tied to the combo box.

I want to add a graphic, which is just a small animated gif, which would be visible while the list box is being loaded (which can take some time).

The graphic is in the update panel, but I can't change it's visiblity either with javascript or from the function filling the list box.

any help appreciated
0
Comment
Question by:dhenderson12
  • 6
  • 4
  • 3
  • +1
15 Comments
 
LVL 33

Expert Comment

by:Todd Gerbert
ID: 26214255
There's an UpdateProgress control you can look into - basically it'll show a DIV while the update's running (which can contain your GIF), and then hide it again after the Update's complete.
0
 
LVL 8

Expert Comment

by:Jon500
ID: 26214259
Can you please show how you have your graphic coded in your update panel? Is it possible that you have not referenced your graphic correctly? (Try to use the same graphic reference in, say, an asp:ImageButton and verify that the graphic is in fact render-able as coded.)

Regards,
Jon500
0
 
LVL 33

Accepted Solution

by:
Todd Gerbert earned 2000 total points
ID: 26214297
This is code from my application.  The UpdateProgress is *outside* the UpdatePanel.

I've explicitly set some values on the <div> to cause it to appear over top of and hide some other controls on the page.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
	<ProgressTemplate>
		<div style="left: 14px; width: 386px; position: absolute; top: 20px;
		height: 259px; filter: alpha(opacity=70); vertical-align: middle; background-color: #b4b4b4; text-align: center; font-weight: bold; font-size: x-large; z-index:999">
			<br />
			<br />
			<br />
			<br />
			<img src="../PhoneList/loading.gif" width="16" height="16" />
			Updating...
		</div>
	</ProgressTemplate>
</asp:UpdateProgress>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:roeib
ID: 26214418
here is a gr8 article to read:

http://www.codeproject.com/KB/ajax/UpdateProgress.aspx

please read the following code sample:

http://www.codeproject.com/KB/ajax/UpdateProgress/AJAXUpdateProgress.zip

hope this helps

second option is you can use JQuery :

http://www.mikesdotnetting.com/Article/102/Lazy-Loading-jQuery-Tabs-with-ASP.NET

this is a procedure called Lazy Load.

hope this helps

0
 

Author Comment

by:dhenderson12
ID: 26273890

I tried the code that was posted, but without an success.  What am I doing wrong here?  (I included the body section of the page below)

<body>
   <form id="ProjectForm" runat="server">
   <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>    
   
   <div id="ProjectList">
      <asp:DropDownList ID="cboProjects" runat="server" Height="20px" Width="150px" AutoPostBack="True"
         Font-Names="Verdana" Font-Size="Smaller"
         OnSelectedIndexChanged="cboProjects_SelectedIndexChanged">
      </asp:DropDownList>
      &nbsp;&nbsp;&nbsp;
     
   </div>
   &nbsp;
   <asp:Panel ID="PanelProject" runat="server" BorderColor="#3366CC" BorderStyle="Ridge"
                  ScrollBars="Both" BorderWidth="1px">


      <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanelProject">
           <ProgressTemplate>
                   <div style="left: 14px; width: 386px; position: absolute; top: 20px;
                   height: 259px; vertical-align: middle; background-color: #b4b4b4; text-align: center; font-weight: bold; font-size: x-large; z-index:999">
                           <br />
                           <br />
                           <br />
                           <br />
                           <img src="images/pb1.gif" width="205px" height="16px" alt=""/>
                           
                   </div>
           </ProgressTemplate>
      </asp:UpdateProgress>
     
      <asp:UpdatePanel ID="UpdatePanelProject" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
            <asp:TreeView ID="tvProject" runat="server" BorderStyle="None" Font-Names="Verdana"
               Font-Size="Smaller" NodeIndent="15" ShowCheckBoxes="All">
               <SelectedNodeStyle BackColor="#000099" ForeColor="Yellow" />
            </asp:TreeView>
         </ContentTemplate>
         <Triggers>
            <asp:AsyncPostBackTrigger ControlID="cboProjects" />
         </Triggers>
      </asp:UpdatePanel>  
     
    </asp:Panel>
</body>
0
 
LVL 3

Expert Comment

by:roeib
ID: 26273939
what is the problem with the code what are you reciving
can u attach your code so i can  do so by seeing only the asp side.

by the asp side everything looks fine
0
 
LVL 8

Expert Comment

by:Jon500
ID: 26274383
Is your gif an animated GIF? If so, do you have "Play animations in web pages" enabled in your IE browser (Tools|Internet Options)?

Regards,
Jon
0
 

Author Comment

by:dhenderson12
ID: 26274773
yes, play animations is enabled.  as far as what happens, nothing happens.  in design mode the div is displayed along with the animated gif file.  when running, the div is never displayed at all.  is there another "hook" that needs to be specified?
0
 

Author Comment

by:dhenderson12
ID: 26274796
one other note: the combo box is filled from a query.  the value in the combo box loads the list box from another query.
0
 
LVL 8

Expert Comment

by:Jon500
ID: 26275988
Replace your
 <img src="images/pb1.gif" width="205px" height="16px" alt=""/>

with
<div style="background-color: red"><div>

Do you see red? If so, maybe (as I had suggested previously) you are referencing your image incorrectly. Is this web form in your web project's root folder?

Cheers,
Jon
0
 

Author Comment

by:dhenderson12
ID: 26285988
OK, almost there.  The updateprogress control wouldn't work until I actually added it from the toolbar.  But some interesting behavior ....

It will display the animated graphic when I select something from the combo box and it is getting the items to display, however the graphic stops for a couple seconds just before the list box items are displayed.  I thought that partial page updates allowed the two events to occur at the same time?  
0
 
LVL 33

Expert Comment

by:Todd Gerbert
ID: 26286369
So you select an item from the list box, firing cboProjects_SelectedIndexChanged, and if that event handler takes 10 seconds you're saying that you see the GIF for 8 seconds?
0
 

Author Comment

by:dhenderson12
ID: 26286575

I just realized that this is a browser problem (it can't walk and chew gum at the same time!).

The updateprogress control is working just like you all said it would, and it displays the anmiamtion just fine, so I guess the question is closed at this point.

The problem is that the animation stops running, just shows a still image, while the list box inside the update panel is rendering.  So it looks like a thread issue, as if it needs a second thread to display the animation until the updateprogress control ends.
0
 
LVL 8

Expert Comment

by:Jon500
ID: 26286696
I don't like animated gifs because they seem to get interrupted to easily. Just for kicks, can you try a Flash animation instead--just to see if that solves the "threading" issue?
0
 

Author Comment

by:dhenderson12
ID: 26287247
no, flash is not an option.  I'll let you know what I come up with on the animation.  thanks for your help
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
The Relationships Diagram is a good way to get an overall view of what a database is keeping track of. It is also where relationships are defined. A relationship specifies how two tables connect to each other. As you build tables in Microsoft Ac…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question