Show Loading Message in Asp.net

Question

I want to show a loading indicator in my asp.net webpage while my gridview is being filled with data

This is part of my aspx page

    <script type="text/javascript" src="Scripts/jsUpdateProgress.js"></script>      
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
        <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
            <ProgressTemplate>
                <div style="position: relative; top: 30%; text-align: center;">
                    <img src="Styles/images/loading.gif" style="vertical-align: middle" alt="Processing" />
                    Loading...
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
        BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />

(My code is based on this sample weblogs.asp.net/blogs/guillermo/Code/modalExample.zip)

This is my button to call my method

<asp:UpdatePanel ID="updatePanel" runat="server">
        <ContentTemplate>
            <asp:Button ID="btMonth" runat="server" onclick="btMonth_Click" Text="Ver" />
        </ContentTemplate>
    </asp:UpdatePanel>

This is my c# code of my method btMonth_Click

    protected void btMonth_Click(object sender, EventArgs e)
{
    string query = "select * from table";
    SqlDataSource1.SelectCommand = query;
    gInd.DataSourceID = "SqlDataSource1";
}

As you can see while the "Loading" indicator appears I want to fill a GridView, but when I make click in my button the method btMonth_Click is invoked, the method is executed but my gridview doesn't get filled. If I remove the asp:UpdatePanel of my button my gridview is filled fine

Is there something I'm missing?

@WaqarJanjua forgot to mention, my gridview is outside of update panel, it has to be inside? — Naty Bizz
– Naty Bizz, Commented Jul 24, 2012 at 20:28
@NatyBizz yes, it should be inside the same update panel as button. — Waqar Janjua
– Waqar Janjua, Commented Jul 24, 2012 at 20:31

Community · Accepted Answer · 2017-05-23 10:09:38Z

2

You need to place your GridVew inside of your UpdatePanel in order to be partial rendered

If for design reasons you cannot place your grid inside the first UpdatePanel, you can have several UpdatePanel

For more info:

How to work with two update panels on same .aspx page

edited May 23, 2017 at 10:09

CommunityBot

11 silver badge

answered Jul 24, 2012 at 20:26

Jupaol

21.4k9 gold badges71 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

seN · Accepted Answer · 2012-07-24 20:26:58Z

0

Try to add:

gInd.DataBind();

in your btMonth_Click (Btw. better naming convencion would be btnMonth_Click)

    protected void btMonth_Click(object sender, EventArgs e)
{
    string query = "select * from table";
    SqlDataSource1.SelectCommand = query;
    gInd.DataSourceID = "SqlDataSource1";
    gInd.DataBind();
}

answered Jul 24, 2012 at 20:26

seN

1,10514 silver badges22 bronze badges

Collectives™ on Stack Overflow

Show Loading Message in Asp.net

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related