ASP.NET Wizard not moving to WizardStep index 3 in browser - asp.net

Question

I have a web feedback wizard and when I tested it in the browser, clicking the next button, it goes fine from step 1 to step 2 but then it refuses to go to step 3. Also, I tried to keep the focus on the first text box in each step, but it still isn't working right. when I click 'next' the step moves (as i said it works from Contact Info to Comments) but it scrolls up to the top of the web page and loses focus from the wizard. which is annoying.
so I have two problems: (1) my wizard only goes to two out of the four steps. (2) the wizard loses its focus.
here is what i have in my wizard control:
<asp:Wizard ID="Wizard1" runat="server" BackColor="#E6E2D8"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ActiveStepIndex="0" Height="371px"
Width="691px" style="margin-top: 178px"
onfinishbuttonclick="Wizard1_FinishButtonClick" TabIndex="1"
onactivestepchanged="Wizard1_ActiveStepChanged"
onload="Wizard1_ActiveStepChanged" onnextbuttonclick="OnNextButtonClick"
onprerender="Wizard1_ActiveStepChanged" >
<HeaderStyle BackColor="#666666" BorderColor="#E6E2D8" BorderStyle="Solid"
BorderWidth="2px" Font-Bold="True" Font-Size="0.9em" ForeColor="White"
HorizontalAlign="Center" />
<NavigationButtonStyle BackColor="White" BorderColor="#C5BBAF"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="2em"
ForeColor="#1C5E55" />
<SideBarButtonStyle ForeColor="#855A21" />
<SideBarStyle BackColor="#E3D3AC" Font-Size="0.9em" VerticalAlign="Top" />
<StepStyle BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderStyle="Solid"
BorderWidth="2px" VerticalAlign="Top" />
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Contact Info"
StepType="Start">
<table cellpadding="10" class="style1">
<tr>
<td class="style2">
Your Name</td>
<td class="style3">
<asp:TextBox ID="nametxt" runat="server" style="margin-left: 0px"
Width="137px"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="nametxt" ErrorMessage="Please Enter your name"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style5">
Email</td>
<td class="style6">
<asp:TextBox ID="emailtxt" runat="server"></asp:TextBox>
</td>
<td class="style6">
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="emailtxt" ErrorMessage="Please enter your email address"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="style5">
City</td>
<td class="style6">
<asp:TextBox ID="citytxt" runat="server"></asp:TextBox>
</td>
<td class="style6">
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
ErrorMessage="Please enter your city or town"
ValidationExpression="^[a-zA-Z0-9\s.\-]+$" ControlToValidate="citytxt"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="style5">
State</td>
<td class="style6">
<asp:TextBox ID="statebox" runat="server" MaxLength="2" Width="47px"></asp:TextBox>
</td>
<td class="style6">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="statebox" ErrorMessage="Please enter your state"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3" colspan="2">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" Width="163px" />
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Comments"
StepType="Step">
<table cellpadding="10" class="style1">
<tr>
<td class="style4">
Comments<br />(no more than 500 characters)</td>
<td>
<asp:TextBox ID="txtcomments" runat="server" Height="55px" TextMode="MultiLine"
Width="233px"></asp:TextBox>
</td>
<td>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateComments" ControlToValidate="txtcomments"
ErrorMessage="Please enter no more than 500 characters"
OnServerValidate="CustomerValidator1"></asp:CustomValidator>
</td>
</tr>
<tr>
<td class="style4">
Rating<br />(1-5)</td>
<td>
<asp:TextBox ID="txtrating" runat="server"></asp:TextBox>
</td>
<td>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="txtrating" ErrorMessage="Use a number between 1-5"
MaximumValue="5" MinimumValue="1"></asp:RangeValidator>
</td>
</tr>
<tr>
<td class="style4">
</td>
<td colspan="2">
<asp:ValidationSummary ID="ValidationSummary2" runat="server" Height="42px" />
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="txtcomments"></asp:CompareValidator>
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="Summary"
StepType="Finish">
<table cellpadding="10" class="style1">
<tr>
<td class="style7">
<h3>Summary:</h3>
<br />
<asp:Label ID="nameLabel" runat="server" AssociatedControlID="namelabel"></asp:Label>
</td>
<td class="style7">
</td>
</tr>
<tr>
<td>
<asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Emaillabel" ></asp:Label></td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="cityLabel" runat="server" AssociatedControlID="citylabel"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="stateLabel" runat="server" AssociatedControlID="statelabel"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="commentslabel" runat="server" AssociatedControlID="commentslabel"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="ratinglabel" runat="server" AssociatedControlID="txtrating"></asp:Label>
</td>
<td>
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" Title="Complete"
StepType="Complete">
<br />
<br />
<br />
<br />
<br />
<br />
<h3> Thank You!</h3>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
here is what i have in the behind code: (c#)
protected void Page_Load(object sender, EventArgs e)
{
//Prevent display of sitemap on default page.
SiteMapNode node = SiteMap.CurrentNode;
if (node.ParentNode == null)
{
SiteMapPath1.Visible = false;
Wizard1.Visible = false;
}
nameLabel.Text = nametxt.Text;
EmailLabel.Text = emailtxt.Text;
cityLabel.Text = citytxt.Text;
stateLabel.Text = statebox.Text;
commentslabel.Text = txtcomments.Text;
ratinglabel.Text = txtrating.Text;
}
public void OnNextButtonClick(object sender, WizardNavigationEventArgs e)
{
this.Wizard1.Focus();
Wizard1_ActiveStepChanged(sender, e);
}
private TextBox FindFirstTextBox(Control c)
{
TextBox nothing = null;
Control results;
if ((c == null))
{
return nothing;
}
if (c.GetType() == typeof(TextBox))
{
return (TextBox)c;
}
foreach (Control child in c.Controls)
{
results = FindFirstTextBox(child);
if (results != null && (results.GetType() == typeof(TextBox)))
{
return (TextBox)results;
}
else
{
return nothing;
}
}
return nothing;
}
protected void Wizard1_ActiveStepChanged(object sender, System.EventArgs e)
{
// Set the focus to the first TextBox in the current step
WizardStepBase currentWizardStep = Wizard1.ActiveStep;
// Find the first TextBox
TextBox firstTextBox = FindFirstTextBox(currentWizardStep);
// If we found a TextBox, set the Focus
if (!(firstTextBox == null))
{
firstTextBox.Focus();
}
}

Answer 1

Ok that is because... you have a compare validator on your txtComments field in the 2nd step of your wizard...I would recommend to either fix it or remove it...here is the code that I am referring to (in your Wizard Step 2)
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="txtcomments"></asp:CompareValidator>
The things that are missing in the above code are:
Set "ControlToCompare" property.
Set an error message...
Update for your second problem
To keep focus on your first text box...of each tab and to keep scroll position...follow below steps...
Step 1 In your Page_Load event...add the below line of code
nametxt.Focus(); // This will make sure that your nametxt texbox has focus when your page loads for the first time
Step 2 Your FindFirstTextBox method's code can be as simple as below...so update it to the code below...
// This code is pretty much self explanatory
private TextBox FindFirstTextBox(Control c)
{
foreach (Control child in c.Controls)
{
if (child is TextBox)
return (TextBox)child;
}
//If we didn't find a TextBox
return null;
}
Step 3 Update your Wizard_ActiveStepChanged event to below...
protected void Wizard1_ActiveStepChanged(object sender, System.EventArgs e)
{
// Set the focus to the first TextBox in the current step
WizardStepBase currentWizardStep = Wizard1.ActiveStep;
// Find the first TextBox
TextBox firstTextBox = FindFirstTextBox(currentWizardStep);
// If we found a TextBox, set the Focus
if (Page.IsPostBack && firstTextBox != null)
{
firstTextBox.Focus();
}
}
In the above event code, I have changed the if statement to have an additional check for page.IsPostBack...this is because the Focus method will throw an exception...since this event is being called before your OnLoad and OnRender...Its pretty much up to you to figure out why you are calling this step so early...
Step 4 Finally, to fix your scrolling problem...you need to use an Update panel...please see below code snippet...
// Your Update Panel needs a Script Manager to work
<asp:scriptManager runat="server" ID="sm"></asp:scriptManager>
<asp:UpdatePanel runat="server" ID="panel" UpdateMode="Always">
<ContentTemplate>
// ALL YOUR CONTENT MARK UP GOES HERE
</ContentTemplate>
</asp:UpdatePanel>
This should probably fix your second problem...