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.
Related
I'm trying to test something for a component I'm building. Here's what I'm trying to do.
Upload file to a server without posting back or refreshing the page.
I decided to use ajaxfileupload control.
The file uploads but after the SaveAs Method is called in the backend, the whole page is getting refreshed for some weird reason.
Here's the code .aspx Page:
`
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajaxToolkit:AjaxFileUpload runat="server"
ID="AjaxFileUpload1" OnUploadComplete="UploadComplete" />
</ContentTemplate>
</asp:UpdatePanel>
`
Here's the backend Code:
`
protected void UploadComplete(object sender, AjaxFileUploadEventArgs e)
{
AjaxFileUpload1.SaveAs(Server.MapPath("/" + e.FileName));
}
`
The DateTime.Now block is to keep track of refreshes/postbacks.
I need to have UpdatePanel with asyncpostback, but in my case it seems that no partial postback happens, but fullpostback. I am new to web forms, please, check the code:
<%# Register TagPrefix="Cust" TagName="CompanyInformationView" Src="~/CustomControls/CompanyInformationView.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick= "Button1_Click" Text="test" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<Cust:CompanyInformationView ID="CompanyInformationView" runat="server" />
</asp:Content>
So I have Test Button. OnClick it should do "nothing" for test. Also there is custom control on web form. Here is server side code for this form:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// fill in custom control
CompanyInfo c = GetInfo();
CompanyInformationView.Company = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
var i = 1;
}
CompanyInformationView is custom control with property "Company". There is no ViewState added for this property (so it cannot be loaded properly if postback is done). When I click on Test Button, the page fails, because "CompanyInformationView.Company" is not set (it is not set, because it cannot be loaded from ViewState, I guess).
Instead, I think that it should not work like this. AsynPostback should deal only with UpdatePanel.
Why it wants to reload custom control? Doesn't it mean that Full postback happen or maybe I do not understand Asyncpostback?
PageLoad and all other events are raised on every get\postback, no matter if it's async or full,
In asyncpostback, the response which the server renders includes only the content inside the updatepanel.
Try to Put <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Before
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response. so in this case, async post back will still give you exception unless you populate the custom control no matter get/post.
you need to also put the custom control inside another update panel or in the same update panel as the button in order see partial update to happen.
I would like to set the Timer Interval to be 5000-10000 ms randomly using aspx only (without the C# code behind).
The following example raises the error message:
Cannot create an object of type 'System.Int32' from its string representation '<%= Random.Next(5000,10000) %>' for the 'Interval' property.
How do I correct the Interval variable to get a random interval calls?
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="<%= Random.Next(5000,10000) %>">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<%= DateTime.Now.ToString() %>
</ContentTemplate>
</asp:UpdatePanel>
I tried to Convert.ToInt32, but it doesn't work.
Is it even possible?
For some inspiration, I managed to work this out with some C# code behind this way:
aspx :
<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick">
C# :
protected void Timer1_Tick(object sender, EventArgs e)
{
Random random = new Random();
Timer1.Interval = random.Next(5000, 10000);
}
but again, I would like to get rid of the C# code.
I hope it helps.
The <%= %> tag will always return a string, as it's an equivalent to Response.Write(" ").
Your alternative is code-behind (offering a good explanation of why you don't want to use code-behind might get some more interest from potential respondents). Or, use the <%# %> tag instead. Although, this will require the control be data-bound, which is probably an even less elegant solution than just using the code-behind.
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.
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().