C#.Net - issue with how function updates page

I have a page with a few dropdowns - whenever you select a item in one of the dropdowns, it runs a function in the codebehind and updates the page accordingly.

The problem I am having is part of the function is to run a SQL query that is slow (5 seconds or so), and it seems like it waits until everything in the function is competed before it updates the screen. For example I have something like this:



I was hoping to have the page display "Loading..." while it ran the long query, but the page just sits there for 5 seconds and then displays "Done!".

Any ideas on what I could do to get around this? I am using C# and AJAX in Visual Web Developer 2008 Express.

That's exactly what it does. Well... sort of.

If you're under the notion that your code ever updates the screen directly you need to update your understanding of how this whole 'web' thing works. Your C# code runs far away on a web server, and has no access to the user's screen. All your code does as far as the screen goes is send html to a browser. That's it. That's the way it's always been, and nothing will change it any time soon. I realize it's tempting to believe that setting a property in your page causes some magic communication to happen immediately between your server and the web browser that syncs everything up, but that's not how it works.

Each time your code runs corresponds to exactly one request from the browser. Your program will react by sending exactly one response, usually html. The result of this response may mean the browser makes additional requests for css or javascript files, images, and other resources, but those requests aren't usually passed through the ASP.Net processor. Since your program sends exactly one response, it should be obvious that this response isn't sent until all the relevant code has completed.

Hopefully when you look at it that way your problem starts to make more sense. At the point where you set the 'loading/done' text your code is still deciding what it's html response will look like. lit1.Text = "Loading..."; just means that when the html is rendered you'll have a tag that looks something like this:
<span id="lit1">Loading..."</span>
But since your code isn't finished yet you haven't actually sent that to the browser. It's still just a placeholder. The ASP.Net processor will now move to the next line and run your sql query, but still nothing is sent. Then we reach the last line, where you tell the processor that you really want the span tag to look like this:
<span id="lit1">Done!</span>
At this point, assuming you have nothing else to do in the page lifecycle for this request, your page is finally rendered into html and sent to the browser. So, of course, all the browser ever sees is "Done!".*

AJAX can make this process a little shorter-- it may only run one method or rebuild a single panel instead of rebuilding the entire page-- but it's still a 1:1 request:response ratio.

So how to solve your problem? Well, what I would normally do is show the "Loading..." message using javascript before the the page is submitted back to the server to run the query. This way the user gets a faster update and you only need one response from the server.

To make that work you need to know the ID of your drop down list control so you can find it in javascript using document.getElementById();. Depending on what's going on this ID often isn't fully determined until run time, so you'll need to add the javascript using the ClientScriptManager object in your page and reference the control's .ClientID property to plug the correct ID into your script.

After that your server-side code can just set the lit1 label to "Done!" when the sql query finishes.


---------------------------
*As a side note here, if you don't really need a span tag for this text you can use a literal control instead, which will just send the word "Done!" to the browser with no tag. Of course, then there's no ClientID you can use directly, but that often doesn't matter. There's a good chance it's already encased in something appropriate.

Hi, thanks for taking the time to reply. I do have a understanding of how the internet works, and the reason I was looking for this certain result is because it is something that I have seen and done before (without magic!). For example, you can write a loop in PHP that will print one line and then sleep for 100ms - when loading it you can see the page load by each line appearing one by one as it is processed. That is where I was coming from when looking for this result, sorry if it seemed so off base.

I tried to have the loading text get updated on the client side, but I am having trouble figuring out how to trigger both the client side and the server side request. I am using OnSelectedIndexChanged as the event, and I can only specify one function (the clientside or the codebehind) to run.

Does anyone know of a way to trigger two seperate functions with one event?

The easiest way to do this is to add a custom validator control that validates your dropdown list. Then set your javascript function as the client-side javascript to run (make sure it returns true) and do nothing on the server side. But that's kind of a crude hack.