Develop Reference

Page jumps to the top of the page even when using an Update Panel

I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>

You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>

Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.

Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>

I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.

Why does dropdown menu always mess my css layout?

Every time I include a dropdown menu, my css layout mess up. Can someone explain to me why and how to fix it?
Here is my code:
<asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></asp:Label>
<asp:TextBox ID="projnametxt" runat="server"></asp:TextBox><br />
<asp:Label ID="paymentlbl" runat="server" CssClass="editlabels" Text="Payment Type:"></asp:Label>
<asp:DropDownList ID="paymentype" runat="server">
<asp:ListItem Text="Cash" Value="cash"></asp:ListItem>
<asp:ListItem Text="Intallments" Value="installments"></asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="projsumlbl" CssClass="editlabels" runat="server" Text="Project Sum:"></asp:Label>
<asp:TextBox ID="projsumtxt" runat="server"></asp:TextBox><br />
CSS:
.editlabels {
float:left;
width:150px;
margin-right:0.2em;
padding-top:0.4em;
padding-left:20px;
text-align:left;
font-weight:bold;
}
Anything that goes after the dropdown menu goes to the right for some reason.

Only if you remove your margin and padding things would automatically fall in place.

You need to put position: relative on the main container then on any sub ones use position: absolute

Create Loading animation before navigating to another page and disable all conrols on it during animation

I have a button on Page 1 and when the button click event occurs, I had to do some process that takes around 2-3 seconds. So, I want to Put a Loading Image in Center and disable all other controls on the Page 1.
I tried using UpdatePanel :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
<asp:Label runat="server" Text="Label" ID="lbl"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
<div id="IMGDIV1" align="center" valign="middle" runat="server" style="position: absolute;visibility:visible;vertical-align:middle;border-style:none;border-color:black;background-color:transparent;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader (1).gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
But the controls did not get disabled. Any Solution or Javascript ??
Also I want that it should work if want to stay on the same page.

why dont yu use telerik radgrid loading panel ?
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

Increase the width of TabContainer header

I have a vertical TabContainer, but I can't fix the width of the TabPanel (it will increase a little, but not to the full width of the text). Text is hidden behind the ContentTemplate. For example:
Here's the markup:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Visible="false" UseVerticalStripPlacement="true">
<asp:TabPanel ID="TabPanel2" runat="server" >
<HeaderTemplate>
<div style="width: 200px">General Examination </div>
</HeaderTemplate>
<ContentTemplate> </ContentTemplate>
</asp:TabPanel>
How can I fix the width of the tabs to that they are all same? The second tab, "General Examination", is not fully visible.

You need to add some CSS for the tab headers. The style that applies to that element of the AJAX Control Toolkit TabContainer is named .ajax__tab_header_verticalleft. Something like this should work:
.ajax__tab_header_verticalleft
{
width: 200px;
}
You might be able to dial back a bit from 200px, but that should work for you.

Hope this may help anyone else facing the same problem.
provide VerticalStripWidth="150px" in asp:TabContainer

Removing borders from AJAX toolkit tabs panel

I'm having a problem with the AjaxControlTollkit Tabs. I want to remove the borders of the tabs since I do not really need them (display reasons). Here is a simplified sample of my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default-Defaut.aspx.cs"
Inherits="TinTan._Default" MasterPageFile="~/CLF20.Master" Culture="auto"
UICulture="auto" EnableEventValidation="false" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
EnablePageMethods="True" CombineScripts="True">
<Services>
<asp:ServiceReference Path="AutoComplete.asmx" />
</Services>
</asp:ToolkitScriptManager>
<div>
<!--tabs in which all the options will be avaible (using AJAX for faster respone)-->
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
<Triggers>
<asp:PostBackTrigger ControlID="btnPostBack" />
</Triggers>
<ContentTemplate>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="CheckActiveTab" OnActiveTabChanged="TabContainer_ActiveTabChanged"
BorderWidth="0px" >
<asp:TabPanel ID="tabAddTan" runat="server" Visible="false">
<HeaderTemplate>
Add Tan (Admin)
</HeaderTemplate>
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:Label ID="lblAddTanTitle" runat="server" Text="Add TAN" Font-Bold="true" Font-Size="Large"></asp:Label>
</div>
</div>
<asp:UpdatePanel ID="pnlAddTan" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="divTable">
<div class="divRow">
<asp:AsyncFileUpload OnUploadComplete="UploadComplete" runat="server" OnUploadedComplete="UploadComplete"
ID="AsynchAddTan" />
</div>
<div class="divRow">
<asp:Button ID="btnAddTanClick" runat="server" Text="Upload File" OnClick="UploadComplete" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is what I tried and the results:
Using the BorderWidth="0px", BorderStyle="none", BorderColor="white" properties: it did not work, the borders were unchanged
adding a CSS class and linking it the the TabContainer with the CssClass property: It removed ALL the style of the tabs, the tabs Header were only plain text. The borders were not there thought
Here is the CSS I used:
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>
It is situated in teh master page. When I was trying to link it to the AjaxTabContainer with CssClass, the .Ajaxborder class was in the choices VS2010 was offering me.
Using the style property and putting border:0 none white; in it: same result as the 1st try, there was no changes to the ajax tabs.
The closest I have been to my goal was the 2nd option. But I do not understand why it removes all the style of the tabs when I am only telling him to remove the borders. I also do not understand why the other options do not do a single thing to the tabs.
Thanks
Hugo

In application i applied the CSS in the following way
add one dummy tabcontainer after script manager
Styles used
.ajax__tab_xp .ajax__tab_tab
{
height: 21px;
}
.ajax__tab_xp .ajax__tab_header
{
border:0;
border-top:0;
border-top-color:White;
}
use cssclass="ajax__tab_xp" for tabcontainer..It works for me
Also please go through this link if it is useful http://forums.asp.net/t/1300660.aspx/1

use
outline-style:none;
to remove the box on the active tab
or
outline-color:Blue;
to get a blue color, not that nasty brownish with blue on ajaxcontroltoolkit demo
... .ajax__tab_active .ajax__tab_tab {background:url('tab-active-verticalleft_b.gif') repeat-x; outline-style:none}

add !important
<style type="text/css">
.AjaxBorder .ajax__tab_body
{
border:0 !important;
}
.AjaxBorder .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Tabs/tab.gif) repeat-x;
}
</style>

Simply set outline to 0;
This is how I do it
.MyTabStyle .ajax__tab_active .ajax__tab_tab
{
outline:0;
}