updating model as user walks through wizard' s

问题:

I'm going to use the SmartWizard jQuery plugin to create a wizard-like ASP.Net MVC application. The user will go through multiple steps to fill in data.

[EDITED FOR CLARITY]

Each step should be a Partial View.

The ViewModel is common to all the Views:

public class myViewModel
{
    [Required]
    public int BM { get; set; }

    [Required]
    public int Cylindre { get; set; }        
}

The first Partial View should show the field BM (of course I've simplified things here for clarity):

@model MvcApplication3.Models.QuoteViewModel
    <div class="editor-label">
      @Html.LabelFor(model => model.BM)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.BM)
      @Html.ValidationMessageFor(model => model.BM)
 </div>

The second Partial View should show the field Cylindre (same code as above).

Now the main View looks like that:

@model MvcApplication3.Models.QuoteViewModel

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div id="wizard" class="swMain">
    <ul>
        <li><a href="#step-1">
            <label class="stepNumber">
                1</label>
            <span class="stepDesc">Step 1<br />
               </span></a></li>
        <li><a href="#step-2">
            <label class="stepNumber">
                2</label>
            <span class="stepDesc">Step 2<br />
                </span></a></li>
    </ul>

    <div id="step-1">
        <h2 class="StepTitle">
            Step 1 Content</h2>

        <!-- step content -->
        @Html.Partial("QuoteStep1", Model)

    </div>
    <div id="step-2">
        <h2 class="StepTitle">
            Step 2 Content</h2>

        <!-- step content -->
        @Html.Partial("QuoteStep2", Model)

    </div>
</div>

}

This all works fine. But as you can see, both Partial Views are rendered at the same time.

What I'd like to do, is to load the first Partial View, then when the user moves on the next step, the second Partial View would be loaded using an AJAX call.

The problem is how do I keep the model state through the steps ?

[EDIT 2 - NEW VERSION]

I've managed to load the Partial Views using AJAX call:

$('#wizard').smartWizard({ contentURL: '/home/getstep', transitionEffect: 'slideleft', onLeaveStep: leaveAStepCallback, onFinish: onFinishCallback });

And in the controller, I do:

 public ActionResult GetStep()
    {
        ActionResult pv = null;

        switch (Convert.ToInt16(Request["step_number"]))
        {
            case 1:
                pv = PartialView("QuoteStep1");
                break;
            case 2:
                pv = PartialView("QuoteStep2");
                break;
            default:
                break;
        }
        return pv;
    }

Now the problem I'm having is that when I hit the next button of the SmartWizard, my controller is actually hit even if I don't fill in the Required fields ! This is because the SmartWizard plugin seems to be doing the validation AFTER the ajax call to get the content, which seems silly to me.

Anyone faced this issue, or am I doing something wrong here ?

回答1:

Have you thought doing the submit through javascript to combine the (still existing) input from the various steps? You can render Partial View 2 through N using the information from the previous partial views, however the actual data submission is a combination of all view data.. I don't know if this is best practice or not, but it's an idea.