• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2975
  • Last Modified:

asp.net ajax Update Panel/ Update Progress with Datalist

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:
            <asp:AsyncPostBackTrigger  />

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">
            <asp:AsyncPostBackTrigger  />
            <asp:DataList ID="dlPhotos" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" HorizontalAlign="Left" CellPadding="5" CellSpacing="1">       
                    <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>
     <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
        <ProgressTemplate>Please wait... Loading Datalist...</ProgressTemplate> 
protected void Page_Load(object sender, EventArgs e)
    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;

Open in new window

  • 2
1 Solution
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.
applefruitAuthor 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now