We are using MVC3 in our project and we have requirement to export the data to CSV file.
So whenever user click on the export button we want to show the loading bar symbol till the download dialog open to Save, open or Cancel the file. Since this is a synchronous request and we are returning the Filecontents as Actionresult from controller so we are unable to block the screen or show loading bar till the request completion.
Please let me know if is there any way to block the screen until the CSV file download dialog opens
SOLUTION 1:
You can use this script.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = "UpdateProgress executed";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET C# AJAX UpdateProgress with block screen Popup Loading</title>
<style type="text/css">
.UpdateProgressContent{
padding: 40px;
border: 1px dashed #C0C0C0;
background-color: #FFFFFF;
width: 200px;
text-align: center;
vertical-align: bottom;
z-index: 1001;
top: 40%;
margin:0px;
margin-left:-141px;
position: absolute;
}
.UpdateProgressBackground
{
margin:0px;
padding:0px;
top:0px; bottom:0px; left:0px; right:0px;
position:absolute;
z-index:1000;
background-color:#cccccc;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Execute UpdateProgress Popup"
onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<script type="text/javascript">document.write("<div class='UpdateProgressBackground'></div>");</script>
<center><div class="UpdateProgressContent">Loading...</div></center>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
Let me know if you have any question(s)
Regards,
Hari
So whenever user click on the export button we want to show the loading bar symbol till the download dialog open to Save, open or Cancel the file. Since this is a synchronous request and we are returning the Filecontents as Actionresult from controller so we are unable to block the screen or show loading bar till the request completion.
Please let me know if is there any way to block the screen until the CSV file download dialog opens
SOLUTION 1:
You can use this script.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = "UpdateProgress executed";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET C# AJAX UpdateProgress with block screen Popup Loading</title>
<style type="text/css">
.UpdateProgressContent{
padding: 40px;
border: 1px dashed #C0C0C0;
background-color: #FFFFFF;
width: 200px;
text-align: center;
vertical-align: bottom;
z-index: 1001;
top: 40%;
margin:0px;
margin-left:-141px;
position: absolute;
}
.UpdateProgressBackground
{
margin:0px;
padding:0px;
top:0px; bottom:0px; left:0px; right:0px;
position:absolute;
z-index:1000;
background-color:#cccccc;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Execute UpdateProgress Popup"
onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<script type="text/javascript">document.write("<div class='UpdateProgressBackground'></div>");</script>
<center><div class="UpdateProgressContent">Loading...</div></center>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
Let me know if you have any question(s)
Regards,
Hari
Hello, my name is Monikandan. I'm a 40 year old self-employed ML Group from the Nagercoil.
You can use the Jquery plugin to block the screen or to show the progress bar.
ReplyDeletehttp://jquery.malsup.com/block/#demos
Thanks,
Mehta.