I am creating a mobile menu style function.
An image button is clicked and it should show the menu if the menu is currently not shown, and hide it if the menu is currently shown.
<div class="menuicon">
<asp:ImageButton ID="menubtn" ImageUrl="~/assets/menu.png" OnClick="menubtn_Click" runat="server" />
<asp:HiddenField ID="hdfMenuStatus" runat="server" Value="menudown" />
</div>
<div class="menulist">
<asp:Panel ID="panMenuContainer" runat="server">
<ul>
<li>
Login
</li>
</ul>
</asp:Panel>
</div>
the menubtn Click event:
if(hdfMenuStatus.Value == "menudown")
{
panMenuContainer.Visible = true;
hdfMenuStatus.Value = "menuup";
}
else
{
panMenuContainer.Visible = false;
hdfMenuStatus.Value = "menudown";
}
This works absolutely fine, but as soon as I encase the menuicon and menulist divs in an update panel then it stops working:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="menuicon">
<asp:ImageButton ID="menubtn" ImageUrl="~/assets/menu.png" OnClick="menubtn_Click" runat="server" />
<asp:HiddenField ID="hdfMenuStatus" runat="server" Value="menudown" />
</div>
<div class="menulist">
<asp:Panel ID="panMenuContainer" runat="server">
<ul>
<li>
Login
</li>
</ul>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I also put the menubtn outside the update panel with an Async Trigger but that didn't work either.
<div class="menuicon">
<asp:ImageButton ID="menubtn" ImageUrl="~/assets/menu.png" OnClick="menubtn_Click" runat="server" />
<asp:HiddenField ID="hdfMenuStatus" runat="server" Value="menudown" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="menulist">
<asp:Panel ID="panMenuContainer" runat="server">
<ul>
<li>
Login
</li>
</ul>
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="menubtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Having a page postback just to show or hide the menu seems entirely unsatisfactory.
Can anybody suggest what might fix this? I'm sure I've had Panel Visibility working inside an Update Panel before.
What happens when you change your UpdatePanel to look like he following
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="tsm" runat="server"></ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
</div>
....the rest of your code etc..
I would need to see what the rest of your html markup looks like but I just tested this with and without the <ajaxToolkit:ToolkitScriptManager> and the UpdatePanel enclosed inside the form tag, and it works..
You need to change some of your code as example.
<div class="menuicon">
<asp:ImageButton ID="menubtn" ImageUrl="~/assets/menu.png" OnClick="menubtn_Click" runat="server" />
<asp:HiddenField ID="hdfMenuStatus" runat="server" Value="menudown" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="menulist">
<asp:Panel ID="panMenuContainer" runat="server">
<ul>
<li>
Login
</li>
</ul>
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="menubtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Related
<div class="dt_content">
<asp:UpdatePanel runat="server" ID="AlertUpdatePanel">
<ContentTemplate>
<UserControl:ApplicationAlert runat="server" ID="ApplicationAlert" />
<UserControl:ApplicationAlert runat="server" ID="PersonalEssayAlert" Visible="false" />
<boas:KeyDates ID="KeyDates" runat="server" Visible="false" />
</ContentTemplate>
</asp:UpdatePanel>
<boas:OtherDocs ID="OtherDocs" runat="server" />
<input type="hidden" runat="server" id="AppDetailsHidden" />
<% var dummy = 0; %>
<% if (IsRep || IsAdmin)
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker_RepAdmin")%>
<% }
else
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker")%>
<% } %>
<!-- Accordian Menu -->
<asp:Repeater ID="DocumentListingRepeater" runat="server" OnItemCreated="DocumentListingRepeater_ItemCreated">
<ItemTemplate>
<ul class="CollapsiblePanelGroup">
<li id="SectionLI" runat="server">
<div>
<ul>
<li class="category">
<h3>
<asp:LinkButton ID="OpenDocumentsLinkButton" runat="server" OnClientClick='<%#"return ToggleDocTrackerPanel(" + Convert.ToChar(39) + "cat" + (((RepeaterItem)Container).ItemIndex).ToString() + Convert.ToChar(39) + ")" %>'
OnCommand="OpenDocumentsLinkButton_Command" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"DocumentCategoryID") %>'><img id="toggle<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" alt="" class="toggle" src="../Images/plus.png" /></asp:LinkButton><a
href='Details.aspx?section=<%# DataBinder.Eval(Container.DataItem, "DocumentCategoryID")%>'><%# DataBinder.Eval(Container.DataItem, "DocumentCategoryDescription")%></a></h3>
</li>
<li id="StatusLI" runat="server">
<h3>
<asp:Literal ID="StatusLiteral" runat="server" /></h3>
</li>
</ul>
</div>
<div id="cat<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" class="CollapsiblePanelContent">
<asp:UpdatePanel ID="DocumentTrac" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="DocumentTrackerPlaceHolder" runat="server">
<div style="text-align: center">
Loading
<br />
<img runat="server" alt="Please wait." src="~/images/loading2.gif" />
</div>
</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OpenDocumentsLinkButton" />
</Triggers>
</asp:UpdatePanel>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
<div style="text-align: center;" runat="server" id="applicationRequirementsPanel">
<a runat="server" id="modalButton">
<asp:Image ID="Image1" runat="server" SkinID="img_appReq" /></a>
</div>
<script type="text/javascript">
ToggleDocTrackerPanel();
</script>
</div>
Hi there!
The code snippet I shared, updates the content inside the content panel.
So we have different user roles, and when running the application as a normal user the OnCommand event gets triggered accordingly, gets all the content from the backend, and updates the 'Please Wait' text with the received content inside the Update Panel, but when I try to log in as Admin the same exact piece of code runs but the OnCommand event does not get triggered.
I tried adding the even name but that does not work.
During the page load I can see the data is getting bounded properly(as it is working fine when logged in a normal user).
Being a backend developer I am not that much familiar with this frontend technology, So little help or explanation would be appreciated. Thanks!
A very weirdproblem in my asp.net website. There are UpdatePanel, UpdateProgress & ModalpopupExtender in my page. All were working fine. Suddenly all of them stopped working. e.g. ModalPopupExtender not showing popup. UpdatePanel reloads entire page, UpdateProgress not showing. All this were working but suddenly stopped.
In my Bin folder I have deleted all files & added again & Rebuilded projects but still didn't worked..
UpdatePanel & UpdateProgress
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal2">
<div class="center">
<img alt="Loading..." src="images/common/loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
'content here
</ContentTemplate>
</asp:UpdatePanel>
ModalPopupExender
<asp:HyperLink ID="quteRequest" runat="server" CssClass="quote-request" ClientIDMode="Static">Request A Quote</asp:HyperLink>
<asp:ModalPopupExtender ID="mpInquiry" runat="server" BackgroundCssClass="inquiry-form-container" PopupControlID="inquiryInner" TargetControlID="quteRequest" CancelControlID="closeEditPost"></asp:ModalPopupExtender>
<asp:Panel ID="inquiryInner" runat="server" CssClass="inquiry-form-inner" style="display:none">
<asp:HyperLink ID="closeEditPost" CssClass="cross-close" runat="server" style="margin-right:10px"></asp:HyperLink>
</asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="true">
this solved my problem.. For more please refer this link
So this is very strange, and I haven't been able to find anything about it while searching.
I have an ASP.NET webforms app, and I am using the AJAX Control Toolkit's Modal Popup extender. Inside of this popup, I have a multi line textbox and some buttons. Both are ASP control. I have found that after entering the character combination "
Here is a picture of the dialog:
The dialog that won't work
And here is the markup for it:
<div id="notes" style="display: none">
<asp:UpdatePanel id="upnlNotesHeader" runat="server" class="logHeader">
<ContentTemplate>
<asp:Label ID="lblNotes" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<div class="logBody" style="height:200px">
<asp:UpdatePanel ID="upnlNotes" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hdnNotesJswo" runat="server" />
<asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" MaxLength="4000" Font-Names="Arial" Rows="12" Columns="62" style="margin: 5px 0 0 5px"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="logBtns">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnSaveNotes" runat="server" Text="Save" CssClass="logBtn" OnClick="btnSaveNotes_Click" />
<asp:Button ID="btnCancelNotes" runat="server" Text="Cancel" CssClass="logBtn" OnClick="btnCancelNotes_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Does anyone know why this is happening?
The problem comes from the request validation performed by ASP.NET when submitting the page. You can turn it off at the page level like this:
<%# Page ValidateRequest="false" ... %>
An alternative, if you want to keep the validation, is to encode the content of the fields before submitting the form to the server, and decode it in code-behind.
Currently in my visual WebPart Contains update panel , but it not working, it post back the whole page
my code
My .aspx code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<div class="leftSection">
<asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="True">
<asp:ListItem Text="2015" Value="2015"></asp:ListItem>
<asp:ListItem Text="2016" Value="2016"></asp:ListItem>
</asp:DropDownList>
<div class="frmDate"><p>From</p>
<SharePoint:DateTimeControl ID="from" runat="server" DateOnly="True" AutoPostBack="true" MaxDate="8900-12-31" MinDate="2015-07-31" OnDateChanged="from_DateChanged" Calendar="1" IsRequiredField="true" ErrorMessage="Please Select From Date"/>
</div>
<div class="lastDate">
<p>
To
</p>
<SharePoint:DateTimeControl ID="to" runat="server" DateOnly="True" OnDateChanged="to_DateChanged" AutoPostBack="true" OnValueChangeClientScript="holidayDates()" IsRequiredField="true" ErrorMessage="Plaese Select To Date" />
</div>
</div>
<div class="rightSection">
<div id="testdiv" runat="server">
</div>
<asp:Label CssClass="hdn-lbl lblFromDate" ID="lblFromDate" runat="server" Text="Label"></asp:Label>
<asp:Label CssClass="hdn-lbl lblToDate" ID="lblToDate" runat="server" Text="Label"></asp:Label>
<asp:Label CssClass="hdn-lbl lblTotalHrs" ID="lblTotalHrs" runat="server" Text="Label"></asp:Label>
<asp:Button ID="save" runat="server" Text="SUBMIT" OnClientClick="return cal()" OnClick="save_Click" />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="save" />
</Triggers>
</asp:UpdatePanel>
**after click on Submit Button it Post back total page **
Your save button is in your UpdatePanel by default you should use the ChildrenAsTriggers property of your UpdatePanel (set to true by default) and not AsyncPostBackTrigger.
Edit:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
//...
</ContentTemplate>
</asp:UpdatePanel>
No external triggers just children as triggers, and default value as ChildrenAsTriggers is True equivalent to :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
I have spent hours Googling and searching past questions but have struggled to get anywhere with those answers (be it I can't get it into my solution correctly or it isn't suitable for me as they don't have master pages).
My question is, I have a couple of asp.net pages which can take a while to load (sometimes 5 seconds+) as there is a lot of data being requested from a database on the Page_Load method. To stop users from thinking that the page has crashed and either refreshing the page or doing something else, I want to put up a Loading message hiding everything else on the page (apart from the menu) while it loads.
I am using ASP.Net 4.0 with master pages and coding in C#.
The one where I get the most success is using the UpdatePanel on my master page where the content template covers the contentplaceholder, however I know this is not the best way to go about it and anyway it only shows up once, i.e. The user logs in, the loading message appears and once all the data has loaded on the home page (dashboard.aspx) the loading message disappears, which is kind of what I want. However if the user goes away from that page and then clicks home the loading message never appears again, just takes a while to load. It also never appears for any other page that takes a noticeable time to load.
Below is the body of the master.aspx
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
Header
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/Default.aspx" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Home" />
<asp:MenuItem Text="About" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" />
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And below is the page for the dashboard.aspx (a page which has a long loading time)
<asp:Panel ID="PanelWelcome" runat="server">
<h1>
Welcome
<asp:Label ID="LabelUserName" runat="server" Text="[User Name]" /> to your
personal Dashboard.</h1>
<table width="100%" cellpadding="5px">
<tr>
<td style="width: 70%" valign="top">
<asp:Panel ID="Panel2" runat="server">
<p>
</p>
<h4>
Up and Coming </h4>
<br />
<asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left"
OnRowDataBound="GridViewItin_RowDataBound">
</asp:GridView>
</asp:Panel>
</td>
<td style="width: 30%">
<asp:Panel ID="PanelProfile" runat="server">
<asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg"
Width="150px" /><br />
<h4>
Name:</h4>
<asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"></asp:Label>
<h4>
Company:</h4>
<asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"></asp:Label>
<h4>
Date of Birth:</h4>
<asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"></asp:Label><br />
<asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click">More details...</asp:LinkButton>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
Could you please show me the best way to go about it and where I am going wrong? Also how I can hide the ContentTemplate when the UpdateProgress template is showing that would be great?
Thanks.
Okay so I figured it out what I was doing wrong, I thought I would post what I did to hopefully help someone else who might end up with the same issues...
Basically I hadn't thought about it logically. There are controls outside the update panel such as a NavigationMenu which would never fire the update progress because they had nothing to do with the Panel! I had to add triggers to the update panel to deal with all the things that happen outside the panel.
So, in my master page I had the following code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NavigationMenu" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="loader" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/loader.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
Hopefully that will help someone else!
You can use UpdateProgress control. You can get it From Toll box under Ajax Extensions Tab.
I am describing you a scenario:
Suppose I have One Upadate Panel name UpdatePnl1 , In that I have a Button Say GO.when we hit on go it should redirect to another page. before that it will promt you please wait.
Now my Code will be like that
<asp:UpdatePanel ID="UpdatePnl1" runat="server">
<ContentTemplate>
<asp:Button ID="BtnGO" runat="server" Text="GO" onclick="BtnGO_Click"/>
</ContentTemplate>
</asp:Updatepanel>
Button click code:
protected void BtnGO_Click(object sender, EventArgs e)
{
Response.Redirect("Example.aspx");
}
Now here is the code for UpdateProgress what you need to add
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePnl1" >
<ProgressTemplate>
<asp:Label ID="LblWaitMsg" runat="server" Text="Processing Request, Please Wait..."></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
Note: Your page Should contain ScriptManager.