title: ajax post back not working correctly
body: <p><strong>Updated Question</strong></p>
  
  <p>Recently I need to implement a multi step wizard in ASP.NET MVC 3. After some research I was able to find this solution.</p>
  
  <p><a href="http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx" rel="nofollow">http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx</a></p>
  
  <p>So I followed the example exactly as the have it except the minor changes listed below:</p>
  
  <pre><code>@using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;
          &lt;legend&gt;User&lt;/legend&gt;
          &lt;div class="wizard-step"&gt;
              @Html.Partial("UserInfo", this.Model)
          &lt;/div&gt;
          &lt;div class="wizard-step"&gt;
              @Html.Partial("Email", this.Model)
          &lt;/div&gt;
          &lt;div class="wizard-step"&gt;
              @Html.Partial("Cars", this.Model)
          &lt;/div&gt;
          &lt;p&gt;
              &lt;input type="button" id="back-step" name="back-step" value="&lt; Back" /&gt;
              &lt;input type="button" id="next-step" name="next-step" value="Next &gt;" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>As you can see I am using Partial View to render each steps.</p>
  
  <p>Then I proceeded to create a ViewModel that would be used for this view:</p>
  
  <pre><code>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;
          }
      }
  </code></pre>
  
  <p><strong>In the Cars Partial View I have the following code set up:</strong></p>
  
  <pre><code>@model MVC2Wizard.Models.UserViewModel
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Model)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Model)
      @Html.ValidationMessageFor(model =&gt; model.Model)
  &lt;/div&gt;
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Make)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Make)
      @Html.ValidationMessageFor(model =&gt; model.Make)
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;
          &lt;input id="addCar" type="submit" value="Add Car" /&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  
      $("#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');
              }
  
          });
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my WizardController that will get called when Action is performed.</p>
  
  <pre><code>        // 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;
          }
  </code></pre>
  
  <p><strong>SO HERE IS MY PROBLEM:</strong>
  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.</p>