Question

Updated Question

Recently I need to implement a multi step wizard in ASP.NET MVC 3. After some research I was able to find this solution.

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

So I followed the example exactly as the have it except the minor changes listed below:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>User</legend>
        <div class="wizard-step">
            @Html.Partial("UserInfo", this.Model)
        </div>
        <div class="wizard-step">
            @Html.Partial("Email", this.Model)
        </div>
        <div class="wizard-step">
            @Html.Partial("Cars", this.Model)
        </div>
        <p>
            <input type="button" id="back-step" name="back-step" value="< Back" />
            <input type="button" id="next-step" name="next-step" value="Next >" />
        </p>
    </fieldset>
}

As you can see I am using Partial View to render each steps.

Then I proceeded to create a ViewModel that would be used for this view:

public class UserViewModel
    {
        public UserViewModel()
        {

        }

        [Required(ErrorMessage="Username")]
        public string UserName
        {
            get;
            set;
        }

        public string FirstName
        {
            get;
            set;
        }

        public string LastName
        {
            get;
            set;
        }

        public string Email
        {
            get;
            set;
        }

        public string Make
        {
            get;
            set;
        }

        public string Model
        {
            get;
            set;
        }
    }

In the Cars Partial View I have the following code set up:

@model MVC2Wizard.Models.UserViewModel
<div class="editor-label">
    @Html.LabelFor(model => model.Model)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Model)
    @Html.ValidationMessageFor(model => model.Model)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Make)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Make)
    @Html.ValidationMessageFor(model => model.Make)
</div>
<div>
    <p>
        <input id="addCar" type="submit" value="Add Car" />
    </p>
</div>
<script type="text/javascript">

    $("#addCar").click(function () {
        AddCars();
        return false;
    });

    function AddCars() {

        var model = @Html.Raw(Json.Encode(Model));

        $.ajax({

            url: '@Url.Action("AddCar")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({model: model}),
            success:function(result)
            {
                alert('successful');
            }

        });
    }

</script>

Here is my WizardController that will get called when Action is performed.

        // GET: /Wizard/

        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Index(UserViewModel Person)
        {
            if (ModelState.IsValid)
                return View("Complete", Person);

            return View();
        }

        [HttpPost]
        public ActionResult AddCar(UserViewModel model)
        {
            return null;
        }

SO HERE IS MY PROBLEM:
Everything works great except the model parameter in the AddCar HTTPPost is always null when the action is performed! How do I set up the code so that the User Inputs are passing in during the HTTPPost. Also I need to take “Car” info and add it into a collection. Buts that’s step 2.

Answer 1

Make sure you cancel the default action of the submit button by returning false from your callback:

$('#addExperience').click(function() {
    CallSomeAction();
    return false; // <!-- that's important to prevent the form being submitted normally
});

---

UPDATE:

After at last you have shown your code here’s the problem:

[HttpPost]
public ActionResult AddCar(UserViewModel model)

The action parameter is called model. But you also have a property inside UserViewModel which is called Model which is conflicting. The default model binder doesn’t know which one to bind.

So one possibility is to rename your action argument:

[HttpPost]
public ActionResult AddCar(UserViewModel uvm)

and on the client side:

data: JSON.stringify({ uvm: model })

---

UPDATE 2:

You have the following line in your javascript:

var model = @Html.Raw(Json.Encode(Model));

The problem is that your GET Index action in WizardController doesn’t pass any view model to the view:

[HttpGet]
public ActionResult Index()
{
    return View();
}

So when you look at the generated source code of your page you will notice:

var model = null;

As a consequence you cannot expect to get anything other than null in your AddCar action.

This being said I suppose that you are not willing to send the view model to this action. You are willing to send the 2 values that the user entered in the form.

So you probably want something like this:

function AddCars() {
    $.ajax({
        url: '@Url.Action("AddCar")',
        type: 'POST',
        data: $('form').serialize(),
        success: function(result) {
            alert('successful');
        }
    });
}