Project Description
In real-world web applications, we usually see that nowadays almost any web application exports a file from the server back to the client, all of those using full postback to the server. Sometimes, you don't want to do as this. Because maybe the stuff which you really would like to show the progress status of exporting file from the server. This will do for your web application richer than and greater than. Best of all, there is a good performance on your web application. In order to help you this, I have written a library that enables any web developers to export file using jQuery. The following is these features of this library:

  1. Export file from the server by three ways: Normal, Progress and ProgressBar.
  2. Ability to calculate the elapsed time and show the progress bar(%) in ProgressBar way.
  3. Ability to customize onSuccessCallBack and onFailCallBack functions in ProgressBar way.

Unit Testing
Tested OK on IE 7, 8, 9 and 10; Google Chrome; Opera; Safari; Firefox.

Usage
In order to use this library, you must include jQuery 1.7.2 or higher version before it. Please don't worry this, I also attached it along with this library. The following is the example code for this:

<script src="/Scripts/jquery-1.7.2.min.js"></script>
<script src="/Scripts/jquery-unified-export-file-1.0.min.js"></script>
<script type="text/javascript">
      $(function () {
          $.UnifiedExportFile({ action: '/', data: { IsExportExcel: true }, downloadType: 'Progress', ajaxLoadingSelector: '#loading' });
      });
</script>

Normal way
This way will be default one in this library. For this, you won't see the progress status of exporting file from the server back to the client. For instance: suppose that we will export file from the server back to the client by using a flag(IsExportExcel = True) with action "/". We did the response data as excel binary stream on the server side code. And the following code is to demonstrate export file using this way:

<script src="/Scripts/jquery-1.7.2.min.js"></script>
<script src="/Scripts/jquery-unified-export-file-1.0.min.js"></script>
<script type="text/javascript">
      $(function () {
          $.UnifiedExportFile({ action: '/', data: { IsExportExcel: true }, downloadType: 'Normal' });
      });
</script>

Progress way
For this way, you will see the progress status of exporting file from the server back to the client. Also, you have to response a cookie(Downloaded=True) back to the client. Here, the progress status can be text "Loading..." or any text or ajax loading image. For instance: we will get the specification same as the example at Normal way

<script src="/Scripts/jquery-1.7.2.min.js"></script>
<script src="/Scripts/jquery-unified-export-file-1.0.min.js"></script>
<script type="text/javascript">
      $(function () {
          $.UnifiedExportFile({ action: '/', data: { IsExportExcel: true }, downloadType: 'Progress', ajaxLoadingSelector: '#loading' });
      });
</script>
<div>
      <img id="loading" src="[YourGifImage]" title="Ajax Loading" alt="Ajax Loading"/>
</div>

ProgressBar way
For this way, you will also see the progress status of exporting file from the server back to the client. Here, the progress status contains not just text "Loading..." or any text or ajax loading image but also progress bar. For instance: we will get the specification same as the example at Normal way:

<script src="/Scripts/jquery-1.7.2.min.js"></script>
<script src="/Scripts/jquery-unified-export-file-1.0.min.js"></script>
<script type="text/javascript">
      $(function () {
          $.UnifiedExportFile({ action: '/', data: { IsExportExcel: true }, downloadType: 'ProgressBar', ajaxLoadingSelector: '#loading' });
      });
</script>
<div>
      <img id="loading" src="[YourGifImage]" title="Ajax Loading" alt="Ajax Loading"/>
</div>

In additional, you can customize two callback functions: onSuccessCallBack and onFailCallBack. The following is the demo example for this:

 

<script src="/Scripts/jquery-1.7.2.min.js"></script>
<script src="/Scripts/jquery-unified-export-file-1.0.min.js"></script>
<script type="text/javascript">
      $(function () {
          $.UnifiedExportFile({ 
			action: '/', 
			data: { IsExportExcel: true }, 
			downloadType: 'ProgressBar', 
			ajaxLoadingSelector: '#loading', 
			onSuccessCallBack: function () {
			    alert('Completed exporting file from the server back to the client');
			}, 
			onFailCallBack: function () {
			    alert('Fail to export file from the server back to the client');
			}
 	});
      });
</script>
<div>
      <img id="loading" src="[YourGifImage]" title="Ajax Loading" alt="Ajax Loading"/>
</div>

 

The following is the details specification about all options in this library:

 No. Name Description
1 action This default value is '/'. Here's action URL used for making a call "GET" to the server.
2 data This default value is {}. It is used for creating query strings and pass along with action to the server.
3 downloadType This default value is 'Normal'. It consists of 3 values: Normal, Progress and ProgressBar. This value is case-sensitive.
 4 ajaxLoadingSelector  This default value is '.ajax-loading'. Here's an ajax loading element.
 5 maximumBar  This default value is 400. Its measure unit is pixel. This property is used for calculating the elapsed time and progress bar changed.
 6 progressBarSelector  This default value is '.progress'. Here's a progress bar element.
 7 calculatingSelector  This default value is '.cal-progress'. Here's a calculation elapsed time progress element.
 8

onSuccessCallBack

onFailCallBack 

 This default value of onSuccessCallBack is the default success callback(only support in ProgressBar way).

 This default value of onFailCallBack is the default fail callback(only support in ProgressBar way).

In order to know the further performance of this library, please click here to view two example projects written by asp.net web forms and asp.net MVC using this plugin.

If you have any question, please contact me via email(kevin_ly_1989@outlook.com) or my blog(http://dotnetmagazines.wordpress.com/).

Last edited Aug 29, 2013 at 3:49 PM by kevin_ly_1989, version 8