Search This Blog

2009-04-29

Progressbar in Ajax

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>

18 comments:

Tom said...

Hello there..thanks for your help...but it's not working with MasterPage.Any suggestions?

Thanks in advance

Manab Ranjan Basu said...

Hi Tom,What the error is showing when you are using master page?

Tom said...

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...

Manab Ranjan Basu said...

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';
}
}

Tom said...

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!!!!

Manab Ranjan Basu said...

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

Tom said...

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!

Manab Ranjan Basu said...

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?

Manab Ranjan Basu said...

Sorry Tom,forgot to response your another question :)
Me fine,Struggling to get a good project :)
What about you?

Tom said...

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....

Manab Ranjan Basu said...

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

Tom said...

thanks Manab,but unfortunately nothing changes...freeze gif again! :-( any other suggestion?

Manab Ranjan Basu said...

Tom ,
I will try to solve the problem.As I am not feeling the problem from my end,it will take Some time

Tom said...

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")

Tom said...

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.

Tom said...

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

Manab Ranjan Basu said...
This comment has been removed by the author.
Manab Ranjan Basu said...

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.