Smart Wizard 2.0 redirecting issue ? MVC4 - asp.net-mvc-4

Question

I been working on wizard . I been stuck in a tricky situation i.e
By default i am getting PREVIOUS , NEXT , FINISH . But i want to customize my wizard which having 4 stages .
on stage 1 & 2 : next & save button
stage 3 : send for approval
stage 4 : approve or reject
So for 4 stages i created 4 DIV's like this similarly
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div id="step-1">
<h2 class="StepTitle">Step 1: Account Details</h2>
<table cellspacing="3" cellpadding="3" align="center">
<td align="center" colspan="3"> </td>
<tr>
<td align="right"> #Html.LabelFor(m=>m.Lead_Id) </td>
<td align="left">
: #Html.TextBoxFor(model=>model.Lead_Id , new { #readonly="readonly" } )
</td>
</tr>
<tr>
<td align="right"> #Html.LabelFor(m=>m.Contact_Name) </td>
<td align="left">
: #Html.TextBoxFor(model=>model.Contact_Name )
</td>
</tr>
<tr>
<td align="right"> #Html.LabelFor(m=>m.Contact_Address</td>
<td align="left">
: #Html.TextBoxFor(model => model.Contact_Address)
</td>
</tr>
<tr>
<td align="right"> #Html.LabelFor(m=>m.Lead_Source)</td>
<td align="left">
: #Html.DropDownListFor(c=>c.Lead_Source, Model.lead_sources)
</td>
</tr>
<tr>
<td> <input type="submit" value="SAVE" id="btnsave" /></td> // on click it does postback call to controller which saves my data accordingly . fine with that
<td><input type="button" onclick="donno()" value="NEXT STAGE" id="btnNext"</td> // Issue is here and what i need is onclick of button need to move to second stage of wizard so i been thinking to write a logic on click method of button ?
</tr>
</table>
</div>
}
I donno HOW ? Is it possible to call the next stage i.e next DIV of stage-2 to show up on-click.
Is there is any work around to bind DIV to the button . so on click of button that section of DIV should load in step2 of wizard .
Any better ideas are welcome and efforts are always appreciated .
Thanks & Regards

Answer 1

If you are trying to go through the steps of your wizard, you need some mechanism to do this. You have two options:
Use a jQuery wizard to handle everything client-side (you are talking about your <div>, so jQuery could "step" through each one"). Check this link out for a popular example: jQuery Wizard.
Although in the above you would use an MVC controller (or two if you use a partial view to display the "confirmation" or "submitted" page), another way to do this is using multiple controllers, one for each step, and then using TempData to keep user input data through the steps until you get to the end. Check this link out for an example: TempData Wizard.
You might get heated opinions about the use of TempData. I used the jQuery example before, but found it to be too cumbersome. I went the TempData route for simplicity (I hate LONG view or code pages, they tend to be hard to maintain).
Your mileage may vary, and ultimately it is up to you to decide what works best in your situation. Good luck.
Edit
Just also found a new (MVC5) link for using Session: Session Wizard. TempData is a form of Session, however, TempData is used for redirects in controllers, and unless you specifically "Keep" the TempData it is destroyed after the redirect. Both are not very secure, so just be aware of that (I believe in a secure application you can certainly use authentication (user or role based).