TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
nothing else
NA
28
32.3k
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;
}
Reply
Answers (
1
)
RDLC sub report integration-- Object reference not set error
how to display last login date