background task

What I want is an ASP.net web page (c#) that show a button

The user presses the button

This button press initiates a moderately long background process. I want the page to the show a message saying "running" and the button be disabled.

When the background process ends I want the page to show "Process finished" and the button re enabled.

I have tried using ajax but I am not getting the hang of it.

What is the easiest way to achieve this?

TIA
LVL 13
Atdhe NuhiuAsked:
Who is Participating?
 
Vikram Singh SainiSoftware Engineer cum AD DeveloperCommented:
What is the easiest way to achieve this?
My answer still would be AJAX. Sorry for it, but it is. Here is the code with explanation:

<asp:ScriptManager ID="scriptManager" runat="server" />
<asp:UpdatePanel runat="server" ID="Panel" UpdateMode="Conditional">
<ContentTemplate>   
         <asp:Button ID="btnTest" runat="server" Text="Update AD Users"                      OnClick="btnUpdateADMember_Click" OnClientClick="document.getElementById('lblUpdate').innerText = 'Updating AD users...please wait. It might take several minute(s).';" />                                                
                                                <asp:UpdateProgress ID="progress" runat="server">
                                                    <ProgressTemplate>
                                                        <div style="padding-top: 10px;" align="center">
                                                            <img src="<%=VirtualPathUtility.ToAbsolute("~")%>/Documents/Images/ajax_busy.gif"
                                                                style="padding-right: 3px; padding-left: 10px;" alt="" />
                                                            <asp:Label ID="lblUpdate" runat="server" Text="Fetching data. Please wait..." />
                                                        </div>
                                                    </ProgressTemplate>
                                                </asp:UpdateProgress>
 </ContentTemplate>
 </asp:UpdatePanel>

Open in new window


When user clicks button in content template, the update progress would be visible if the code execution takes more time.

Second we have set onclientclick event of button to show users the message that they should wait until works completed along with ajax busy image. And that very same thing cannot be set from server side code.

Hope it helps you to understand.
0
 
Atdhe NuhiuAuthor Commented:
I have been googling stuff like that all day and because I still have not got anywhere I asked the question here.

That link does not answer my question
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Atdhe NuhiuAuthor Commented:
Thanks. I will take a look at that on Monday
0
 
Atdhe NuhiuAuthor Commented:
That seems to work ok in development but when I deploy it to test server the gif and accompanying text do not appear. Am I missing something?
0
 
Vikram Singh SainiSoftware Engineer cum AD DeveloperCommented:
1. The actual cause for gif could be path is not correct. As VirtualPathUtility.ToAbsolute("~") works for website hosted on virtual directory not for actual deployment of website on server.

So for setting that path part, refer to comment id 37796153 at http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_27657897.html

2. And for accompanying text: If you are using master pages, might be the lblUpdate id gets prefixed with extras by asp.net, something as ct100_lblUpdate.

So for that could you visit your rendered page's source code. And check out if the lblUpdate label is there or not. The issue is basically of javascript as I suppose.
0
 
Atdhe NuhiuAuthor Commented:
1) I dropped the VirtualPathUtility.ToAbsolute("~") and tried the image elsewhere on the form and it was displayed ok

2) I am using a master page so this looked likely.

I used OnClientClick="document.getElementById('ctl00_ContentPlaceHolder2_lblUpdate').innerText = 'Copying Auxilliary Fields from Package header to package members. Please wait...';"

But this still doesn't work and I can't see now.

Below is the source of the rendered page


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<html>
		<head><title>AuxFieldsCopy</title>

		<style type="text/css">
			.IE8Fix
			{
				z-index: 100;
			}
			</style>
		</head>
		
		<body bgcolor="#e1e8ff">
			<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
				<div>
					<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
					<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
					<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MzAwNjQ3NzBkZNxpreNmeSHMATFz9ijBYgQxGEOB" />
				</div>

				<script type="text/javascript">
					//<![CDATA[
						var theForm = document.forms['aspnetForm'];
						if (!theForm) {
							theForm = document.aspnetForm;
						}

						function __doPostBack(eventTarget, eventArgument) {
							if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
								theForm.__EVENTTARGET.value = eventTarget;
								theForm.__EVENTARGUMENT.value = eventArgument;
								theForm.submit();
							}
						}
					//]]>
				</script>

				<script src="/AuxFieldsCopy/WebResource.axd?d=BXorplrtRI8jKKKbTrPpHQ2&amp;t=634008426268081153" type="text/javascript"></script>

				<script src="/AuxFieldsCopy/ScriptResource.axd?d=MrcZMpnU39RBH8JllHm4O9Fdq8ug3RFEjbCDn59HRnjLzq5Jno94IPxBeiCoF0K3r-8Iuog4nvoaUzXC3gy-rdAF175p2uv_DHlQLhU7xKE1&amp;t=ffffffff834486da" type="text/javascript"></script>

				<script type="text/javascript">
					//<![CDATA[
					if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
					//]]>
				</script>

				<script src="/AuxFieldsCopy/ScriptResource.axd?d=MrcZMpnU39RBH8JllHm4O9Fdq8ug3RFEjbCDn59HRnjLzq5Jno94IPxBeiCoF0K3pxMzML3Y2mhcj0uO-Ekx9Ov0R2hy1COVLd9BIo60ebiV9_i9S3gKUEAUew29SxDt0&amp;t=ffffffff834486da" type="text/javascript"></script>
				
				<script src="/AuxFieldsCopy/WebResource.axd?d=9rjnnirny92jbhiV-rT1cw2&amp;t=634008426268081153" type="text/javascript"></script>

				<div>

					<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLcwdbBAgKTj/PCCXLHxQbRprD2X63FZ9EXVRQBa0SB" />
				</div>

				<div id="CONTAINER">
					<script type="text/javascript">
						//<![CDATA[
						Sys.WebForms.PageRequestManager._initialize('ctl00$asm', document.getElementById('aspnetForm'));
						Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl00$ContentPlaceHolder2$Panel'], [], [], 90);
						//]]>
					</script>

				<div id="TITLE">
					<table>
						<tr>
							<td style="width: 350px;">
								<img id="ctl00_Image1" src="2738.gif" style="border-width:0px;" />
							</td>
							<td>
								<h2>Auxilliary Fields Copy</h2>
							</td>
						</tr>
					</table>
					<table>
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>
				</div>

				<div id="MAIN">

					<div id="ctl00_ContentPlaceHolder2_Panel">

						<div id="ctl00_ContentPlaceHolder2_Panel1" style="height:425px;">

							<div id="ctl00_ContentPlaceHolder2_progress" style="display:none;">

								<div style="position: absolute; top: 350px;  left: 50px; padding-top: 10px;" align="center">
									<img src="ajax_busy.gif" style="padding-right: 3px; padding-left: 10px;" alt="" />
									
									<span id="ctl00_ContentPlaceHolder2_lblUpdate">Running update. Please wait...</span>
								</div>
							</div>

							<div style="position: absolute; top: 200px;  left: 50px;  height: 136px; width: 232px; background-color: #d1e8ff; z-index: 10;">

								<input type="submit" name="ctl00$ContentPlaceHolder2$btnRun" value="Run" onclick="document.getElementById('ctl00_ContentPlaceHolder2_lblUpdate').innerText = 'Copying Auxilliary Fields from Package header to package members. Please wait...';" id="ctl00_ContentPlaceHolder2_btnRun" style="position: absolute; top: 99px; left: 79px; width: 60px; height: 30px;" />

								<span id="ctl00_ContentPlaceHolder2_Label1" style="position: absolute; top: 20px; left: 15px; width: 202px; height: 65px;">Script to copy Auxilliary Fields from Package header to package members</span>

							</div>
						</div>
					</div>
				</div>
			</div>

			<script type="text/javascript">
				//<![CDATA[
				WebForm_AutoFocus('ctl00_ContentPlaceHolder2_btnRun');Sys.Application.initialize();
				Sys.Application.add_init(function() {
					$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, 		$get("ctl00_ContentPlaceHolder2_progress"));
				});
				//]]>
			</script>
		</form>
	</body>
</html>

Open in new window

0
 
Atdhe NuhiuAuthor Commented:
I ran it under ie and got a script error relating to ScriptResource.axd

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Timestamp: Tue, 3 Apr 2012 10:51:07 UTC


Message: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
Line: 4723
Char: 21
Code: 0
URI: http://thk01-dev-lon/AuxFieldsCopy/ScriptResource.axd?d=MrcZMpnU39RBH8JllHm4O9Fdq8ug3RFEjbCDn59HRnjLzq5Jno94IPxBeiCoF0K3r-8Iuog4nvoaUzXC3gy-rdAF175p2uv_DHlQLhU7xKE1&t=ffffffff834486da

Open in new window

0
 
Vikram Singh SainiSoftware Engineer cum AD DeveloperCommented:
0
 
Atdhe NuhiuAuthor Commented:
Well I started from scratch and got it working. I still don't know what was wrong with my initial effort but there you go.

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.