This is a migrated thread and some comments may be shown as answers.

[Solved] How to display "loading"

1 Answer 224 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

TMLP asked on 18 Dec 2009, 12:12 AM

Hi,,

My aspx page takes quite long to load, so I want to display a loading image during my page is loading. I've found a Ajax sample from your site, but I am getting error..

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="display initial load.aspx.cs" Inherits="loadingImgTest.display_initial_load" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
               <script type="text/javascript">  
        
                    window.onload = function()  
        
                    {  
        
                        setTimeout(function() {  
        
                        window[ "<%= RadAjaxManager1.ClientID %>"].AjaxRequest("InitialPageLoad");  
        
                        }, 200);  
        
                    }  
        
                </script>   
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="ScriptManager1" runat="server" /> 
        
                <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="AjaxLoadingPanel1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                       <asp:Panel ID="Panel1" runat="server">  
        
                           <asp:Panel ID="Panel2" Visible="false" runat="server">  
        
                            My content:  
        
                          </asp:Panel> 
        
                       </asp:Panel> 
        
                       <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Width="75px">  
        
                           <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/network.PNG"/>  
        
                       </telerik:RadAjaxLoadingPanel>      
        
                <div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

here's CS file:

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            namespace loadingImgTest  
        
            {  
        
                public partial class display_initial_load : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                    }  
        
                    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
        
                    {  
        
                        if (e.Argument == "InitialPageLoad")  
        
                        {  
        
                            //simulate longer page load  
        
                            System.Threading.Thread.Sleep(2000);  
        
                            Panel2.Visible = true;  
        
                        }  
        
                    }  
        
                }  
        
            }

Here's the error message

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Could you help?
Thanks..

1 Answer, 1 is accepted

answered on 18 Dec 2009, 09:10 AM

Hi Loya,

Please try the following modification:

    
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                        window.onload = function() 
        
                        { 
        
                            setTimeout(function() 
        
                            { 
        
                                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");  
        
                            }, 200); 
        
                        }   
        
                    </script> 
        
                </telerik:RadCodeBlock>

I hope this helps
Johny