I have a page that is processing data. It goes through a series of 10 steps. I want the page to display a status after each step. ie. after step 1 data processing done print "Step 1 done" then after step 2 data processing done add text "Step 2 done" etc. How can I do this using only C# without hard postbacks? Or do I have to use AJAX/Javascript or page postbacks?
I've been playing around with updatepanels. One around the whole set of steps. Or an updatepanel around each step and then calling button clicks pro grammatically. The only result I can get is for all the text to display at one time at the end of processing.
I've been racking my brain and have search google endlessly. Hopefully someone out there has an idea for me. Thanks!
I'd suggest using ajax -
Server Side:
up a new action method on your server (assuming it's MVC), use this action method to query the state of the task.
public string QueryStatus()
{
return Session["progress"].ToString();
}
When the task progresses to the next step, update a variable to indicate this (in database, or session).
Session["progress"] = "Step Four";
Client Side:
Periodically call the action method and update an element on the page accordingly.
<script>
$.ajax('/Server/QueryStatus').done(function(response)
{
$('#progressElement').innerHTML = response;
})
</script>
Related
I am making a web app in asp.net using c# that collects a lot of information from http web services at one time. Since this data collection process takes 10-20 seconds, I want to display a small loading frame with a small rotating image.
To make this happen on one page, I have a div called loadingdiv for which I set the Visible property of to false during PageLoad. When my "find movies" button is pressed, the c# code is supposed to hide the content that was originally on the page, show the loading image while loading the web service information in the backend, then hide the loading image and bring up the data display div.
If I comment out the class that loads the data from the webservices, this works fine. But as soon as I add my web service information it completely skips over the loadingdiv.Visible = true line and just does the 10-20 second operation.
Here's the relevant lines of code.
protected void btnFindMovies_Click(object sender, EventArgs e)
{
//Hides the main content that contained search options for movies
thisarticle.Visible = false;
articlediv.Visible = false;
lblGenres.Visible = false;
ratingdiv.Visible = false;
List<int> gList = new List<int>(); //Genre List
/* Other code that goes through checkboxes to find out which genres
to search for in the movie search */
string title = "Movie Title Here";
Page.Title = title;
loadingdiv.Visible = true; //Shows loading div before completing search
MovieSearch search = new MovieSearch(gList); //Intensive web service use
(10-20 seconds)
loadingdiv.Visible = false; //removes the loading div from the screen
}
How can I get the loadingdiv to show up while my web service operations are going through?
Everything in that method happens before any response is served to the user. This means that the following happens:
The user clicks your button.
A request is sent to the server and a postback occurs.
During the postback, btnFindMovies_Click is fired. You set Visible = true, wait for the web services to return their information and then set Visible = false.
The response is served to the browser.
Because this is all done on the same request, nothing is returned to the browser until all of this is done, which effectively eliminates the loadingdiv.Visible = true; line entirely.
If you want a loading div to show while some server-side code issues requests to web services, you will have to use AJAX to make these calls asynchronously and use Javascript to hide/show the loading div accordingly.
The following looks like a useful introductory guide to AJAX:
http://www.simple-talk.com/dotnet/asp.net/ajax-basics-with-jquery-in-asp.net/
I have a Function Which will send the emails to different recievers say Actor1, actor2 etc. Before sending the auto generated email the user should be able to edit it.
I have used a placeholder to display the autogenered email content and a textbox to add the new content.
My function looks like this
public void SendEmail(var content)
{
...
display1= actor1content;
....
....
dsplay2=actor2content;
}
Here display1 and display2 are the controls which i am putting to placeholder. Now after function execution two displays will come together. How can I make the function to make display1 to appear first and then continue function execution and again make display2 appear.
You could use an UpdatePanel to prevent a full PostBack , and a Timer to trigger an async PostBack every 5 seconds or so. When the async PostBack occurs, you could check the status of your background operation and if you need user input (eg: if the operation has completed), register a startup script to display an alert/prompt.
I have a function inside my .aspx.cs code which takes wuite a long time to do the processing until when I want to display a cool loading animation. I looked some of the earlier posts but either these didn't work for me, or were having solution specific to Page loading scenario (not loading a while a function completes).
I guess the right approach would be to fire a Javascript startLoader() function just before the the main function starts (which takes a long time), and then call a stopLoader() from the .aspx.cs itself to stop the loader when the function ends. Any suggestions how to implement this?
Yes, I've done this in ASP.NET Web From (not a ASP.NET MVC solution). You need to provide OnSubmit client side event handler. It basically break down to three parts: Javascript, HTML Div, and one line code behind:
Javscript:
function ShowLoading(e) {
// var divBg = document.createElement('div');
var divBg = document.getElementById('blockScreen');
var divLoad = document.createElement('div');
var img = document.createElement('img');
img.src = 'images/ajax-loader.gif';
divLoad.setAttribute("class", "blockScreenLoader");
divLoad.appendChild(img);
divBg.appendChild(divLoad);
document.getElementById('blockScreen').style.display = 'block';
// These 2 lines cancel form submission, so only use if needed.
//window.event.cancelBubble= true;
//e.stopPropagation();
}
function HideLoading() {
//alert('hideloading');
document.getElementById("form1").onsubmit = null;
document.getElementById('blockScreen').style.display = 'none';
//alert('done');
}
Add following DIV
<div id="blockScreen" class="blockScreen" style="display:none"> </div>
Finally, add the following to Page_Load in code behind.
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "submit", "ShowLoading()");
Now, all of your page postbacks are essentially have to call onsubmit event. It will display the animation before the page postback finishes.
if you really want to do, then the only way is webworkers. You've probably heard about them, or if not, i seriously recommend to have a look.
Yes, fire startLoader() on OnCliencClick of your button or whatever element you are using to fire the server-side event and call stopLoader() from the server-side at the end of your process. Something like this:
//rest of the server-side code above ...
Page.ClientScript.RegisterStartupScript(this.GetType(), "someKey", "stopLoader();", true);
If you don't mind that the browser is not responsive in the meantime, the simplest way of doing this is using an animated gif:
Activity indicators
ajaxload.info
webscriptlab
The trick is showing the image when starting your processing, and hiding it when finished. You can show it in an img, and use jQuery or whatever you want to show/hide it.
If you need the browser to keep responsive, use Web Workers. But be aware that some of the older browsers don't support it. See this reference
I am using asp.net.
I have several Insert statement on my .cs file on submit button click. I want that after each insert statement execute, it will show the message on the webpage [UI] [ex: inserted in table 1].
Like:
button_click_event { Insert statement
1 if(done successfully)
display message on UI for statement 1
Insert statement 2 if(done
successfully)
display message on UI for statement 2
Insert statement 3 if(done
successfully)
display message on UI for statement 3
..... and so on... }
just like we got the screen while installing SQL Server, we get successful message after every operation.
I don't want postback to happen for this. How can I do that?
Basically, you can't do this without multiple requests to the server. HTTP is a request/response protocol. While you could potentially just send the "page so far", it would be incomplete HTML and almost certainly render badly.
The best user experience would probably be to use AJAX for this - don't do a full page refresh, just change the appropriate section of the DOM based on the response to a status request.
I have googled and find out a link through that you can achieve results as described above format.
http://msdn.microsoft.com/en-us/magazine/cc163553.aspx
In this link when you download source code please see ContextSens.aspx page, here after click on start task button message will be display as above described format.
Hope it will help for you.
I have a commenting system which is working well. I need to create an admin panel but for the time being I just want to have an asp.net page which auto loads every (n) seconds and shows me the latest posts from the post table. Its very simple (in concept). Anyone with some good links/pointers?
Onload, start a javascript timer that refreshes the page after n seconds. Alternatively, you could put the data in an update panel and have the javascript update the updatepanel every n seconds, but then you would need to create a loop to call the javascript repeatedly, every n seconds.
I would suggest looking into the setTimeout/setInterval functions in Javascript that will call a specific function after the time has elapsed. In your case this will be an AJAX call to an ASPX page and then (i'm assuming) you'll want to fire the result into a DIV somewhere in your page...
setInterval(function(){
$.ajax({
url: 'test.aspx',
success: function(data) {
$('#myDiv').html(data); // fill div with response
}
});
}, 5000); // call after 5 secs
Something along those lines is roughly what i think you're after, although it is untested!
Cheers
Stuart