ASP.NET 向导未移动到浏览器中的 WizardStep 索引 3答案

【问题标题】：ASP.NET Wizard not moving to WizardStep index 3 in browserASP.NET 向导未移动到浏览器中的 WizardStep 索引 3
【发布时间】：2012-04-21 15:17:18
【问题描述】：

我有一个网络反馈向导，当我在浏览器中对其进行测试时，单击下一步按钮，从第 1 步到第 2 步运行良好，但随后拒绝进入第 3 步。另外，我试图保持焦点在每个步骤的第一个文本框中，但它仍然无法正常工作。当我单击“下一步”时，步骤会移动（正如我所说，它从联系信息到评论都有效）但它向上滚动到网页顶部并失去向导的焦点。这很烦人。所以我有两个问题：（1）我的向导只进行了四个步骤中的两个。 (2) 向导失去焦点。

这是我的向导控件中的内容：

  <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">
                        &nbsp;</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">
                        &nbsp;</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>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="cityLabel" runat="server" AssociatedControlID="citylabel"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="stateLabel" runat="server" AssociatedControlID="statelabel"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="commentslabel" runat="server" AssociatedControlID="commentslabel"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="ratinglabel" runat="server" AssociatedControlID="txtrating"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep4" runat="server" Title="Complete" 
            StepType="Complete">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

         <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Thank You!</h3>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

这是我在后面的代码中的内容：(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();
    }
}

【问题讨论】：

标签： asp.net wizard

【解决方案1】：

好的，这是因为...您在向导的第二步中的 txtComments 字段上有一个比较验证器...我建议修复或删除它...这是我所指的代码到（在您的向导步骤 2 中）

 <asp:CompareValidator ID="CompareValidator1" runat="server" 
   ControlToValidate="txtcomments"></asp:CompareValidator>

上面代码中缺少的东西是：

设置“ControlToCompare”属性。
设置错误消息...

更新您的第二个问题

要专注于您的第一个文本框...每个选项卡并保持滚动位置...请按照以下步骤...

第 1 步在您的 Page_Load 事件中...添加以下代码行

nametxt.Focus(); // This will make sure that your nametxt texbox has focus when your page loads for the first time

第 2 步您的 FindFirstTextBox 方法的代码可以像下面这样简单...所以将其更新为下面的代码...

// 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;
        }

第 3 步将您的 Wizard_ActiveStepChanged 事件更新到下面...

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();
            }
        }

在上面的事件代码中，我更改了 if 语句以对 page.IsPostBack 进行额外检查...这是因为 Focus 方法会抛出异常...因为此事件是在您的 OnLoad 和OnRender...由您自己决定为什么这么早调用此步骤...

第 4 步 最后，要解决滚动问题...您需要使用更新面板...请参阅下面的代码 sn-p...

 // 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>

这应该可以解决您的第二个问题...

【讨论】：

所以摘要现在显示得很好。但是你知道我可以做些什么来解决我在使用向导时遇到的这个焦点问题吗？