asp.net source code blog

I've recently had the following issues:

I wanted to add 14 DataSources/GridViews (Each of them connects to different database) on a single page.

When I added them (using the standard way) the page began to loads very very slow. So, I decided:

1. the main content of the page (header, menu, footer, etc.) to load first

2. the DataSources/GridViews to become loading one by one.

Here's the solution of my issue:

1. Add user control for every page part:

I created ascx control for every page part. (the DataSources/GridViews were almost the same only differs by database name and table name, so I could use one control for all DataSources/GridViews).

ex.

<asp:Panel runat="server" ...>
   <asp:UpdatePanel runat="Server" ID="updateRSS" UpdateMode="Conditional">
     <contenttemplate>
        <asp:MultiView runat="server" ID="_multiView" ActiveViewIndex="0" >

          <asp:View runat="Server" ID="view1">
             Loading . . .
          </asp:View>

         <asp:View runat="server" ID="view2">
           <asp:GridView ID="_msgsGV" DataSourceID="_msgsDS" runat="server">
              . . .
           </asp:GridView>
           <asp:SqlDataSource ID="_msgsDS" runat="server">
             . . .
           </asp:SqlDataSource>
         </asp:View>

         <asp:View runat="Server" ID="view3">
           Unable to load content :(
         </asp:View>

        </asp:MultiView>

        <asp:Timer ID="_timerMessages" Interval="1" OnTick="OnTimerMessagesTick" runat="server" />
      </contenttemplate>
     </asp:UpdatePanel>
</asp:Panel>

We have to put all control's content in a separate UpdatePanel. To show loading, GridView/SqlDataSource, 'unable to load page' I use Views in a MultiView.

We need asp:Timer too. in the OnTick event handler will be the real filling of the GridView/SqlDataSource.

2. Handle the OnTick event:

protected void OnTimerMessagesTick(object s, EventArgs e)
{
     try
    {
         //t Display the loaded GridView/SqlDataSource
         _mv.ActiveViewIndex = 1;
    }
    catch (Exception)
   {
       //t Diplay the "unable to load"
       _mv.ActiveViewIndex = 2;
    }

    //Important!
    _timerMessages.Enabled = false;
}

In the OnTick event we do two things:

First, change the _mv' ActiveViewIndex to show the GridView/SqlDataSource.

and second (very important) Disable the asp:Timer, we do it to disable another GridView/SqlDataSource reloading.

3. Adding the ascx control to a aspx page:

<%@ Page Language="C#" . . . %>
. . .
<%@ Register Src="~/controls_path/ourControl.ascx" TagName="our_cotrol" TagPrefix="usr" %>

<asp:ScriptManager . . . />

 . . .

<script type="text/javascript">
   function scrollTo()
  {
      return;
  }
</script>

. . .

<usr:our_cotrol ID="some_id" . . . ></usr:our_cotrol>

We add the ascx control in the standard way.

NOTE: Before some of the timer fires, sometimes the user "scrolled down" the page and then the Ajax Timer fires and the "scroll position" of the page is changed again to the top.

So, we over-ride the javascript function that is called by adding the code:

<script type="text/javascript">
   function scrollTo()
  {
      return;
  }
</script>

You can see the working example of the article HERE

That's all :)