Multiple updatepanels --> loading and displaying one by one

Question

Here I put my sample code. Please correct the mistake. In the sample code I want to load the update panels “UpdatePanelBodySub1”, “UpdatePanelBodySub2”, “UpdatePanelBodySub3” and “UpdatePanelBodySub4” one by one. If one updatepanel loaded all records then immediately that will come to display, then next updatepanel will start work … . Please help me. (Visual Studio 2008 and Framework 3.5)

Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="~/MainControl.ascx" TagPrefix="UsrCtrl" TagName="MainControl" %>

Page Main -- Mutiple Updatepanels

        <UsrCtrl:MainControl ID="mainControl1" runat="server" EnableViewState="true" />
    </div>
</form>

Default.aspx.cs using System; using System.Web.UI; using System.Web.UI.WebControls;

public partial class _Default : Page { /// /// /// /// protected override void OnPreRenderComplete(EventArgs e) { TextBox txtIsSearch = (TextBox) mainControl1.FindControl("headerControl1").FindControl("txtIsSearch");

    if (Convert.ToBoolean(txtIsSearch.Text))
    {
        UpdatePanel updatePanelBodySub;

        updatePanelBodySub =
            (UpdatePanel)
            mainControl1.FindControl("bodyControl1").FindControl("bodySubControl1").FindControl(
                "UpdatePanelBodySub1");
        updatePanelBodySub.DataBind();

        updatePanelBodySub =
            (UpdatePanel)
            mainControl1.FindControl("bodyControl1").FindControl("bodySubControl2").FindControl(
                "UpdatePanelBodySub2");
        updatePanelBodySub.DataBind();

        updatePanelBodySub =
            (UpdatePanel)
            mainControl1.FindControl("bodyControl1").FindControl("bodySubControl3").FindControl(
                "UpdatePanelBodySub3");
        updatePanelBodySub.DataBind();

        updatePanelBodySub =
            (UpdatePanel)
            mainControl1.FindControl("bodyControl1").FindControl("bodySubControl4").FindControl(
                "UpdatePanelBodySub4");
        updatePanelBodySub.DataBind();

        txtIsSearch.Text = "false";
    }

    base.OnPreRenderComplete(e);
}

}

MainControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MainControl.ascx.cs" Inherits="MainControl" %>

<%@ Register Src="~/HeaderControl.ascx" TagPrefix="UsrCtrl" TagName="HeaderControl" %> <%@ Register Src="~/BodyControl.ascx" TagPrefix="UsrCtrl" TagName="BodyControl" %>

    <asp:UpdateProgress ID="UpdateProgressMain" runat="server" AssociatedUpdatePanelID="UpdatePanelMain" DisplayAfter="50">
        <ProgressTemplate>
            <img src="loading.gif" alt="Loading ... " title="Loading ... " />
        </ProgressTemplate>
    </asp:UpdateProgress>

    <h1>Search data from 4 different databases</h1>

    <UsrCtrl:HeaderControl ID="headerControl1" runat="server" EnableViewState="true" />

    <UsrCtrl:BodyControl ID="bodyControl1" runat="server" EnableViewState="true" />

</ContentTemplate>

MainControl.ascx.cs

using System;

public partial class MainControl : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) {

}

}

HeaderControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderControl.ascx.cs" Inherits="HeaderControl" %>

Search Criteria

HeaderControl.ascx.cs

using System; using System.Web.UI.WebControls;

public partial class HeaderControl : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) {

}
protected void btnSearch_Click(object sender, EventArgs e)
{
    TextBox txtPageNumber;

    txtPageNumber =
        (TextBox)
        this.Parent.Parent.Parent.FindControl("bodyControl1").FindControl("bodySubControl1").FindControl(
            "txtPageNumber");
    // this                         --> ASP.hedercontrol_ascx
    // this.Parent                  --> System.Web.UI.Control
    // this.Parent.Parent           --> System.Web.UI.UpdatePanel
    // this.Parent.Parent.Parent    --> ASP.maincontrol_ascx

    txtPageNumber.Text = "1";

    txtPageNumber =
        (TextBox)
        this.Parent.Parent.Parent.FindControl("bodyControl1").FindControl("bodySubControl2").FindControl(
            "txtPageNumber");
    txtPageNumber.Text = "1";

    txtPageNumber =
        (TextBox)
        this.Parent.Parent.Parent.FindControl("bodyControl1").FindControl("bodySubControl3").FindControl(
            "txtPageNumber");
    txtPageNumber.Text = "1";

    txtPageNumber =
        (TextBox)
        this.Parent.Parent.Parent.FindControl("bodyControl1").FindControl("bodySubControl4").FindControl(
            "txtPageNumber");
    txtPageNumber.Text = "1";

    txtIsSearch.Text = "true";
}

}

BodyControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BodyControl.ascx.cs" Inherits="BodyControl" %>

<%@ Register Src="~/BodySubControl1.ascx" TagPrefix="UsrCtrl" TagName="BodySubControl1" %> <%@ Register Src="~/BodySubControl2.ascx" TagPrefix="UsrCtrl" TagName="BodySubControl2" %> <%@ Register Src="~/BodySubControl3.ascx" TagPrefix="UsrCtrl" TagName="BodySubControl3" %> <%@ Register Src="~/BodySubControl4.ascx" TagPrefix="UsrCtrl" TagName="BodySubControl4" %>

Search Result

BodyControl.ascx.cs

using System;

public partial class BodyControl : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) {

}

}

BodySubControl1.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BodySubControl1.ascx.cs" Inherits="BodySubControl1" %>

    <asp:UpdateProgress ID="UpdateProgressBodySub1" runat="server" AssociatedUpdatePanelID="UpdatePanelBodySub1" DisplayAfter="50">
        <ProgressTemplate>
            <img src="loading.gif" alt="Loading ... " title="Loading ... " />
        </ProgressTemplate>
    </asp:UpdateProgress>

    <h3>From database 1</h3>

    <asp:GridView ID="GridViewBodySub1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Search Answer" DataField="SearchAns" />
        </Columns>
    </asp:GridView>

    <asp:LinkButton ID="lnkPrevious" runat="server" Text="Previous" 
        ForeColor="Blue" onclick="lnkPrevious_Click"></asp:LinkButton>
    <asp:LinkButton ID="lnkNext" runat="server" Text="Next" ForeColor="Blue" 
        onclick="lnkNext_Click"></asp:LinkButton>
    <asp:TextBox ID="txtPageNumber" runat="server" Text="1" Visible="false"></asp:TextBox>

</ContentTemplate>

BodySubControl1.ascx.cs

using System; using System.Collections.Generic; using System.Web.UI; using System.Web.UI.WebControls;

public partial class BodySubControl1 : UserControl { protected void UpdatePanel_DataBinding(object sender, EventArgs e) { GridViewBodySub1.DataSource = GetRecords(); GridViewBodySub1.DataBind(); }

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkPrevious_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    if (pageNumber > 1)
    {
        pageNumber -= 1;
    }

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub1.DataBind();
}

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkNext_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    pageNumber += 1;

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub1.DataBind();
}

/// <summary>
/// In actual case this function fetching record from database
/// For testing purpose I wrote like this.
/// </summary>
/// <returns></returns>
private List<SearchResult> GetRecords()
{
    List<SearchResult> strList = new List<SearchResult>();

    TextBox txtSearchCriteria =
        (TextBox) this.Parent.Parent.Parent.Parent.FindControl("headerControl1").FindControl("txtSearchCriteria");

    // this                                 --> ASP.bodysubcontrol1_ascx
    // this.Parent                          --> ASP.bodycontrol_ascx
    // this.Parent.Parent                   --> System.Web.UI.Control
    // this.Parent.Parent.Parent            --> System.Web.UI.UpdatePanel
    // this.Parent.Parent.Parent.Parent     --> ASP.maincontrol_ascx



    int recordNumberStart = ((Convert.ToInt32(txtPageNumber.Text) - 1) * 10) + 1;
    int recordNumberEnd = recordNumberStart + 9;

    for (int i = recordNumberStart; i <= recordNumberEnd; i++)
    {
        strList.Add(new SearchResult(string.Concat("DB1 :", txtSearchCriteria.Text.Trim(), " ", i.ToString())));
    }

    for (long i = 0; i < 999999999; i++)
    {
        // real case it will not come
    }

    return strList;
}

}

BodySubControl2.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BodySubControl2.ascx.cs" Inherits="BodySubControl2" %>

    <asp:UpdateProgress ID="UpdateProgressBodySub2" runat="server" AssociatedUpdatePanelID="UpdatePanelBodySub2" DisplayAfter="50">
        <ProgressTemplate>
            <img src="loading.gif" alt="Loading ... " title="Loading ... " />
        </ProgressTemplate>
    </asp:UpdateProgress>

    <h3>From database 2</h3>

    <asp:GridView ID="GridViewBodySub2" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Search Answer" DataField="SearchAns" />
        </Columns>
    </asp:GridView>

    <asp:LinkButton ID="lnkPrevious" runat="server" Text="Previous" 
        ForeColor="Blue" onclick="lnkPrevious_Click"></asp:LinkButton>
    <asp:LinkButton ID="lnkNext" runat="server" Text="Next" ForeColor="Blue" 
        onclick="lnkNext_Click"></asp:LinkButton>
    <asp:TextBox ID="txtPageNumber" runat="server" Text="1" Visible="false"></asp:TextBox>

</ContentTemplate>

BodySubControl2.ascx.cs

using System; using System.Collections.Generic; using System.Web.UI; using System.Web.UI.WebControls;

public partial class BodySubControl2 : UserControl { protected void UpdatePanel_DataBinding(object sender, EventArgs e) { GridViewBodySub2.DataSource = GetRecords(); GridViewBodySub2.DataBind(); }

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkPrevious_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    if (pageNumber > 1)
    {
        pageNumber -= 1;
    }

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub2.DataBind();
}

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkNext_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    pageNumber += 1;

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub2.DataBind();
}

/// <summary>
/// In actual case this function fetching record from database
/// For testing purpose I wrote like this.
/// </summary>
/// <returns></returns>
private List<SearchResult> GetRecords()
{
    List<SearchResult> strList = new List<SearchResult>();

    TextBox txtSearchCriteria =
        (TextBox)this.Parent.Parent.Parent.Parent.FindControl("headerControl1").FindControl("txtSearchCriteria");

    // this                                 --> ASP.bodysubcontrol2_ascx
    // this.Parent                          --> ASP.bodycontrol_ascx
    // this.Parent.Parent                   --> System.Web.UI.Control
    // this.Parent.Parent.Parent            --> System.Web.UI.UpdatePanel
    // this.Parent.Parent.Parent.Parent     --> ASP.maincontrol_ascx



    int recordNumberStart = ((Convert.ToInt32(txtPageNumber.Text) - 1) * 10) + 1;
    int recordNumberEnd = recordNumberStart + 9;

    for (int i = recordNumberStart; i <= recordNumberEnd; i++)
    {
        strList.Add(new SearchResult(string.Concat("DB2 :", txtSearchCriteria.Text.Trim(), " ", i.ToString())));
    }

    for (long i = 0; i < 999999999; i++)
    {
        // real case it will not come
    }

    return strList;
}

}

BodySubControl3.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BodySubControl3.ascx.cs" Inherits="BodySubControl3" %>

    <asp:UpdateProgress ID="UpdateProgressBodySub3" runat="server" AssociatedUpdatePanelID="UpdatePanelBodySub3" DisplayAfter="50">
        <ProgressTemplate>
            <img src="loading.gif" alt="Loading ... " title="Loading ... " />
        </ProgressTemplate>
    </asp:UpdateProgress>

    <h3>From database 3</h3>

    <asp:GridView ID="GridViewBodySub3" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Search Answer" DataField="SearchAns" />
        </Columns>
    </asp:GridView>

    <asp:LinkButton ID="lnkPrevious" runat="server" Text="Previous" 
        ForeColor="Blue" onclick="lnkPrevious_Click"></asp:LinkButton>
    <asp:LinkButton ID="lnkNext" runat="server" Text="Next" ForeColor="Blue" 
        onclick="lnkNext_Click"></asp:LinkButton>
    <asp:TextBox ID="txtPageNumber" runat="server" Text="1" Visible="false"></asp:TextBox>

</ContentTemplate>

BodySubControl3.ascx.cs

using System; using System.Collections.Generic; using System.Web.UI; using System.Web.UI.WebControls;

public partial class BodySubControl3 : UserControl { protected void UpdatePanel_DataBinding(object sender, EventArgs e) { GridViewBodySub3.DataSource = GetRecords(); GridViewBodySub3.DataBind(); }

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkPrevious_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    if (pageNumber > 1)
    {
        pageNumber -= 1;
    }

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub3.DataBind();
}

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkNext_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    pageNumber += 1;

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub3.DataBind();
}

/// <summary>
/// In actual case this function fetching record from database
/// For testing purpose I wrote like this.
/// </summary>
/// <returns></returns>
private List<SearchResult> GetRecords()
{
    List<SearchResult> strList = new List<SearchResult>();

    TextBox txtSearchCriteria =
        (TextBox)this.Parent.Parent.Parent.Parent.FindControl("headerControl1").FindControl("txtSearchCriteria");

    // this                                 --> ASP.bodysubcontrol3_ascx
    // this.Parent                          --> ASP.bodycontrol_ascx
    // this.Parent.Parent                   --> System.Web.UI.Control
    // this.Parent.Parent.Parent            --> System.Web.UI.UpdatePanel
    // this.Parent.Parent.Parent.Parent     --> ASP.maincontrol_ascx



    int recordNumberStart = ((Convert.ToInt32(txtPageNumber.Text) - 1) * 10) + 1;
    int recordNumberEnd = recordNumberStart + 9;

    for (int i = recordNumberStart; i <= recordNumberEnd; i++)
    {
        strList.Add(new SearchResult(string.Concat("DB3 :", txtSearchCriteria.Text.Trim(), " ", i.ToString())));
    }

    for (long i = 0; i < 999999999; i++)
    {
        // real case it will not come
    }

    return strList;
}

}

BodySubControl4.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="BodySubControl4.ascx.cs" Inherits="BodySubControl4" %>

    <asp:UpdateProgress ID="UpdateProgressBodySub4" runat="server" AssociatedUpdatePanelID="UpdatePanelBodySub4" DisplayAfter="50">
        <ProgressTemplate>
            <img src="loading.gif" alt="Loading ... " title="Loading ... " />
        </ProgressTemplate>
    </asp:UpdateProgress>

    <h3>From database 4</h3>

    <asp:GridView ID="GridViewBodySub4" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField HeaderText="Search Answer" DataField="SearchAns" />
        </Columns>
    </asp:GridView>

    <asp:LinkButton ID="lnkPrevious" runat="server" Text="Previous" 
        ForeColor="Blue" onclick="lnkPrevious_Click"></asp:LinkButton>
    <asp:LinkButton ID="lnkNext" runat="server" Text="Next" ForeColor="Blue" 
        onclick="lnkNext_Click"></asp:LinkButton>
    <asp:TextBox ID="txtPageNumber" runat="server" Text="1" Visible="false"></asp:TextBox>

</ContentTemplate>

BodySubControl4.ascx.cs

using System; using System.Collections.Generic; using System.Web.UI; using System.Web.UI.WebControls;

public partial class BodySubControl4 : UserControl { protected void UpdatePanel_DataBinding(object sender, EventArgs e) { GridViewBodySub4.DataSource = GetRecords(); GridViewBodySub4.DataBind(); }

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkPrevious_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    if (pageNumber > 1)
    {
        pageNumber -= 1;
    }

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub4.DataBind();
}

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lnkNext_Click(object sender, EventArgs e)
{
    int pageNumber = Convert.ToInt32(txtPageNumber.Text);

    pageNumber += 1;

    txtPageNumber.Text = Convert.ToString(pageNumber);

    UpdatePanelBodySub4.DataBind();
}

/// <summary>
/// In actual case this function fetching record from database
/// For testing purpose I wrote like this.
/// </summary>
/// <returns></returns>
private List<SearchResult> GetRecords()
{
    List<SearchResult> strList = new List<SearchResult>();

    TextBox txtSearchCriteria =
        (TextBox)this.Parent.Parent.Parent.Parent.FindControl("headerControl1").FindControl("txtSearchCriteria");

    // this                                 --> ASP.bodysubcontrol4_ascx
    // this.Parent                          --> ASP.bodycontrol_ascx
    // this.Parent.Parent                   --> System.Web.UI.Control
    // this.Parent.Parent.Parent            --> System.Web.UI.UpdatePanel
    // this.Parent.Parent.Parent.Parent     --> ASP.maincontrol_ascx



    int recordNumberStart = ((Convert.ToInt32(txtPageNumber.Text) - 1) * 10) + 1;
    int recordNumberEnd = recordNumberStart + 9;

    for (int i = recordNumberStart; i <= recordNumberEnd; i++)
    {
        strList.Add(new SearchResult(string.Concat("DB4 :", txtSearchCriteria.Text.Trim(), " ", i.ToString())));
    }

    for (long i = 0; i < 999999999; i++)
    {
        // real case it will not come
    }

    return strList;
}

}

SearchResult.cs

/// /// Summary description for SearchResult /// public class SearchResult { /// /// Private variable /// private string _SearchAns;

/// <summary>
/// Property
/// </summary>
public string SearchAns
{
    get
    {
        return _SearchAns;
    }
    set
    {
        _SearchAns = value;
    }
}

/// <summary>
/// Constructor
/// </summary>
/// <param name="CurrentSeachAns"></param>
public SearchResult(string CurrentSeachAns)
{
    _SearchAns = CurrentSeachAns;
}

}

web.config

Asp.Net Configuration option in Visual Studio. A full list of settings and comments can be found in machine.config.comments usually located in \Windows\Microsoft.Net\Framework\v2.x\Config --> section enables configuration of the security authentication mode used by ASP.NET to identify an incoming user. --> section enables configuration of what to do if/when an unhandled error occurs during the execution of a request. Specifically, it enables developers to configure html error pages to be displayed in place of a error stack trace.

    <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
        <error statusCode="403" redirect="NoAccess.htm" />
        <error statusCode="404" redirect="FileNotFound.htm" />
    </customErrors>
    -->
 <pages>
  <controls>
   <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
   <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  </controls>
 </pages>
 <httpHandlers>
  <remove verb="*" path="*.asmx"/>
  <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
 </httpHandlers>
 <httpModules>
  <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
 </httpModules>
</system.web>
<system.codedom>
 <compilers>
  <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
   <providerOption name="CompilerVersion" value="v3.5"/>
   <providerOption name="WarnAsError" value="false"/>
  </compiler>
  <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
   <providerOption name="CompilerVersion" value="v3.5"/>
   <providerOption name="OptionInfer" value="true"/>
   <providerOption name="WarnAsError" value="false"/>
  </compiler>
 </compile

Answer 1

Does this have to be update-panels? If it was me, I would use jQuery and (ideally) MVC; then it is pretty simple as something like:

$('#div1').load(url1, function() {
    $('#div2').load(url2, function() {
        $('#div3').load(url3, function() {
            $('#div4').load(url4);
        });
    });
});

i.e. we use the callback from each to start the next div loading, but treat each div as an unrelated request.