Confusion about UpdatePanel Loading image - asp.net

I am trying to learn how to use UpdatePanel And this is my code.The problem is everything is ok but I cant see Loading.gif image .when code excatues Its wisible aspx page .What am i missing out here
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="load.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>


You should have trigger in UpdatePanel like this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>


Try to use asp:Image:
<ProgressTemplate>
<asp:Image ID="loader" runat="server" ImageUrl="~/img/loader.gif" />
</ProgressTemplate>

Related

UpdateProgress not working with AssociatedUpdatePanelID

I cannot get the update progress to work at all, here is my code:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
<ProgressTemplate>
<div class=".uk-icon-spin"></div> Processing...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="myUpdatePanel">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Create Instance" />
</ContentTemplate>
</asp:UpdatePanel>
Does anyone know what could be causing it? Thanks

modal popup extender not showing panel on button click

I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
PopupControlID="pnl" OkControlID="btnOk"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnl" runat="server" style="display:none;">
<asp:UpdatePanel ID="udp" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
<asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
<asp:Button runat="server" ID="btnOk" Text="OK" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="btnTesting" Text="Testing"/>
</ContentTemplate>
</asp:UpdatePanel>
but i can't get the panel to popup when the button is clicked. Anybody know why?

Your innermost panel has Visible=false.
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false"> *(change here)*
So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.
<asp:Panel ID="pnl" runat="server" style="display:none;"> *(this is ok)*
To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)
Hope that helps!

Do you have any JavaScript errors and is pnl.Visible=False; set on the server-side anywhere?
Make sure you have the AjaxControlToolkit referenced properly, NuGet is the easiest way to add the reference.
http://nuget.org/packages/ajaxcontroltoolkit

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

2 asp:updatepanel and 2 asp:updateprogress controls

I'm using two asp:updatepanel and 2 asp:updateprogress for them. Update progress shows correctly when I never use AssociatedUpdatePanelID with them, but if I use AssociatedUpdatePanelID the Progress bar never shows.
<asp:UpdateProgress AssociatedUpdatePanelID="upMainPracticeCountry" runat="server" ID="UpdateProgress1">
<ProgressTemplate>
<img src="images/loading.gif" alt="loading..." /></ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upMainPracticeCountry" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlMainPracticeCountry" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="ddlMainPracticeState" runat="server">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
and the other update panel is
<asp:UpdateProgress runat="server" ID="up2" AssociatedUpdatePanelID="upPostalCountry">
<ProgressTemplate>
<img src="images/loading.gif" alt="loading..." /></ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upPostalCountry" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPostalCountry" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="ddlPostalState" runat="server">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>

Not exactly sure what's going in but can you try setting AutoPostback="true" for the dropdown lists in the update panels?

http://www.codeproject.com/KB/ajax/UpdateProgress.aspx

Updateprogress not working with PostBackTrigger-ASP.NET

hi I'm having a problem with "Updateprogress" in ASP.NET . If i set the PostBackTrigger the progress loading image is not displayed but if i exclude the PostBackTrigger it's working. The code is as follows :
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Submit" />
</Triggers>
<ContentTemplate>
<asp:FileUpload runat="server" ID="Up"></asp:FileUpload>
<asp:Button runat="server" Text="Upload" ID="Submit" OnClick="Submit_Click" CausesValidation="false" />
<asp:UpdateProgress ID="upd" runat="server">
<ProgressTemplate>
<img alt="Checking Status" src="ajax-loader(2).gif" />
<%--<asp:Image runat="server" ImageUrl="~/ajax-loader(2).gif" ID="img" />--%>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

Update panel problem

Here is my code:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Click1" OnClick="Button1_Click" />
<br />
<br />
Last refresh
<%=DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Click2" OnClick="Button2_Click" />
<br />
<br />
Last refresh
<%=DateTime.Now.ToString() %>
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
Im using two update panels here, when i click "Button2" then "UpdatePanel2" was refreshed, if i click "Button1" then both update panel were refreshed, but my need is if i click "Button1" then "UpdatePanel1" have to be refreshed.
Thanks.

This behavior is by design. Because your UpdatePanel2 is nested inside of UpdatePanel1, when you refresh the contents of UpdatePanel1, this includes the child UpdatePanel.
If you want UpdatePanel2 to act separately from UpdatePanel1, you're going to have to take it out of UpdatePanel1 and make it a sibling, rather than a child.

Resources