Asynchronous JavaScript

This article show how to assign Asynchronous JavaScript with XmlHttpRequest (AJAX) tehnology and progress dialog.

In order to assign AJAX at once you will have to follow this steps:

• Download Ajax.Net dll library from http://ajax.schwarz-interactive.de/csharpsample/default.aspx
• Add reference to Ajax.dll into your project
• Set up the HttpHandler, in the Sample web.config insert the HttpHandler, like this:

  <configuration>
   <system.web>
     <httpHandlers>
  	<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>  
    
   ...
   <system.web>
  </configuration>

• In the Page_Load event of the ProgressBar Webform, call the following function:

  Ajax.Utility.RegisterTypeForAjax(typeof(ProgressBar));

• Add Ajax method to the ProgressBar WebForm like below, this function will be called from JavaScript and return the upload progress information.
  The returning information is returned as an array (ArrayList in fact) it could be easily extended with any additional information.

  [Ajax.AjaxMethod()]
  public
  ArrayList GetProgressInfo(string FormId) {
  ArrayList
  	values = new ArrayList(); //
  	
  	the function returns array of string where //
  	1st element: progress status //
  	2nd element: progress 
  	value  // upload progress percent or 
  	// -1 - waiting for start
  	// -2 - upload canceled 
  	// -3 - upload finished
  	// 3rd element: The Mediachase form unique id.
  	// 4th element: Estimated uploading time
  	// 5th element: Remaining uploading time
  
  	FormInfo	form = McFormProgress.GetFormInfo(FormId);
  	if(form==null)
  	{
  		values.Add("Wait for Uploading Starts");
  		values.Add("-1");
  	}
  	else
  	{
  		if(form.IsCanceled)
  		{
  			if(form.IsCompleted)
  			{
  				values.Add("Upload canceled.");
  				values.Add("-2");
  			}
  			else 
  			{
  				values.Add("Upload is canceling. Please wait.");
  				values.Add("-2");
  			}
  		}
  		else if (form.IsCompleted)
  		{
  			if (form.BytesTotal != form.BytesReceived)
  			{
  				values.Add("Uploading Failed");
  				values.Add("-2");
  			}
  			else
  			{
  				values.Add("Uploading Completed Sucessfully");
  				values.Add("-3");
  			}
  		}
  		else
  		{
  			values.Add("Uploaded " + (form.BytesReceived / 
                          1024).ToString() +" Kb of " + 
                              (form.BytesTotal / 1024).ToString() + 
                              " Kb. Current file " + form.CurrentFileName);
  
  			int percents = (int)((float)form.BytesReceived / 
                       	(float)form.BytesTotal * 100);
  			values.Add(percents.ToString());
  		}
  	}
  	values.Add(FormId);
  	values.Add(form.EstimatedTime);
  	values.Add(form.TimeRemaining);
  	return values;
  }
  											

• Modify Progress.aspx to allow changing a Progress bar from the java script. Give the name tdBar to the first table cell:

  <tr style="HEIGHT:18px">
  	<td id="tdBar" class="ms-vb" style="background-color:#000099;width:0%;"></td>
  	<td class="ms-vb" style="background-color:White;width:60%;"></td>
  </tr>
  										
  											

• In Progress.aspx the following java script code is placed:

  	function refresh(formId)
  	{
  		ProgressBar.GetProgressInfo(formId, callback);
  	}
  	function callback(response)
  	{
  document.getElementById('<%=lblTransferred.ClientID%>').innerHTML 
      = response.value[0];
  		if (response.value[1]=="-2")
  		{
  document.getElementById('<%=dClose.ClientID%>'). style.display ='block';
  		}
  		else if (response.value[1]=="-3")
  		{
  document.getElementById('<%=dClose.ClientID%>'). style.display='block';
  if (document.getElementById('<%=cbClose.ClientID%>'). checked==true)
  			{
  				window.close();
  			}	
  		}
  		else response.value[1]!="-1"
  		{
  document.getElementById('tdBar').style.width = 
  response.value[1] + '%';
  
  			setTimeout('refresh("' + response.value[2] + '")', 2000)		
  		}
  	}											
  											

• To start the refresh timer the following code should be added into Page_Load event of the ProgressBar Webform:
  where ID is a property returning Request["ID"].

  body.Attributes.Add("onload","setTimeout('refresh(\"" + ID + "\")', 20)");