We help IT Professionals succeed at work.

asp.net ajax Update Panel/ Update Progress with Datalist

applefruit
applefruit asked
on
Medium Priority
3,029 Views
Last Modified: 2013-11-07
Hi there,

I have a simple datalist, however i will be loading in alot of images into them, so when during the page_load section, the images will take awhile to load. Instead of allowing my visitors to see the images loading 1 by 1, i want to set something like a buffer or wait time, so that during this period my visitors will see the loading words or an gif animation using ajax update panel and update progress control. And once all the images are loading it will show the full album right away.

However the main problem is that my datalist is loading in page_load time. So i am not sure what to fill up at this line of code to make it work:
<Triggers>
            <asp:AsyncPostBackTrigger  />
 </Triggers>

they require a contolid and event id, how should i put in the page_load event here?

Am i doing this the right way? Can i use ajax controls in this example? need some advice thanks.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        
        <Triggers> 
            <asp:AsyncPostBackTrigger  />
           
        </Triggers>
 
        <ContentTemplate>    
           
            <asp:DataList ID="dlPhotos" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" HorizontalAlign="Left" CellPadding="5" CellSpacing="1">       
                <ItemTemplate>
                    <asp:ImageButton ID="imgItem" runat="server" ImageUrl='<%# String.Concat("~/photos/", Eval("imagePath")) %>' PostBackUrl='<%# "PhotoGallery.aspx?albumId="+DataBinder.Eval(Container.DataItem, "albumId")%>' />
                    <br />
                    <asp:Label ID="lblAlbumName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "albumName") %>'></asp:Label>
                    <br />
                    <asp:Label ID="lblalbumId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "albumId") %>' Visible="False"></asp:Label>
                </ItemTemplate>
            </asp:DataList>
            
        </ContentTemplate>
     </asp:UpdatePanel>
 
     <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
        <ProgressTemplate>Please wait... Loading Datalist...</ProgressTemplate> 
    </asp:UpdateProgress> 
 
CODE BEHIND
------------
 
protected void Page_Load(object sender, EventArgs e)
    {
        PopulateAlbum();
    }
 
    private void PopulateAlbum()
    {
        if (Request.QueryString["categoryId"] != null)
        {
            int categoryId = Convert.ToInt32(Request.QueryString["categoryId"]);
            PagedDataSource objPds = new PagedDataSource();
            DataView dv = new DataView(AlbumAccess.GetAlbumAllViaCategoryId(categoryId));
            objPds.DataSource = dv;
 
            dlPhotos.DataSource = objPds;
            dlPhotos.DataBind();
        }         
    }

Open in new window

Comment
Watch Question

No, you can't intercept the Page_Load function in the Triggers, that section is only for controls doing postbacks at runtime.

You would want to use javascript to display a div layer over the datalist that basically hides it, and displays "Loading...", and then after the images are loaded you would hide the div layer.

You could put a javascript function in the body OnLoad function to hide the div layer.

Author

Commented:
hi thanks for the reply. Sorry but I have no idea how to go  about
Doing the java script stuff that you jusy mentioned. Could you give me an example and some tutorials that I can read to further understand how to implement it? Thanks

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.