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.

CausesValidation=true not working

I have used a Requiredfieldvalidator to validate a text field however when I click on button the page gets posted back even if validation fails. What am i doing wrong? Below is my code.
<div id="addFactDiv" style="display:none;">
<asp:TextBox ID="inputFact" Height="50px" Width="100%" runat="server" TextMode="MultiLine" placeholder="Enter a fact"></asp:TextBox>
<asp:requiredfieldvalidator CssClass="validator" Display="Dynamic" ID="Requiredfieldvalidator5" ControlToValidate="inputFact" ValidationGroup="ValidateFact" ErrorMessage="Please Enter a fact" runat="server"/>
<input type="button" Class="cancel" value="Cancel" OnClick="hideInput('addFactDiv');" />
<asp:Button ID="Submit_Fact" CssClass="submit" runat="server" CausesValidation="true" ValidationGroup="ValidateFact" Text="Submit" OnClick="Submit_Fact_Click"/>
</div>
EDIT
I had some commented out fields as well on the page causing the two errors I have mentioned in comments. When I removed those fields it started working fine. However I am not sure why.. Do commented out fields also get rendered on the page the same way as others?

I tried on my sample application and found below error,
WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).
Later I found that we need to add below key in .config file, which fixed the issue. (I am not sure why!)
Ref: Link
My aspx code looks like below,
<form id="form1" runat="server">
<div>
<div id="addFactDiv" style="float: right">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="test" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator" ValidationGroup="test"></asp:RequiredFieldValidator>
</p>
</form>
Hope this might help!!

Firefox needs two clicks to set validators correct

I have a strange problem, but I can't get a solution:
We use the Infragistics WebDataGrid, in which I set a dropdown and a textbox.
For both of them I set a requiredfieldvalidator:
<asp:RequiredFieldValidator ValidationGroup="attrib" runat="server" ControlToValidate="ddlIndRoleAttribType" ToolTip="Attribute Type is not set." InitialValue="-- not selected --" Text="!" Display="Dynamic" />
</div>
</ItemTemplate>
</ig:TemplateDataField>
<ig:TemplateDataField Header-Text="Value" Key="IndRoleAttribVal" Width="50%">
<ItemTemplate>
<div>
<stgwc:TextEdit runat="server" Width="300px" ID="txtIndRoleAttribValue" />
<asp:RequiredFieldValidator ValidationGroup="attrib" runat="server" ControlToValidate="txtIndRoleAttribValue" Width="90%" ToolTip="Attribute Value is not set." Text="!" Display="Dynamic" />
</div>
</ItemTemplate>
</ig:TemplateDataField>
<ig:TemplateDataField Header-Text="Action" Key="IndRoleAttribAction" Width="40px">
<HeaderTemplate>
<stgwc:ImageLinkButton runat="server" ID="btnCreateNewAttribute" CausesValidation="false" ImageUrl="~/Images/base/Icons/16x16/add2.png"
ToolTip="Add new Attribute" CommandName="Create" />
<stgwc:ImageLinkButton runat="server" ID="btnSaveAllAttributes" ValidationGroup="attrib" ImageUrl="~/Images/base/Icons/16x16/disk_green.png"
ToolTip="Save all Attributes" CommandName="Save" />
<stgwc:ImageLinkButton runat="server" ID="btnCancelChanges" CausesValidation="false" ImageUrl="~/Images/base/Icons/16x16/undo.png"
CommandName="Cancel" ToolTip="Discard changes" />
</HeaderTemplate>
<ItemTemplate>
<stgwc:ImageLinkButton runat="server" ID="btnDeleteAttribute" CausesValidation="false" ImageUrl="~/Images/base/Icons/16x16/delete2.png"
ToolTip="Delete this Attribute" CommandName="Delete" CommandArgument='<%# Bind("IR_ATTR_ID") %>' />
</ItemTemplate>
</ig:TemplateDataField>
</Columns>
</stgwc:WebDataGrid>
I do a postback if a new item should be created, then I set it to the datasource and reload it, something like this:
dgrIndRoleAttributes.ClearDataSource();
dgrIndRoleAttributes.Rows.Clear();
dgrIndRoleAttributes.DataSource = null;
dgrIndRoleAttributes.DataSource =
(Session[Constants.Session.RoleAttributes.ToString()] as List<TmpIndRoleAttribute>);
dgrIndRoleAttributes.DataBind();
Now comes the funny part: When I press enter after adding a new row, Firefox (only Firefox, on IE it works proper), seems to think the validators on the validator-group attrib arent set proper and I need to click twice, to make it save.
If I check this with the firebug, I see both validators being on display: none, so this cant be problem. As said, this happens only on Firefox, and I cant reproduce it on a small testsample.
Has anyone a idea, what could cause this behavior? Since I'm not used to this validators, I can't imagine, what could cause this problems.
Thanks for you response!
Matthias
Edith says: It's a infragistics bug... Another one... I use in this case the normal asp textbox and change the style with some css.

asp panel default button property is not working in ie for live application

I have a page having multiple buttons and search functionality.I have placed one button and textbox in a panel.After writing seach text if I hit Enter,it works well for all the browsers on local, but for live application this is not working in IE.
The html is:
<asp:Panel ID="pnlSearch" runat="server" CssClass="search" DefaultButton="btnSearch">
<h2>
Explore QualityStocks without logging in</h2>
<asp:TextBox ID="txtSearch" CssClass="txt" runat="server" ToolTip="Stock Ticker" ></asp:TextBox>
<asp:Button TabIndex="0" ID="btnSearch" runat="server" ClientIDMode="Static" CssClass="btn" OnClick="btnSearch_Click" />
</asp:Panel>
What am I missing to do?
Thanks in advance,
Priya

multiple submit buttons won't postback on aspx - only last button

On my aspx page I have two fieldsets, each wrapped with an <asp:Panel DefaultButton="..."> that have their own <input type="submit"> buttons. Here's an abbreviated version...
<div id="content">...</div>
<asp:Panel runat="server" id="formPanel1" DefaultButton="form1SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox1"/>
<asp:TextBox runat="server" id="textbox2"/>
<asp:Button runat="server" id="form1SubmitButton" OnClick="form1SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
<asp:Panel runat="server" id="formPanel2" DefaultButton="form2SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox3"/>
<asp:TextBox runat="server" id="textbox4"/>
<asp:Button runat="server" id="form2SubmitButton" OnClick="form2SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
Only the last submit button form2SubmitButton will postback, the other button does nothing when clicked. I have simplified the code above but I should mention that each form, Panel included, is kept in a separate user control that is registered on the aspx.
UPDATE: After some more research I've figured out that the submits are not working because of validators on the another fieldset on the master page. That fieldset is for signing into the site, so it is needed. Thoughts?

As PCasagrande mentioned, make sure your validation groups match the default button and all validators. Specially for your logging part.
Example:
<asp:Panel ID="pnlUpdateInfo" runat="server" DefaultButton="btnUpdateInfo">
<ASP:TEXTBOX id="txtZip" runat="server"></ASP:TEXTBOX>
<asp:RequiredFieldValidator id="reqvalZipSignUp" runat="server"
ControlToValidate="txtZip" ValidationGroup="btnUpdateInfo" />
<asp:Button ID="btnUpdateInfo" runat="server" ValidationGroup="btnUpdateInfo" />
</asp:Panel>

Turns out it has to do with HTML5 constraint validation. I figured this out because in chrome, from the console, I was getting the error An invalid form control with name='...' is not focusable. This led me to this post. I added the html5 attribute formnovalidate="formnovalidate" to the submit buttons and everything works just fine (*tested in chrome v20.0.1132.57, firefox v14.0.1, IE9 v9.0.8112).
So to recap, here's the answer...
<asp:Button runat="server" id="submit1" OnClick="submit1_OnClick" text="Submit" formnovalidate="formnovalidate"/>