Progressbar in ASP.NET using AJAX
Progressbar control is not in ASP.NET control,But we can create the progressbar using Ajax UpdateProgress control.
Following is the code of of how we can create the progressbar in ASP.NET.
Just create a new ASPX page ,then delete all code from the HTML page and paste the following code.Be sure that the website already has the ajaxcontroltoolkit
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script runat="server">
protected void UploadFile(object src, EventArgs e)
{
if (myFile.HasFile)
{
string strFileName;
int intFileNameLength;
string strFileExtension;
strFileName = myFile.FileName;
intFileNameLength = strFileName.Length;
strFileExtension = strFileName.Substring(intFileNameLength - 4, 4);
if (strFileExtension == ".txt")
{
try
{
myFile.PostedFile.SaveAs(Server.MapPath(".") + "//Upload//AJAXUpload.txt");
lblMsg.Text = strFileName + " Uploaded successfully!";
}
catch (Exception exc)
{
lblMsg.Text = exc.Message;
}
}
else
{
lblMsg.Text = "Only Text File (.txt) can be uploaded.";
}
}
else
{
lblMsg.Text = "Please select a file!";
}
}
</script>
<script language="javascript" type="text/javascript">
function showWait()
{
if ($get('myFile').value.length > 0)
{
$get('UpdateProgress1').style.display = 'block';
}
}
</script>
<title>File Upload</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="myFile" runat="server" />
<asp:Label ID="lblMsg" runat="server"></asp:Label>
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="UploadFile" OnClientClick="javascript:showWait();"/>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Label ID="lblWait" runat="server" BackColor="#507CD1" Font-Bold="True" ForeColor="White" Text="Please wait ... Uploading file"></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
About Me
Visitor Map
My Blog List
Popular Posts
-
Free HL7 Parser: The HL7(Health Level 7) message is very familior to the people who are working on HealthCare Projects.It is like a plain tx...
-
The MSChart control is an external ActiveX control that lets you add charting capabilities to your applications. You can create two- and thr... -
Gridview can be scrollable if it is put under a div with the overflow property.But if we scroll down the div ,the grid are go down and heade... -
Step 1-Create a Asp.NET Web Application project "CustAppPage" and a class library project "CustAppPageClassLib" and make... -
Most applications are currently written on top of relational databases. At some point, these applications will have to interact with the dat... -
In few cases we need to show yes now popup instead of OK Cancel confirm dialog box. You can do it by the following code. Write the following... -
Quotation is one of the important aspect of software cycle. Any prediction less or more will affect the project a lot. Lets look at how basi... -
Database Mirroring is a technology for increasing database availability. Database Mirroring transfers transaction log records from one serve... -
Two Dropdownlist within a Gridview with autopostback / how to get selectedindexchanged event of dropdown in a gridview In many cases,we nee...
18 comments:
Hello there..thanks for your help...but it's not working with MasterPage.Any suggestions?
Thanks in advance
Hi Tom,What the error is showing when you are using master page?
Thanks for quick response...The think is that your lblWait not appears when
Triggers
asp:PostBackTrigger ControlID="btnUpload"
Triggers
it appears only if
Triggers
asp:AsyncPostBackTrigger ControlID="btnUpload"
Triggers
but then the myFile.HasFile returns False...
Hi Tom,Thanks for your interest.
Please modify the showWait function as follows when using masterpage.
function showWait()
{
if ($get('<%=myFile.ClientID %>').value.length > 0)
{
$get('<%=UpdateProgress1.ClientID %>').style.display = 'block';
}
}
OOOOOOOOOOOOO!!!You are just amazing!!!!!!:-)i was looking for this, over a week and none good give me such a quick and simple solution!!!!thanks again and again!!!!
Hi Tom,Thanks for visit my site.Hope you will discuss more problem in future.Please keep in touch,My mail id is manab.it@gmail.com
Hi Manab..how are you?i hope you are fine!i would like to ask you something.I put an animation gif (i found it from http://www.chimply.com/) instead of lblWait.
Everything it's ok with Mozilla but with Internet Explorer the gif isn't animation..it appears just like simple gif.
Do you have any idea why does it happen?
Thanks!
Tom
I have used the following code to show both the Image & the label,but I have not faced any problem to show the animation in IE.
<asp:UpdateProgress ID="ajaxProgress" DynamicLayout="false" runat="server">
<ProgressTemplate>
<asp:Image runat="server" ID="imgUpdating"
ImageAlign="middle"
ImageUrl="../images/27.gif" />
<asp:label runat="server" ID="lblUpdating"
Text="In progress!"
ForeColor="DarkGray"
Font-Size="small" />
</ProgressTemplate>
</asp:UpdateProgress>
you can check your IE setting. and follow the article
http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer
and
http://forums.asp.net/t/1226536.aspx
please let me know If you face any problem
By the way,which version of IE are you using?
Sorry Tom,forgot to response your another question :)
Me fine,Struggling to get a good project :)
What about you?
Hi Manab,first af all thanks for your interest...I'm fine..(i'm new in asp so..i have many things to learn and do :)
i check out your suggestion but i didn't found solution.Here is the thing:
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"
script language="javascript" type="text/javascript"
function showWait()
if ($get(myFile.ClientID).value.length > 0)
$get(UpdateProgress1.ClientID).style.display = block;
script
style type="text/css"
...
style
asp:Content
asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"
form id="Form1" enctype="multipart/form-data" method="post" action="Import.aspx"
asp:ScriptManager ID="ScriptManager1" runat="server"
asp:FileUpload ID="myFile" runat="server"
asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Always"
ContentTemplate
asp:Button ID="btnUpload" runat="server" Text="Import Excel File" OnClientClick="javascript:showWait();" CssClass="ButtonStyle" Height="26px"
div id="div1"
style=" position:relative; margin-left: 160px; vertical-align: middle; text-align: right; top: 71px; left: 76px;width: 150px;"
asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="UpdateProgress1" runat="server"
ProgressTemplate
div id="progressBackgroundFilter" div
div id="processMessage"
asp:Panel ID="PanelProgress" runat="server" Width="120px" Height="120px" BackColor="White"
HorizontalAlign="Center"
img src="Images/icon.gif" alt="Loading" br
asp:Label ID="lblCalc" runat="server" CssClass="LabelProgress" Text="Please wait..." asp:Label
asp:Panel
div
ProgressTemplate
asp:UpdateProgress div
ContentTemplate
Triggers
asp:PostBackTrigger ControlID="btnUpload"
Triggers
asp:UpdatePanel
form
asp:Content
(vb.code)
If (myFile.HasFile) Then
UserMsgBox("You must specify file to upload!")
End If
Public Sub UserMsgBox(ByVal sMsg As String)
Dim sb As New StringBuilder()
Dim oFormObject As System.Web.UI.Control = Nothing
sMsg = sMsg.Replace("'", "\'")
sMsg = sMsg.Replace(Chr(34), "\" & Chr(34))
sMsg = sMsg.Replace(vbCrLf, "\n")
sMsg = "script language=javascript
alert(""" & sMsg & """)
script>
sb = New StringBuilder()
sb.Append(sMsg)
For Each oFormObject In Me.Controls
If TypeOf oFormObject Is HtmlForm Then
Exit For
End If
Next
' Add the javascript after the form object so that the
' message doesn't appear on a blank screen.
oFormObject.Controls.AddAt(oFormObject.Controls.Count, New LiteralControl(sb.ToString()))
End Sub
Just to remind, everything it's ok with Firefox,the problem is with IE(i use IE7),the gif isn't animation.I suppose that there is aproblem with the UserMsgBox i use...but i can't understand what exactly is....
OK Tom,I am giving a very simple solution for the time being so that you can satisfy your supervisor :)
On the Internet Explorer menu bar:
Select Tools.
Click Internet Options.
In the Internet Options dialog box:
Select the Advanced tab.
On the Advanced tab, under Settings: Multimedia:
Turn the Play animations in web pages setting on or off by selecting or clearing its check box.
To save your settings and close the dialog box:
Click OK.
Now run your application from your .NET IDE/IIS
thanks Manab,but unfortunately nothing changes...freeze gif again! :-( any other suggestion?
Tom ,
I will try to solve the problem.As I am not feeling the problem from my end,it will take Some time
thanks Manab, i understand....i hope you find the solution.If i find something i will tell you...
Let me ask you something..The code i wrote above looks ok to your IE?(using and the "UserMsgBox")
Hi,Manab...how are you?i hope everything ok!
As i can see my problem with IE is the showWait() function.
At the begging i thought that it was "UserMsgBox",as i told you,but also when i don't use it,the gif remains not animated.
hi again! :-) i found what's going on with IE
script language="javascript" type="text/javascript"
function showWait()
if ($get(myFile.ClientID).value.length > 0)
$get(UpdateProgress1.ClientID).style.display = block;
setTimeout('document.images["myAnimatedImage"].src="Images/5999.gif"', 200)
script
and
img src="" alt="Loading" id="myAnimatedImage"/>
and now everything it's ok with mozila and IE
Hi Tom,I am fine.Thanks a lot for your effort.it also help me a lot.Now tell me something about you.you can send me the mail also regarding your self.Ok bye .Hope you will be keep in touch.
Post a Comment