Question

How do you pass parameters in ASP.net MVC over two views, like a wizard?

Or what is the best practice?

I am working on an inhouse bug tracking ASP.net application being moved to MVC, I can’t seem to shake the ASPX out of my head and am going in circles.

In the ASPX application.

Page1 -> Select Project, pass projectId in Querystring
Page2 -> Select IssueType, pass projectId and Issuetype in Querystring
Page3 -> Create New Issue, we can get the projectId and IssueType form querystring

How do we recreate the above flow in MVC?

Answer 1

A common practice for ‘wizard’ type systems is to use a single <form> element, with information from previous screens in hidden fields.

Edit: per the request, here’s an example (I’m not familiar with ASP.net, so you’ll have to translate this into code yourself 🙁 ). Say you have a site that sells cars, and in your ordering form first you ask about the model car, and in subsequent screens you offer options that apply to that vehicle.

<form action="order-wizard.html" method="POST">
    <!-- which step of the wizard are we on? -->
    <input type="hidden" name="step" value="1" />
    <!-- Get some info from the user for the first step of the wizard -->
    <select name="Model">
        <option value="Sedan">Sedan</option>
        <option value="Coup">Coup</option>
        <option value="Pickup">Pickup</option>
        <option value="Van">Van</option>
    </select>
    <input type="submit" />
</form>

When the user selects a model and submits the form, the controller for order-wizard.html can notice that the step option is 1, and knows to check that the user selected a model. Then it gan generate a page like this: (assuming the user selected “pickup”)

<form action="order-wizard.html" method="POST">
    <!-- which step of the wizard are we on? -->
    <input type="hidden" name="step" value="2" />
    <!-- Stored results from the previous stage of the wizard -->
    <input type="hidden" name="Model" value="Pickup" />
    <!-- Additional information for the wizard.  More than one option can be
         requested for each stage of the wizard. -->
    <select name="Style">
        <option value="Short Bed">Short Bed</option>
        <option value="Long Bed">Long Bed</option>
        <option value="Extended Cabin">Extended Cabin</option>
        <option value="Dually">Dually</option>
    </select>
    <select name="Interior">
        <option value="Cloth">Cloth</option>
        <option value="Leather"> Leather </option>
    </select>
    <input type="submit" />
</form>

If the wizard needed to collect more information, There could be additional pages produced in this way with hidden inputs. Otherwise, If this was the last page and all information was gathered, the code for that page could then process the form as normal, as though all inputs had been given by the user on a single page request.

The advantage of this technique is that the server does not need to cache any session information. Another advantage is that it provides a sort of RESTful interface, where a single page request from another tool can generate all of the inputs for the form, skipping over the intermediate wizard pages.

A disadvantage is that since the page is generated dynamically based on user requests, the client will have to start over if they happen to navigate away from the page. Bookmarks just won’t work. It doesn’t save you anything in validation, either, since form inputs of this sort could be faked easily.