I'm working on a web application in C# .net, using twitter bootstrap in frontoffice.
In onClick button I need to show a div that contains a progressBar div and when the process finish, hide the div. I'm using this code:
web.aspx:
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
// on load web, this div is invisible
<div class="progress progress-striped active invisible" id="progressBar" runat="server">
<div class="bar" style="width: 90%;" id="percentProgresBar"></div>
</div>
And my web.aspx.cs:
protected void btnProcess_Click(object sender, EventArgs e){
// here change class to "visible"
progressBar.Attributes["class"] = "progress progress-striped active visible";
//--- all my process ----
//--- all my process ----
//when my process finish, hide the div again, change the css class to "invisible"
progressBar.Attributes["class"] = "progress progress-striped active invisible";
}
My problem is the div is visible when my process ends, not at the beginning. How can I resolve this? tTo make visible the div before --- all my process ---- and when finish that part of my code, to make the div invisible again.
Thanks for your help!!
You can try changing/converting your div to a server-side control by giving it an ID and add runat="server" , then use it in your code.
instead of using those classes, give the attribute Style="display:none" to hide and Style="display:" to make it visible but that wont serve your purpose. But for displaying the progress bar you can simply use Update Progress
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a to make it more like a ProgressBar(such as a GIF moving-bar image)
Related
I have a .net web application in C#
I am using image loader in my application, all is fine, the image loader is working in postback !!
But i have a requirment where i want to fire the image loader in the following case:
I have a customer creation page
When the customer fill all details and click on submit button
I am internally handling the page redirection through javascript when user has been successfully registerted, i show a alert message of customer creation and when user clcik on ok of alert its redirected to another page:
function confirmCustomerCreation(strCustomerID) {
alert('Customer ID ' + strCustomerID + ' created successfully.');
window.location.href = '/SitePages/AgentAction.aspx'; //siteUrl;
//window.location.href = '/_layouts/TATA_AIG_Portal/Quote/CalculatePremium_PrivateCar_QuickQuote.aspx'; //siteUrl;
}
In this case i found the image loader is not working
can any one suggest how to fire image loader in this case
I am using update panel and its related css :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DynamicLayout="true">
<ProgressTemplate>
<div id="blur">
</div>
<div id="dvDummy">
</div>
<div class="dvLoading" id="loading">
<asp:Image ID="Image2" runat="server" ImageUrl="/_layouts/IMAGES/images1/LoadingWheel.gif"
Height="50px" Width="50px" />
Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I already did search online, and try a few solutions provided, but none of them are working for me.
I have a button within a div. I am displaying the div within a jquery dialog. The button click doesnt work within the jquery dialog.
I have my code below :
aspx
<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click"/>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
jquery
function ViewModelPopup2() {
$("#ViewModalPopupDiv2").dialog({
scrollable: true,
width: 800,
modal: true
});
}
aspx.cs
protected void btnSendAlertEmail_Click(object sender, EventArgs e)
{
// Code to send email
}
protected void btnConfigureAlerts_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript
(this, this.GetType(), "callScriptFunction", "ViewModelPopup2();", true);
}
}
Please let me know what I need to do , to trigger the server control events .
I also had this problem with asp.net buttons and jQuery UI Dialog.
To solve it you need to set in your aspnet button the tag UseSubmitBehavior to false.
If UseSubmitBehavior attribute is set to true (this is the default value), the button will use the browser's submit mechanism (and jQuery Dialog UI is manipulating it), if UseSubmitBehavior is set to false, the button will use a client-side script that asp.net framework includes in the page to post to the form.
So your HTML should be like this :
<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click" UseSubmitBehavior="false" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
More details at http://msdn.microsoft.com/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx
This is the classic, thanks for moving my dialog jQuery, question.
jQuery UI for some reason moves your dialog code to the bottom of the html markup, outside of your form tag. You need to move the dialog back into the form with some more jQuery:
dlg.parent().appendTo(jQuery('form:first'));
where dlg is your jQuery.UI dialog object.
var dlg = $("#ViewModalPopupDiv2").dialog({
scrollable: true,
width: 800,
modal: true
});
dlg.parent().appendTo(jQuery('form:first'));
That should get things working for you again. Cheers!
If that doesn't work, try doing that in the open event:
open: function(type,data) { $(this).parent().appendTo("form"); }
I got my hands on a this web application few days back and I am already stuck with a problem.
When I load the page with, say, HL1 = http://localhost:8001/, UpdatePanel does not appear at all.
Though when I load the page with HL2 = http://localhost:8001/Default.aspx, it displays in its full glory.
[EDIT: Added HL1, HL2 tags]
FYI, UpdatePanel is part of a Master page.
Any suggestions?
Thanks,
Abhinav
[EDIT: Code for update panel]
<asp:UpdatePanel ID="upan" runat="server" >
<ContentTemplate>
<fieldset style="width:320px; padding:2px;margin-top:20px;margin-bottom:5px;" onmouseover="showHelp('quickAccess')" onmouseout="g_Popup.hide()">
<legend>Quick Access</legend>
<span style="vertical-align: middle">Dummy #
<asp:TextBox ID="txtSearchDummy" clientidmode="Static" runat="server" MaxLength="9" Width="70px" Height="15px" style="margin-top: 5px"></asp:TextBox>
<asp:Button ID = "btnSearchDummy" clientidmode="Static" runat="server" OnClick="btnSearchDummy_Click" style="display:none"/>
<button onclick="return quickAccess()" lang="javascript" type="submit" class="button_enabled" style="margin-left: 5px;">
<img alt="" src="images/lightning.gif"></img><span>Find Dummy</span></button></span>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Thanks for all the help guys. Issue is resolved now and, as expected, it had nothing to do with ASP.NET. In master page code behind file that search box was being made invisible.
:)
I have a model pop extender control like:
<cc1:ModalPopupExtender ID="basketPopUp" runat="server"
PopupControlID="Panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG"
TargetControlID="Panel1">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="PopupBody">
<b>Test</b>
<br />
</div>
</asp:Panel>
What i want is to show the popup for 5 seconds and HIDE it AUTOMATICALLY after this period of time.
I've tried this, but, running on the server side, of course it is not working:
public void showAndHidePopUp()
{
basketPopUp.Show();
System.Threading.Thread.Sleep(5000);
basketPopUp.Hide();
}
Do you know how to hide it in a proper way?
Thanks.
Edit:
For announcementes i've decided to use jGrowl-> http://www.stanlemon.net/projects/jgrowl.html
and not ModalPopUp Extender.
Try using a javascript timer, let the client handle it:
http://www.mcfedries.com/JavaScript/timer.asp
http://www.w3schools.com/js/js_timing.asp
Update:
There was actually a hidden panel with validator in the user control that was causing page not to be valid on the first postback. Consider this issue resolved.
This is first time I am using this control and it is behaving rather strange. I have to click on the "Next" button twice for it to move to the next step. I tried explicitly setting active index, using MoveTo etc. Nothing works. Here is the markup for the control. Anybody has any ideas why?
<asp:Wizard ID="UserWizard" runat="server" ActiveStepIndex="0"
StartNextButtonImageUrl = "~/App_Themes/Default/images/buttons/continue.gif" StartNextButtonType="Image"
StepNextButtonType="Image" StepNextButtonImageUrl="~/App_Themes/Default/images/buttons/continue.gif"
FinishPreviousButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
FinishPreviousButtonType="Image" FinishCompleteButtonImageUrl="~/App_Themes/Default/images/buttons/save.gif"
FinishCompleteButtonType="Image" CancelButtonType="Image" CancelButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
DisplaySideBar="false" >
<WizardSteps>
<asp:WizardStep Title="User Profile" ID="UserProfile" runat="server">
<uhc:ctlUserProfileEdit ID="ctlUserProfileEdit" runat="server">
</uhc:ctlUserProfileEdit>
<br clear="all" />
<div>
<asp:ImageButton ID="cmdResetPassword" runat="server" ImageUrl="~/App_Themes/Default/images/buttons/resetpassword.gif" />
</div>
<div>
<asp:UpdatePanel ID="upSchools" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<uhc:ctlSchoolLocationSelector ID="ctlSchoolLocationSelector" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:WizardStep>
<asp:WizardStep Title="Roles" ID="Roles" runat="server">
<uhc:ctlPermissionInternal ID="ctlPermissionInternal1" runat="server"></uhc:ctlPermissionInternal>
<uhc:ctlPermissionExternal ID="ctlPermissionExternal1" runat="server"></uhc:ctlPermissionExternal>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
I don't know for sure if this is what's causing it, but I find it strange that there is an UpdatePanel within the Wizard control, rather than the Wizard Control within the update panel. This may be causing some strange behavior.
Can you change this and see if the problem resolves itself?