Update ASP.NET panel asynchronously - c#

I need some help with this problem:
Situation:
I've got a usercontrol (in SharePoint) that reads query string and processes it with an asynchronous event. While it's busy, a spinner is shown. After the event is finished, the updatepanel inside the usercontrol should update and show the message (+ hide the spinner)
Code: I've got a function that's called asynchronously on the UserControl_Unload event.
private delegate void AsyncFunction(string activation);
void UserControl_Unload(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
AsyncFunction dlgt = new AsyncFunction(this.CheckUrl);
AsyncCallback callback = new AsyncCallback(FunctionCallBack);
IAsyncResult ar = dlgt.BeginInvoke(activationcode, callback, null);
}
}
private void CheckUrl(string lalala)
{
// Some code
}
User control markup:
<asp:UpdatePanel runat="server" id="pnlContent" updatemode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:UpdatePanel runat="server" id="pnlStatus" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label runat="server" ID="lblMessage" />
<asp:LinkButton runat="server" ID="btnHome" Text="Terug naar welkom-pagina" PostBackUrl="<% $SPUrl:~sitecollection %>" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="pnlGegevens" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div><asp:Image runat="server" ID="imgLoading" AlternateText="Loading..." CssClass="gb_pl_loadingImage" ImageUrl="<% $SPUrl:~sitecollection/Style Library/GB-VW Styles/Images/ajax-loader.gif %>"/></div>
<div class="gb_pl_loading">Even geduld aub. De gebruiker wordt geactiveerd...</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
This all works great, but when I need to update the panel, it doesn't work.
private void FunctionCallBack(IAsyncResult test)
{
pnlContent.Update()
}
Anyone who knows how to solve this? (if it's possible only use asp, c# or javascript)

Is it possible to fire off the asynchronous operation from the client? That is, display your page but include javascript that makes a webservice call? That way you at least have something to wait for, and your client will get notified becuase it initiated the request.
Otherwise I don't see how the page, which is already gone to the client, could be updated by the server once the async op finishes.

Related

Update ASP.net UpdatePanel Control with a thread in C#

What I'm trying to do: I'm trying to update an image (in a UpdatePanel control) every .5 seconds using a thread in the code behind the web page (I'm using a ASP.NET Web Forms Site Project)
What I have so far: I have mock images on the screen are the moment. I also have a thread written that gets called with a button click.
Here is that code:
protected void Button1_Click(object sender, EventArgs e)
{
DoThing();
}
public void DoThing()
{
Thread thread = new Thread(() => {
while (true)
{
UpdatePanel1.Update();
System.Threading.Thread.Sleep(500);
if (Image2.ImageUrl == "~/Images/Water3.png")
{
Image2.ImageUrl = "~/Images/Water1.png";
continue;
}
if (Image2.ImageUrl == "~/Images/Water1.png")
{
Image2.ImageUrl = "~/Images/Water2.png";
continue;
}
if (Image2.ImageUrl == "~/Images/Water2.png")
{
Image2.ImageUrl = "~/Images/Water3.png";
continue;
}
}
});
thread.Start();
thread.Join();
}
and here is my HTML:
<%# Page Title="Home Page" Language="C#" Async="true" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image ID="Image1" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Fauset.png"/><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/><br />
<asp:Image ID="Image2" runat="server" Height="96px" Width="32px" ImageUrl="~/Images/Water1.png" OnLoad="Image2_Load"/><br />
<asp:Image ID="Image3" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Bucket.png"/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
</asp:Content>
Problem: When i click the button the page is currently doing nothing. When i put a break point in the thread the thread is running. The page just isn't updating for some reason.
Notes: Im trying to stay away from JS, Jquery and JSON as much as possible because i barley know them but if i need to use them i need to use them
Once the page has rendered, you can't change it from code still running on the server without making use of some sort of client-side technology (Javascript/jQuery, etc).
In this case in particular, where you're trying to implement what effectively seems like an image slider, you can do it very easily using jQuery and one of the many slider plugins, which would also give you animated transitions.
You can't do the thing you want to do the way you want to do it. Server side code runs on the server, client side code runs on the client. Updating the content of a server control on the server will only reflect on the client if you can make the client reload the page or the control you've modified. There are many ways to reload pages/parts of the page, but in this case you're best off using some client side JavaScript.
It looks like the images are static, so you can probably get away with using a simple jquery image slider. There are many free ones available, find one that will change the image every 5 seconds and use that instead of trying to build a Goldberg machine just because you're more comfortable with doing it in one way.
This functionality is built in. All you have to do is add an Asynchronous Trigger and timer to your update panel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="upOnLoading" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<ControlToUpdate>
....
</ControlToUpdate
<asp:Timer ID="Timer1" runat="server" Interval="2000" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
and your method...
protected void upOnLoading(object sender, EventArgs e)
{
...
}
While your users are navigating your page elsewhere, upOnloading() will be executed every Timer.Interval milliseconds.

Stopping auto page refresh

I use the below code to auto refresh the page every 60 seconds via the AJAX tools in VS2010. Works perfectly.
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ViewStateMode="Enabled" UpdateMode="Conditional">
<ContentTemplate>
ASP.NET/HTML Code
<p>
<asp:Button ID="Button2" runat="server" Text="Click here" OnClick="Button2_Click" /> to disable the pages automatic refresh.</p>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="60000">
</asp:Timer>
</asp:View>
<asp:View ID="View2" runat="server">
etc.
</asp:MultiView>
I want to include a button on the asp.net page to cancel the auto refresh.
I tried to include the below but when I clicked the button, it didn't work. The below is the Code Behind for an OnClick event for a Button. The asp.net code is in the above code.
protected void Button2_Click(object sender, EventArgs e)
{
Timer1.Interval = 0;
}
Where am I going wrong? Is this even a way to do this or do I need to go another route in order to allow the user to cancel the auto page refresh?
Thanks to PeterJ I have found the solution. I modified the code and since I clicked it the page has not refreshed. The issue was with my code behind for the button OnClick event. I had:
Timer1.Interval = 0;
When I should have had:
Timer1.Enabled = false;

UpdatePanel not firing inside Wizard

I have an Update panel within a wizard:
<asp:WizardStep ID="WizardStep2" runat="server" StepType="Auto"
Title="Set the number of users required.">
...
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="ProgressInd" Text="Progress..." />
<asp:Button runat="server" OnClick="GoButton_Click" ID="ProgressBtn" Text="Go" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:WizardStep>
...
protected void GoButton_Click(object sender, EventArgs e)
{
ProgressInd.Text = "Progress... Moving";
}
When I take the update panel out of the wizard it works nicely but inside the wizard the click event just won't fire. I'm using Firefox to test, but IE doesn't work either. Any ideas or help appreciated.
For the record. Paolo spotted my problem. There were page validators that were preventing the event from firing.

asp.net timer to load page content

asp.net
c#
Our webpage currently contains a rather large web app which causes a lengthy delay when attemping to navigate to it. I'm currently implementing a WCF web service to utilize ajax but the delay is a concern to my employer so he wanted a quick and dirty fix in the mean time.
I would like to have the empty page load and then use a timer to load the content. This will cut down on perceived page load time but i'm unsure how to accomplish it.
Any help would be much appreciated
Shawn
Some code to get you started:
In the asp.net page:
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1">
</asp:Timer>
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
.... your stuff here
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</asp:UpdateProgress>
In the code behind:
protected void Timer1_Tick(object sender, EventArgs e)
{
this.Timer1.Enabled = false;
StartLongRunningTask();
}
Instead of a timer, you could flush the Response with Response.Flush().

C# How to raise PostBack on Timer.Tick event?

I use UpdatePanel with DataList element inside. I want to update the contents from DB every 10 secunds. I noticed that updating occures only after the postback. I did the code like
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="lstComputers" runat="server" DataKeyField="ComputerID" DataSourceID="ComputersDataSource"
OnItemDataBound="lstComputers_ItemDataBound" OnItemCommand="lstComputers_ItemCommand">
<HeaderTemplate>
// Header data
</HeaderTemplate>
<ItemTemplate>
// Item template
</ItemTemplate>
</asp:DataList>
<asp:UpdateProgress ID="UpdateProgress2" runat="server">
<ProgressTemplate>
<img border="0" src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
In code behind i tryed to use RaisePostBackEvent method but got Stack overflow exception...
protected void Timer1_Tick(object sender, EventArgs e)
{
this.RaisePostBackEvent(Timer1, "");
}
Remember that all your code-behind is executed on the server only. Therefore, if the Timer1_Tick() method is running, then your Timer is raising a PostBack.
The reason you get a StackOverflowException running that method is because it simply calls itself, infinitely. You need to place your update code in that method, not call it again recursively.
Take a look at the setTimeout() and setInterval() javascript functions. This all needs to happen on the client, not the server side.
protected void Timer1_Tick(object sender, EventArgs e)
{
lstComputers.DataBind();
}
Solved the problem with data reloading

Categories