How to Make a Wizard with ASP.NET MVC

Create Wizard steps in MVC and Razor

There are different possibilities. You could use a pure client side solution by showing/hiding sections or a full server side solution. It's up to you to decide which one is best for your particular scenario. Here's an example you might take a look at if you decide to go the server side approach.

how to make a wizard with ASP.Net MVC

I don't believe there is a best/correct way, but the way I'd do it is...

Each wizard gets its own page. Each step gets its own div. All steps are in the same form.

The previous/next buttons would essentially hide/show the div in each step of the process. The last step's submit button submits the entire form. It would be pretty trivial to implement this using jQuery, and it would be easy to maintain as all the wizard steps are in a single ViewPage.

On the controller side, you'd have two controller methods, the HttpVerbs.Get version that would prepare the form for viewing and the HttpVerbs.Post version that would take a FormsResult and parse it to get out the information required to submit the user's answers to storage/other processes.

---

Wow, your boss stinks.

This answer almost gracefully works for those ****** who have javascript disabled (yes, both of them). You can tweak it to hide the next-previous buttons via CSS and unhide them in your javascript code. This way people with javascript see the wizard and people without javascript will see the entire form (without next/prev buttons).

The other option is to create a view for each step in the wizard. You can store the intermediate results of the form in the Session. This way would cost plenty of time and effort to implement, which means you could probably squeeze some overtime out of your boss when you demonstrate, in about twenty minutes of effort you spend during lunch, how easy the javascript route is to implement.

How do I create a MVC 'Wizard' similar in functionality to Webforms Wizards?

With ASP.NET MVC I would suggest using javascript/jquery to create a wizard in a web page; something like

<script type="text/javascript">
    $().ready(InitializeWizard);
    function InitializeWizard() {
        $(".step").hide();
        $("#step1").show();
    }
    function Step1OK() {
        $("#step1").hide();
        $("#step2").show();
    }
    function Step2OK() {
        $("#step2").hide();
        $("#stepComplete").show();
    }
</script>
<div id="step1" class="step">
    Step 1
    <input type="button" onclick="Step1OK();" value="OK" />
</div>
<div id="step2" class="step">
    Step 2
    <input type="button" onclick="Step2OK();" value="OK" />
</div>
<div id="stepComplete" class="step">
    Complete
</div>

NB! Remember, in the top of the document, to load jquery, e.g. by referencing the google link:

<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1.3.2");
</script>

what is the best way to design a wizard form in ASP.NET MVC

One of the ways that I have implemented a wizard is to have a separate database table that contains all of the information you are required to store and to save/retrieve data to that table in each step of your wizard - obviously depending on the size and purpose of the wizard this may not be sensible with the number of database calls but I was implementing only a 5 page wizard with maximum 5-10 fields on each page. So when you land on a page you query the database and retrieve the information from the database or if it doesn't exist load a blank page where the user can then enter the information and it is saved when they click either Next or Previous.

For navigating between pages I simply built a helper class that accepted the page name and button type (Next/Previous) and had a simple switch statement which would return the page to navigate to and then used that in a RedirectToAction statement. Again this may not suit a larger application but you could also look at using Windows Workflow (touched on in this article http://www.devx.com/dotnet/Article/29992) as I know that it can be used to create wizard style applications.

Creating a Wizard with Friendly URLs in ASP.NET MVC 4

In each of your wizard's views where you call Html.BeginForm(), make sure you call an overload of it that accepts either the desired route, or desired controller, action, and other routing parameters. For example, in Step1.cshtml:

@using (Html.BeginForm("Step-2", "MyWizard")) {
    // put view stuff in here for step #1, which will post to step #2
}

That will make the target URL "pretty", but it won't fix the action names themselves being "ugly". To fix that, there's a feature in MVC that will "rename" an action method to almost anything you want:

[HttpPost]
[ActionName("step-2")] // this will make the effective name of this action be "step-2" instead of "AddStep1"
public ActionResult AddStep1(Step1Model previousModel)
{
    // code here
}

Assuming the app is using the default MVC route (controller/action/id), each step will have its own URL.

Wizards in Mvc 4

First of all thank you guys for showing your interest in my problem and trying to resolve it. It is the other thing that any of the answer didn't helped me out or might be the question was not explained properly. But now I got the answer and I am posting it so that it may help to other.

My problem was that I had to show the values that I have inserted in the first screen as Non editable in the second screen and for that I have just used the @Model.Username at the place I wanted to display it. And yes for the server side validation like the I have posted back the data after each screen and returned the same model.

create wizard form in MVC and how to manage view and controller folders

Depends on the Model. If your Publications are their own entity and they eventually get stored (in DB) in their own table, it might be the proper way for them to have their own controller. The same with Reservations. If you store both of those as a part of the Company entity then it might be better for them to stay in Company controller. But it seems to me that they ought to be separate.

With regards to redirection between controller actions you can always use RedirectToAction() to redirect inside the same controller.

You can also use MVC Futures project and their RedirectToAction() extensions with which you can also redirect between different controllers.

FWIW, I think that if you are editing Publication that has its own properties etc. it belongs in their own Entity and as such they need to have their own Model, Controller and subsequently Views (in a separate View folder at the root of Views).

UPDATE:

What's wrong with a route looking like this:

Creating a publication for a company with {companyId}

/Publication/Create/{companyId}

or

Editing a publication with an id {publicationId} and for a company with {companyId}

/Publication/Edit/{companyId}/{publicationId}

or if publication ID's are unique regardless of the company

/Publication/Edit/{publicationId}

---

Related Topics