nothing else

nothing else

  • NA
  • 28
  • 20.6k

Wizard control - complete step always show in a new page?

Jun 16 2013 2:03 PM
I hope you can solve my problem. I wanna when i click finish button (in Confirm step)...A summary information will show in Finished step..Please see my code:
Thank for reading and have a nice day :)


ASPX
<body>
  <form id="form1" runat="server">
  <div>
  <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" OnLoad="Wizard1_Load" DisplaySideBar="false" OnPreRender="Wizard1_PreRender">
  <WizardSteps>
  <asp:WizardStep runat="server" Title="Information">
  <div class="content">
  <table class="auto-style1">
  <tr>
  <td>
  <asp:Label ID="Label1" runat="server" Text="Firstname"></asp:Label>
  </td>
  <td>
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td>
  <asp:Label ID="Label2" runat="server" Text="Lastname"></asp:Label>
  </td>
  <td>
  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  </td>
  </tr>
  </table>
  </div>
  </asp:WizardStep>
  <asp:WizardStep runat="server" Title="Payment">
  <div class="content">
  <table class="auto-style1">
  <tr>
  <td>
  <asp:RadioButton ID="RadioButton1" runat="server" Text="Credit card" />
  </td>
  <td>
  <asp:RadioButton ID="RadioButton2" runat="server" Text="Paypal" />
  </td>
  </tr>
  </table>
  </div>
  </asp:WizardStep>
  <asp:WizardStep runat="server" Title="Confirm">
  <div class="content">
  <table class="auto-style1">
  <tr>
  <td>
  <asp:Label ID="Label3" runat="server" Text="Firstname"></asp:Label>
  </td>
  <td>
  <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
  </td>
  </tr>
  <tr>
  <td>
  <asp:Label ID="Label4" runat="server" Text="Lastname"></asp:Label>
  </td>
  <td>
  <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
  </td>
  </tr>
  </table>
  </div>
  </asp:WizardStep>
  <asp:WizardStep runat="server" StepType="Complete" Title="Finished">
  <div class="content">Finished</div>
  </asp:WizardStep>
  </WizardSteps>
  <HeaderTemplate>
  <ul id="wizHeader">
  <asp:Repeater ID="SideBarList" runat="server">
  <ItemTemplate>
  <li><a class="<%# GetClassForWizardStep(Container.DataItem) %>" title="<%#Eval("Name")%>">
  <%# Eval("Name")%></a> </li>
  </ItemTemplate>
  </asp:Repeater>
  </ul>
  </HeaderTemplate>   
  </asp:Wizard>
  </div>
  </form>
</body>

C#:
  protected void Page_Load(object sender, EventArgs e)
  {
  Wizard1.PreRender += new EventHandler(Wizard1_PreRender);  
  }
  protected void Wizard1_Load(object sender, EventArgs e)
  {
  Label5.Text = TextBox1.Text;
  Label6.Text = TextBox2.Text;
  }

  protected string GetClassForWizardStep(object wizardStep)
  {
  WizardStep step = wizardStep as WizardStep;

  if (step == null)
  {
  return "";
  }
  int stepIndex = Wizard1.WizardSteps.IndexOf(step);

  if (stepIndex < Wizard1.ActiveStepIndex)
  {
  return "prevStep";
  }
  else if (stepIndex > Wizard1.ActiveStepIndex)
  {
  return "nextStep";
  }
  else
  {
  return "currentStep";
  }
  }
  protected void Wizard1_PreRender(object sender, EventArgs e)
  {
  Repeater SideBarList = Wizard1.FindControl("HeaderContainer").FindControl("SideBarList") as Repeater;
  SideBarList.DataSource = Wizard1.WizardSteps;
  SideBarList.DataBind();
  }

CSS
#wizHeader li .prevStep
{
  background-color: #669966;
}
#wizHeader li .prevStep:after
{
  border-left-color:#669966 !important;
}
#wizHeader li .currentStep
{
  background-color: #C36615;
}
#wizHeader li .currentStep:after
{
  border-left-color: #C36615 !important;
}
#wizHeader li .nextStep
{
  background-color:#C2C2C2;
}
#wizHeader li .nextStep:after
{
  border-left-color:#C2C2C2 !important;
}
#wizHeader
{
  list-style: none;
  overflow: hidden;
  font: 18px Helvetica, Arial, Sans-Serif;
  margin: 0px;
  padding: 0px;
}
#wizHeader li
{
  float: left;
}
#wizHeader li a
{
  color: white;
  text-decoration: none;
  padding: 10px 0 10px 55px;
  background: brown; /* fallback color */
  background: hsla(34,85%,35%,1);
  position: relative;
  display: block;
  float: left;
}
#wizHeader li a:after
{
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(34,85%,35%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}
#wizHeader li a:before
{
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}   
#wizHeader li:first-child a
{
  padding-left: 10px;
}
#wizHeader li:last-child
{
  padding-right: 50px;
}
#wizHeader li a:hover
{
  background: #FE9400;
}
#wizHeader li a:hover:after
{
  border-left-color: #FE9400 !important;
}   
.content
{
  height:150px;   
  padding-top:75px;
  text-align:center;
  background-color:#F9F9F9;
  font-size:48px;
}

Answers (1)