How do I repopulate everything in a wizard style page for ASP.NET MVC?

Question

I've got a page that creates a ticket in our help desk system. It acts as a wizard with the following steps:

Step 1

User selects the customer from a dropdown list. There is a jquery onchange event that fires and generates the list for step 2 and hides the step1 div and shows the step2 div.

Step 2

User selects the location from a dropdown list. This is generated based on the customer selected in step 1. There is a jquery onchange event that fires and generates the list for step 3 and hides the step2 div and shows the step3 div.

Step 3

User selects the type from a dropdown list and enters text into 3 different text boxes. If the user fails to enter text or enters invalid text my controller changes the model state to invalid and returns the view.

How can I get all the dropdowns to repopulate again with the correct selection the user chose and get the page to redisplay on Step 3?

My first thought was to use ajax and when the user clicks the Create button, I could create the ticket from there and if successful send them to the ticket detail. If unsuccessful, well just display an error message and i'm still on the page so no big deal. Now that I write it out I think this is best. Are there any major issues using ajax? It seems most sites use some type of javascript or ajax these days.

Second thought is to not use ajax at all and submit all the pages to the server.

What do you suggest?

Answer 1

I agree with you. Use AJAX to submit the ticket.

Answer 2

The 3 steps display completely different markup. There is possibly not much you can gain by an AJAX-version, except the avoided page flicker when you change the steps.

If you go the non-AJAX way you gain:

• nice bookmarkable links ( www.ticketsystem.com/Customer -> www.ticketsystem.com/Customer/Microsoft/ -> www.ticketsystem.com/Customer/Microsoft/Location -> www.ticketsystem.com/Customer/Microsoft/Location/Redmond )
• browser history works
• easier testing

To redisplay the lists after step 3 you would load all of them and set the selected item according to the parameter in the URL.