Step-1 Open the visual studio go to File> New>Project and click on project
Step-2 Select Asp.Net Web application project like below
Step-3 Add the 2 form in your project one is Download.aspx and other you can say test2.aspx
Step-4 Copy and paste below code on test2.aspx page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Loader</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript">
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);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="ShowProgress();" Width="82px" /> </td>
</tr>
<tr>
<td>
<iframe id="iframe1" src="" runat="server" style="visibility:hidden" ></iframe>
</td>
</tr>
</table>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />
</div>
</form>
</body>
</html>
using System;
namespace TestSpinner
{
public partial class test2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
iframe1.Attributes.Add("src", "Download.aspx");
}
}
}
Step-6 Now open Download.aspx page. copy and paste below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Download.aspx.cs" Inherits="TestSpinner.Download" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
var loading = $(".loading");
loading.hide();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Step-7 Right click on Download.aspx page and click on view code and paste below code
using System;
using System.Data;
namespace TestSpinner
{
public partial class Download : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GenerateExcelFile();
}
private void GenerateExcelFile()
{
Response.ClearContent();
Response.Buffer = true;
Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Customers.xls"));
Response.ContentType = "application/ms-excel";
DataTable dt = BindDatatable();
string str = string.Empty;
foreach (DataColumn dtcol in dt.Columns)
{
Response.Write(str + dtcol.ColumnName);
str = "\t";
}
Response.Write("\n");
foreach (DataRow dr in dt.Rows)
{
str = "";
for (int j = 0; j < dt.Columns.Count; j++)
{
Response.Write(str + Convert.ToString(dr[j]));
str = "\t";
}
Response.Write("\n");
}
Response.End();
}
protected DataTable BindDatatable()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Location", typeof(string));
dt.Rows.Add(1, "Rahul", "M.Tech", "Delhi");
dt.Rows.Add(2, "Haresh", "BBA", "USA");
dt.Rows.Add(3, "Mark", "LLB", "USA");
dt.Rows.Add(4, "John", "B.Sc", "USA");
dt.Rows.Add(5, "Kim", "Graduate", "USA");
dt.Rows.Add(6, "DC", "MCA", "Moradabad");
return dt;
}
}
}
Add below image in project or any other image you can use just you have to change the name in test2.aspx page there we have below code
<img src="loader.gif" alt="" />
Build the project and run it .
No comments:
Post a Comment