UpdateProgress с UpdatePanel

Question

Я хочу показать UpdateProgress на странице A, когда пользователь нажимает кнопку «Далее», чтобы перейти к следующей странице. Следующая страница - страница B, которая имеет тяжелую загрузку данных.

Когда кнопка нажата, она не отображает UpdateProgress.

Что отсутствует в этом коде и как его можно показать?

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate > 
     Please wait ... 
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click" /> 
    </Triggers>          

    <ContentTemplate>           
     <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel"onclick="btnCancel_Click" />          
     <asp:Button ID="btnNext" runat="server" TabIndex="2" Text="Next" onclick="btnNext_Click" /> 
    </ContentTemplate>         
</asp:UpdatePanel> 

Answer 1

Попробуйте установить DisplayAfter на очень малую величину, чтобы сделать индикатор прогресса немедленно появляются, например:

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1"> 

Answer 2

Пара вещей, чтобы попробовать:

1) Перемещение контроль UpdateProgress внутри UpdatePanel

2) Снимите AssociatedUpdatePanelID атрибут из UpdateProgress тег

Я делаю ставку на вариант 1, делающий трюк.

EDIT

Вот способ без ProgressTemplate, используя обработчики событий на стороне клиента:

<script type="text/javascript"> 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function BeginRequestHandler(sender, args) 
{ 
    // some code to show image, e.g: 
    document.getElementById('somedivwhichasimage').className = 'show'; 
} 

function EndRequestHandler(sender, args) 
{ 
    // some code to hide image, e.g: 
    document.getElementById('somedivwhichasimage').className = 'hidden'; 
} 
</script> 

Answer 3

Добавьте этот код на код позади этой страницы.

protected void btnNext_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(3000); 
} 

Надеюсь, это поможет!

Edit: Перейдите по этой ссылке: http://msdn.microsoft.com/en-us/library/bb386421.aspx

Добавление кода из ASPX страницы, я попробовал и работает,

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 

    <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate > 
    <asp:Label ID="lblwait" runat="server" Text="Please wait.."></asp:Label> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> 
    </Triggers>          

    <ContentTemplate>           
     <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel" />          
     <asp:Button ID="Button1" runat="server" TabIndex="2" Text="Next" onclick="Button1_Click" /> 
    </ContentTemplate>         
</asp:UpdatePanel> 

Answer 4

попробуйте поставить UpdateProgress управление внутри UpdatePanel. и это должно сработать для вас.
надеюсь, что это поможет!