Many times it may asked by customer to show Progress Bar while generating reports and export them in PDF/Excel or any other format.
You can not perform any operation on code behind after just Postback if you are calling below statements just to extract the data in files.
Response.Clear();
Response.ClearHeaders();
Response.AppendHeader("content-type", "application/pdf");
Response.AppendHeader("Content-Disposition", "attachment; filename=" + "Activity.pdf");
Response.BinaryWrite(result);
Response.Flush();
Response.End();
// Hide Progress Bar
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "unload", "javascript:HideProgress()", true);
Above script statement will not affect the loading bar as Response.End() Forcing Web server to stop processing the script and return the current result.
Below is the solution for that.
1. Created Below JS methods to show/hide the Progress Bar
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
function HideProgress() {
setTimeout(function () {
var loading = $(".loading");
if (loading != null && loading != 'undefined')
loading.hide();
}, 1000);
setTimeout(function () {
var modal = $(".modal");
if (modal != null && modal != 'undefined')
modal.hide();
}, 1000);
}
2. Call the JS method namely ShowProgress() wherever you want progress bar to come across like onclick on the button/Anker tag etc..
<asp:LinkButton runat="server" ID="printSelected" OnClick="printSelected_Click" OnClientClick="form1.target='_self'; ShowProgress();" ToolTip="Print">
Print
</asp:LinkButton>
On Code behind .cs file
protected void printSelected_Click(object sender, EventArgs e)
{
WriteFile();
}
private void WriteFile()
{
string sFileName = System.IO.Path.GetRandomFileName();
string sGenName = "Friendly.txt";
using (System.IO.StreamWriter SW = new System.IO.StreamWriter(
Server.MapPath("~/Activities/" + sFileName + ".txt")))
{
SW.WriteLine("test data");
SW.Close();
}
System.IO.FileStream fs = null;
fs = System.IO.File.Open(Server.MapPath("~/Activities/" +
sFileName + ".txt"), System.IO.FileMode.Open);
byte[] btFile = new byte[fs.Length];
fs.Read(btFile, 0, Convert.ToInt32(fs.Length));
fs.Close();
// ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "unload", "javascript:HideProgress()", true);
Response.AddHeader("Content-disposition", "attachment; filename=" +
sGenName);
Response.ContentType = "application/octet-stream";
Response.BinaryWrite(btFile);
Response.End();
Response.Flush();
}
3. Put below script block anywhere in the script block: Which is hiding the Progress bar before the unload of the document.
$(window).bind('beforeunload', function () { HideProgress(); });
That's all using which you can implement progress bar.
Cheers!
You can not perform any operation on code behind after just Postback if you are calling below statements just to extract the data in files.
Response.Clear();
Response.ClearHeaders();
Response.AppendHeader("content-type", "application/pdf");
Response.AppendHeader("Content-Disposition", "attachment; filename=" + "Activity.pdf");
Response.BinaryWrite(result);
Response.Flush();
Response.End();
// Hide Progress Bar
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "unload", "javascript:HideProgress()", true);
Above script statement will not affect the loading bar as Response.End() Forcing Web server to stop processing the script and return the current result.
Below is the solution for that.
1. Created Below JS methods to show/hide the Progress Bar
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
function HideProgress() {
setTimeout(function () {
var loading = $(".loading");
if (loading != null && loading != 'undefined')
loading.hide();
}, 1000);
setTimeout(function () {
var modal = $(".modal");
if (modal != null && modal != 'undefined')
modal.hide();
}, 1000);
}
2. Call the JS method namely ShowProgress() wherever you want progress bar to come across like onclick on the button/Anker tag etc..
<asp:LinkButton runat="server" ID="printSelected" OnClick="printSelected_Click" OnClientClick="form1.target='_self'; ShowProgress();" ToolTip="Print">
</asp:LinkButton>
On Code behind .cs file
protected void printSelected_Click(object sender, EventArgs e)
{
WriteFile();
}
private void WriteFile()
{
string sFileName = System.IO.Path.GetRandomFileName();
string sGenName = "Friendly.txt";
using (System.IO.StreamWriter SW = new System.IO.StreamWriter(
Server.MapPath("~/Activities/" + sFileName + ".txt")))
{
SW.WriteLine("test data");
SW.Close();
}
System.IO.FileStream fs = null;
fs = System.IO.File.Open(Server.MapPath("~/Activities/" +
sFileName + ".txt"), System.IO.FileMode.Open);
byte[] btFile = new byte[fs.Length];
fs.Read(btFile, 0, Convert.ToInt32(fs.Length));
fs.Close();
// ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "unload", "javascript:HideProgress()", true);
Response.AddHeader("Content-disposition", "attachment; filename=" +
sGenName);
Response.ContentType = "application/octet-stream";
Response.BinaryWrite(btFile);
Response.End();
Response.Flush();
}
3. Put below script block anywhere in the script block: Which is hiding the Progress bar before the unload of the document.
$(window).bind('beforeunload', function () { HideProgress(); });
That's all using which you can implement progress bar.
Cheers!
