I am trying to put a rotating wheel popup on the page while I am executing backend code for fetching new data from DB.
Here is what I tried, but it doesn't want to work so far, nothing gets displayed.
I want to display something when the checkbox is clicked (CheckedChanged), that's when something is fetching from db.
Here is the ajax code I have:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
id="updateProgress" runat="server">
<progresstemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage"> Loading...<br /><br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
And here is the checkbox control:
<asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything" ForeColor="White"
Visible="false" AutoPostBack="True"
oncheckedchanged="cbAll_CheckedChanged" />
Modify your code a bit.
You do not need the trigger, the event has AutoPostBack checkbox.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<%--<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbAll" EventName="CheckedChanged" />
</Triggers>--%>
<ContentTemplate>
<asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything"
ForeColor="White" Visible="false" AutoPostBack="True" OnCheckedChanged="cbAll_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="updateProgress" runat="server">
<ProgressTemplate>
<div id="progressBackgroundFilter">
</div>
<div id="processMessage">
Loading...<br />
<br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I hope this helps.
I've done something like this in the past by skipping the update progress control and instead handling the PageRequestManager beginRequest and endRequest events. In my case I also wanted to block the ui of the page, so I used the jQuery blockUI plugin.
Put the following div somewhere at the root of your page:
<div id="processMessage">
Loading...
<br />
<br />
<img src="/images/ajax-loader.gif" alt="Loading" />
</div>
And style it with the following css:
#updatingDiv
{
width: 75px;
height: 75px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
display: none;
background-color: #EEEEEE;
border: solid 1px #AAAAEE;
}
Add the following JavaScript:
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() {
$.blockUI({ message: $('#updatingDiv'), css: { border: 'none', background: 'transparent'} });
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
$.unblockUI();
});
});
You'll need to be sure to include the jQuery library and the blockUI plugin I mentioned earlier.
Of course, you can modify the css/html to suit your needs.
Try this, and don t forget the script manager blog.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
</Triggers>
<ContentTemplate>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1" id="updateProgress" runat="server">
<progresstemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage"> Loading...<br /><br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
</ContentTemplate>
</asp:UpdatePanel>
Source
`
.divWaiting
{
position: absolute;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: 40%;
}
.divWaiting #div1
{
position: relative;
top: 0;
left: 0;
background-color: White;
width: 180px;
left: 460px;
border: 2px solid #870307;
border-radius: 6px;
text-align: center;
}
Download .gif image for rotating wheel
Related
Hi I am doing a social network service using asp.net/c#, I have little problems with message sending.
when i am starting to send message scroll display like this. when i press send message it shows old message first and scroll is top, but i want newer message it mean's when i page loaded page should be showed new messages first
my aspx codes
<div style=" overflow-y:auto; height:368px; margin-top: -50px; border-top-style: groove; border-right-style: groove; border-left-style: groove; width: 602px; margin-left: 0px;" >
<asp:Repeater runat="server" ID="Repeater1" >
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: -10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #fffff0; border-left-color: #BBCEB3; border-right-color: #BBCEB3; border-top-style: groove; border-bottom-style: groove;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl='<%#Eval("SProfilePic") %> ' Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderName") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 400px; background-color: #C0C0C0;">
<asp:Label ID="Label11" runat="server" Text="" Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
Put server controller there for example this:
<asp:Button ID="BtnOutside" runat="server" Text="Random" style="margin-left:-999px;" />
And then use
Page.SetFocus(Me.BtnOutside.ClientID);
To get focus to that button which is not visible to the client because of the negative margin. This should push the scroll bar to the bottom.
Put this in your code wherever you want to Focus on -- You can use this
multilple times in the same code set just change the "ID"
<asp:Button ID="FocusBottom" runat="server" Text="Random" style="margin-left:-999px;"
In the event(button click whatever) put in this.
Page.SetFocus(FocusBottom);
Change the (#######) to "ID" you want to call
Presently, I am using file upload control for uploading files on SQL server through ASP.NET (using C#) successfully. Now I am trying to make as page like this
<body>
<form id="form1" runat="server">
<p style="font-family: Tahoma; font-weight: 700; font-size: medium; color: #0000CC">
Performance Feedback From Zonal Railways<p style="font-family: Tahoma; font-weight: 700; font-size: small; color: #990000">
Performance feedback of :
<asp:TextBox ID="equipment" runat="server" ></asp:TextBox>
<p style="font-family: Tahoma; font-weight: 700; font-size: small; color: #990000">
Uploaded by :
<asp:TextBox ID="uploadedby" runat="server" ></asp:TextBox>
<p class="style1">
<strong>Letter Date : <asp:TextBox ID="Letterdt" runat="server" ></asp:TextBox>
</strong></p>
<div>
<span class="style1"><strong>Select File to Upload :</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload File" />
<br />
<asp:Label ID="lblMessage" runat="server" Text="" Font-Names = "Arial"></asp:Label>
</div>
</form>
<p>
<span class="style2"><strong>Back</strong></span>
<span class="style3"><strong>Home</strong></span></p>
</body>
Please suggest any readymade example for meet the requirment or any code.
Here's a link where you can learn how to upload files to SQL Server Database
http://www.aspsnippets.com/Articles/Upload-and-Download-files-from-SQL-Server-Database-in-ASPNet.aspx
I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.
You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>
I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.
I have a Crystal Report in UpdatePanel. I want to use a ajax loading image when the crystalreportviewer loading data, but my code don't display the image.
<asp:UpdatePanel ID="uppnlAll" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlReport" runat="server" ScrollBars="Horizontal" Width="100%">
<CR:CrystalReportViewer ID="crlAll" runat="server" AutoDataBind="true" BackColor="AntiqueWhite" HasCrystalLogo="False" EnableDatabaseLogonPrompt="False" EnableParameterPrompt="False" GroupTreeStyle-BackColor="#CCCCCC" PrintMode="ActiveX" Width="100%" ShowAllPageIds="true" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="crlAll" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="ajaxUpPro" DynamicLayout="false">
<ProgressTemplate>
<img src="../Images/ajax-loader1.gif" alt="Loading..."/> Loading...
</ProgressTemplate>
</asp:UpdateProgress>
Help me!
Try this way
<asp:UpdateProgress ID="ajaxUpPro" runat="server" AssociatedUpdatePanelID="uppnlAll"
DisplayAfter="2">
<ProgressTemplate>
<center style="height: 115px; width: 123px;" dir="ltr">
<img id="Img3" alt="Loading" src="Images/ajax-loader1.gif" runat="server" style="vertical-align: middle;
height: 71px; width: 100px;" /></center>
<cc1:AlwaysVisibleControlExtender ID="UpdateProgressVisibilityExtenderLeave3" runat="server"
TargetControlID="uppnlAll" VerticalSide="Middle" VerticalOffset="0" HorizontalSide="Center"
HorizontalOffset="0" ScrollEffectDuration=".1" />
</ProgressTemplate>
</asp:UpdateProgress>
Hello I am creating an ASP.NET/C# application
I have an update panel that takes time to update.
Is there a way to display a "Loading... Please Wait" Message during the time of the calculations?
Currently I am using AJAX panel animation fade in/fade out, to make the panel disappear while calculating and then reappear when done. But that is not very practical.
I need to display a message if possible.
Thank you for any help.
this is the code of my panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
//Contents goes here
</ContentTemplate>
</asp:UpdatePanel>
And the Ajax Panel animation extender
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<FadeOut Duration="1" Fps="20" />
</OnUpdating>
<OnUpdated>
<FadeIn Duration="2" Fps="20" />
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
You can use code as below when
using Image as Loading
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
using Text as Loading
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Awesome tutorial: 3 Different Ways to Display Progress in an ASP.NET AJAX Application
You can use the UpdateProgress control:
Also see:
ajax "loading" icon with UpdatePanel postbacks