title: How to post model to a controller in Smart Wizard?
body: <p>All I wanted to do is do an <strong>$.ajax()</strong> post back when a user goes from step 2 to step 3 in smart wizard. So i worked out the following code. I have used <strong>var model = JSON.stringify(@Model);</strong> to convert my model to string and pass it using ajax request</p>
  
  <p><strong>Ajax code</strong></p>
  
  <pre><code> var model = JSON.stringify(@Model);
                  var s = 10;
                  $.ajax({
                      type: 'POST',
                      url: '@Url.Action("GetSampleFeed")',
                      data: "inStringModel=" + model
                  });
  </code></pre>
  
  <p>but the above does not fire an call back to the controller. I have checked by removing the JSON.stringify(@Model) and replaced it by "Just text". Now the ajax request reaches the controller with out any issues</p>
  
  <p>Below are my codes</p>
  
  <p><strong>Model File</strong></p>
  
  <pre><code>public class OndemandFeedModel
  {
      /// &lt;summary&gt;
      /// Collection of countrt that the application supports
      /// &lt;/summary&gt;
      public CountryModel Country { get; set; }
  
      /// &lt;summary&gt;
      /// Model used to display fields and retrive the selected fields from user
      /// &lt;/summary&gt;
      public FieldSelectModel Fields { get; set; }
  
      /// &lt;summary&gt;
      /// Model used to display filters and retrive the selected fields from user
      /// &lt;/summary&gt;
      public FilterSelectModel Filters { get; set; }
  }
  
  public class FieldSelectModel
  {
  
  
      /// &lt;summary&gt;
      /// Collection of Fields
      /// &lt;/summary&gt;
      public List&lt;FieldGroup&gt; FieldGroup { get; set; }
  }
  
  public class FilterSelectModel
  {
      [Required]
      [Display(Name="From")]
      public DateTime StartTime { get; set; }
  
      [Required]
      [Display(Name="To")]
      public DateTime EndTime { get; set; }
  
      public FilterSelectModel()
      {
          StartTime = DateTime.Now;
      }
  }
  
  public class FieldGroup
  {
      /// &lt;summary&gt;
      /// group of the field
      /// &lt;/summary&gt;
      public string GroupName { get; set; }
  
      /// &lt;summary&gt;
      /// group of the field
      /// &lt;/summary&gt;
      public List&lt;FieldModel&gt; Fields { get; set; }
  }
  
  public class FieldModel
  {
      /// &lt;summary&gt;
      /// Unique Id referred to each field
      /// &lt;/summary&gt;
      public int FieldId { get; set; }
  
      /// &lt;summary&gt;
      /// name of the field
      /// &lt;/summary&gt;
      public string FieldName { get; set; }
  
      /// &lt;summary&gt;
      /// user defined name for the field
      /// &lt;/summary&gt;
      public string UserDefinedFieldName { get; set; }
  
      /// &lt;summary&gt;
      /// bool value indicating whether the field has been selected by the user
      /// &lt;/summary&gt;
      public bool IsEdited { get; set; }
  
      /// &lt;summary&gt;
      /// type of the field coded / raw
      /// &lt;/summary&gt;
      public string FieldType { get; set; }
  
      /// &lt;summary&gt;
      /// category of the field in which it has been clasified
      /// &lt;/summary&gt;
      public string FieldGroup { get; set; }
  
      /// &lt;summary&gt;
      /// status of the field if status is 1 display field to user other wise dont display
      /// &lt;/summary&gt;
      public int Status { get; set; }
  
      /// &lt;summary&gt;
      /// country of field
      /// &lt;/summary&gt;
      public string Country { get; set; }
  
      /// &lt;summary&gt;
      /// Title attribute for the element will be poped up in tool tip
      /// &lt;/summary&gt;
      public string Title { get; set; }
  
      public FieldModel()
      {
          IsEdited = false;
          UserDefinedFieldName = string.Empty;
          Title = "Double click each fields to edit.";
      }
  }
  </code></pre>
  
  <p>My View</p>
  
  <p><strong>My Javascript code</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          $('#wizard').smartWizard({
              onShowStep: showAStepCallback,
              onFinish: onFinishCallback
          });
  
          function showAStepCallback(obj, context) {
  
              if (context.fromStep == 2 &amp;&amp; context.toStep == 3) {
                  var model = JSON.stringify(@Model);
                  var s = 10;
                  $.ajax({
                      type: 'POST',
                      url: '@Url.Action("GetSampleFeed")',
                      data: "inStringModel=" + model
                  });
  
              }
  
              // return false to stay on step and true to continue navigation 
          }
          // setting the active tab
          $('#wizard').smartWizard();
          $('.date').datepicker({ dateFormat: "dd/mm/yy" });
          function onFinishCallback() {
              $('#wizard').smartWizard('showMessage', 'Finish Clicked');
              //alert('Finish Clicked');
          }
              .....
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Controller code</strong></p>
  
  <pre><code>[HttpPost]
  public ActionResult GetSampleFeed(string inStringModel)
  {
      JavaScriptSerializer serializer = new JavaScriptSerializer();
      var inObjectModel = serializer.Deserialize(inStringModel, typeof(OndemandFeedModel));
      return Content("&lt;row&gt;&lt;/row&gt;");
  }
  </code></pre>
  
  <p>Any help will be much appreciated !!</p>
  
  <p>Thanks</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I have changed the </p>
  
  <pre><code>var model = JSON.stringify(@Model);
  </code></pre>
  
  <p>to </p>
  
  <pre><code>var model = @{new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model);}            
  </code></pre>
  
  <p>now the request reaches controller but the model i received is empty.</p>