?
Solved

asp.net ajax Update Panel/ Update Progress with Datalist

Posted on 2009-02-15
4
Medium Priority
?
2,932 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

0
Comment
Question by:applefruit
  • 2
3 Comments
 
LVL 15

Expert Comment

by:aibusinesssolutions
ID: 23645884
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.
0
 

Author Comment

by:applefruit
ID: 23647460
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
0
 
LVL 15

Accepted Solution

by:
aibusinesssolutions earned 2000 total points
ID: 23649602
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Loops Section Overview
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Suggested Courses
Course of the Month16 days, 17 hours left to enroll

862 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