Solved

ASP Wizard and MaintainScrollPositionOnPostBack problem

Posted on 2006-06-22
12
1,334 Views
Last Modified: 2012-06-27
I'm having an odd problem. I've build a fairly lengthy survey form and I decided to use the ASP:Wizard tool to implement it. The problem that I am running into is that I cannot find any way to maintain the scroll position on a postback event while still going back to the top of the page when the next button is pushed. These postbacks fires when certain controls are clicked on the page, which is apart from the prev/next buttons.

I've tried setting MaintainScrollPositionOnPostBack = false with the next click event, which does work. But, I still need to maintain the scroll position after it goes back to the top of the page. I can't figure out a way to get the page to go up to the top while still keeping the scroll position whenever anything besides the next/prev button is clicked.

Also, I've attempted to use some simple Javascript code (like window.scrollTo(0,0);) to jump to the top of the page, but since the MaintainScrollPositionOnPostBack code is always placed at the very bottom of the finished HTML page, there is no way to override it without turning it off.

Unfortunately, I don't know much Javascript myself, so I'm at my wits end trying to resolve this problem.

Thanks for any help,
Steven
0
Comment
Question by:A-Tech
  • 6
  • 4
12 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 16964025
Hmmm... Would Smart Navigation work, or would it cause more problems?

Implementing Cross-Browser Compatible Smart Navigation Features
http://www.asptoday.com/Content.aspx?id=2313

<Quote>
Smart Navigation is a feature built into ASP.NET that makes postbacks smoother by remembering the page scroll position, retaining element focus, reducing screen flicker, and not registering the postback in the browser?s history. This greatly enhances the user experience for pages that make use of postbacks, but it only works in Internet Explorer 5.5 and up. In this article Damon Armstrong will discuss how to build similar page position and focus tracking features, but which will work in all modern, standards compliant browsers.
</Quote>

Bob
0
 

Author Comment

by:A-Tech
ID: 16966478
I have attempted to use Smart Navigation as well as a few other various developed tools to attempt to solve my scrolling problem, but I have the exact same problem with every single thing I've tried. Unfortunately, I don't know enough Javascript to modify some of the custom tools to reset on a certain command. Also, I've actually been through the article that you found before, Bob, with no success.

I've looked up a couple of the custom Smart Navigation (and MaintainScrollPositionOnPostBack) replacements, just in case someone could help me modify one to meet my needs:

http://www.strengthtechnologies.com/scroll/UsersGuide_Manual.aspx
http://aspalliance.com/articleViewer.aspx?aId=356&pId=-1

Hopefully someone can figure out a way to whip my ASP code into shape!

Thanks again,
Steven
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 16971694
1) .NET version?

2) Is this ASP.NET or ASP?

3) ASP:Wizard tool?

4) For 2.0 framework there is the Wizard control.

5) I am just trying to figure out where you are coming from here.

Bob
0
 

Author Comment

by:A-Tech
ID: 16971989
Oh, sorry for not being clear.

I'm using .NET version 2.0.50727. I am using ASP.NET 2.0 and the ASP:Wizard tool.

I've created a simplified ASP:Wizard mockup to demonstrate the issue that I am running into. I'd show you my actual code, but it's over a thousand lines of code...

Also, I'm running at 1280x1024 resolution, so if your's is higher, you might have to add more linebreaks to get both pages to scroll.

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>
<!-- You can use SmartNavigation here or any other scroll position tool, it's all the same result -->

<html>
<head runat="server">
    <title>Example Wizard</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Wizard ID="ExampleWizard" runat=server ActiveStepIndex=0 DisplaySideBar=false Width="800px">
    <WizardSteps>
    <asp:WizardStep ID="WizardStep1" runat=server Title="Step One">
        <p>
            Example Wizard:<br />Added length to show scrolling issue
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
        <p>
            This button auto posts back:
            <asp:RadioButtonList runat=server ID="Test" AutoPostBack=true>
            <asp:ListItem>Option 1</asp:ListItem>
            <asp:ListItem>Option 2</asp:ListItem>
            </asp:RadioButtonList></p>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep2" runat=server Title="Step Two">
        <p>
            <b>This is the next step, it never starts at the top!</b><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
        <p>
            It loves the bottom of the page</p>
    </asp:WizardStep>
    </WizardSteps>
    </asp:Wizard>
    </form>
</body>
</html>

I hope this helps!
Steven
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 16980793
I am confused about something:

   Why would you want to maintain scroll position on scroll-back, and also scroll to the top of the page, when you change wizard pages?

Bob
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:A-Tech
ID: 16981205
Well, it's maintaining scroll position on post-back for one ;)

What happens on my actual page, when someone clicks on an option which causes a postback, is more options are provided to them (or changed). So, it's extremely annoying (and therefore something which will drive customers away) when they have to manually scroll back to where they were when these options changed. Which is why Smart Navigation (or MaintainScrollPositionOnPostBack, whatever) is a useful tool. The issue is that the same annoyance of a page scrolling on its own to somewhere unwanted still occurs when they click the next button.

So this leaves me with, apparantly, a unique situation where I want the page to keep its scroll position in most circumstances (changing options causing postbacks) while still going back to the top of the page when the user clicks next (so that the continuity of the survey is held intact).

Does that make more sense?
Steven
0
 

Author Comment

by:A-Tech
ID: 16981243
I've added additional code to my example page to try to further show my problem:

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" CodeFile="~/WizardMockup.aspx.cs" Inherits="WizardMockup" %>
<!-- You can use SmartNavigation here or any other scroll locking tool, it's all the same result -->
<html>
<head id="Head1" runat="server">
    <title>Example Wizard</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Wizard ID="ExampleWizard" runat=server ActiveStepIndex=0 DisplaySideBar=false Width="800px">
    <WizardSteps>
    <asp:WizardStep ID="WizardStep1" runat=server Title="Step One">
        <p>
            Example Wizard:<br />Added length to show scrolling issue
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
        <p runat=server id="HiddenText" visible=false>
            Depending on which option you chose, it could show different things
            <asp:RadioButtonList runat=server ID="Hidden" Visible=false>
            <asp:ListItem>Hidden option 1</asp:ListItem>
            <asp:ListItem>Hidden option 2</asp:ListItem>
            </asp:RadioButtonList></p>
        <p>
            This button auto posts back:
            <asp:RadioButtonList runat=server ID="Test" AutoPostBack=true OnSelectedIndexChanged="TestChanged">
            <asp:ListItem>Option 1</asp:ListItem>
            <asp:ListItem>Option 2</asp:ListItem>
            </asp:RadioButtonList></p>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep2" runat=server Title="Step Two">
        <p>
            <b>This is the next step, it never starts at the top!</b><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
        <p>
            It loves the bottom of the page</p>
    </asp:WizardStep>
    </WizardSteps>
    </asp:Wizard>
    </form>
</body>
</html>


WizardMockup.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class WizardMockup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void TestChanged(object sender, EventArgs e)
    {
        if (Test.SelectedIndex.Equals(0))
        //Different things can be shown or hidden, of course
        {
            HiddenText.Visible = true;
            Hidden.Visible = true;
        }
        if (!Test.SelectedIndex.Equals(0))
        {
            HiddenText.Visible = true;
            Hidden.Visible = true;
        }
    }
}
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 16986098
One untested thought would be:

  Copy the code for the MaintainScrollPositionOnPostback, set the value to False, and then code the functionality when posting back to the same page, otherwise let it scroll to the top of the next page.

Bob
0
 

Author Comment

by:A-Tech
ID: 16986204
In some form, I have tested that thought. This issue that arises is that while I can set it to false and get the page back to the top, when I set it true again (or add other functions to do the same thing), they aren't actually put on the client's page until after some event happens.

Let's say, I start out with MaintainScrollPositionOnPostback (MSPOP for short) set to true. On the first page, an option is changed which causes a postback. The scroll position is maintained and all is well.
The user clicks next and through the OnNextButtonClick function (I think that's what it's called), MSPOP is set to false. The page goes back up to the top and all is well.
The user clicks on another option (now on the 2nd page) which causes a postback. This postback event sets MSPOP to true. But, the user's page is reset to the top rather than maintaining its position, because the javascript code which records his/her position is only sent to the user's browser after MSPOP is set to true. So while the javascript is there, it has no prior scroll position values to work with to maintain a scroll position.
After the one glitched postback, all others on that page would maintain scroll position correctly. This entire process is basically looped throughout the entire wizard (mind you, I've got 13 steps).

So, while this is the closest I've come to a solution, it is still incomplete. I do not know any Javascript, so I cannot modify or in any way customize the 3rd party scripts (linked to above) to clear the values stored for the scroll position when the next button is clicked.

I've also attempted to set MSPOP to false on the next button click and then back to true on the PageLoad function, but it still retains the past values for the scroll position, so it's as if it was never set to false.

The only thing I can think of to solve this problem is to somehow create something at the top of each step which would sliently cause one (and only one) postback, which could re-enable MSPOP and provide proper functionality. But, I have no idea how to do this!

Steven
0
 

Author Comment

by:A-Tech
ID: 17091340
Alrighty! I happened to answer my own question. Since I know how much extreme frustration this caused me, I thought I'd post an exact solution.

I used
        this.MaintainScrollPositionOnPostBack = true;
in my Page_Load

Then used
    protected void NextButtonClick(Object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(Page.GetType(), "SetFocus", "<script> document.getElementById('__SCROLLPOSITIONX').value = 0; document.getElementById('__SCROLLPOSITIONY').value = 0; </script>");
    }
(All of the startup script is one line!)

To make sure that the page reset to the top every time the next button was clicked. This works great!

And if anyone is using SmartNavigation, I should hope that there could be a similar solution of hijacking the correct values and resetting them.
0
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 17105765
Closed, 500 points refunded.
Netminder
Site Admin
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now