title: Why dosen't this javascript object convert to a C# class object?
body: <p>I'm working on a little test bed app, where you give the app a note name, sign, and octave, and it spits out the frequency the note should sound at.</p>
  
  <p>I'm having a problem with a JavaScript object that is sent to a server via AJAX.  However, it does not map at all to the class on the action.</p>
  
  <p>The sender code is a piece of JavaScript:</p>
  
  <pre><code>$someContainer.on('click', '.raise-pitch', function (e) {
      e.preventDefault();
  
      var $line = $(this).parents('.item-line'),
          // Cache GUI elements for this line.  Not pertinent.
  
      var data = {
          'model': {
              'NoteName': $noteName.val(),
              'Sign': $noteSign.val(),
              'Octave': $noteOctave.val()
          },
          'steps': 1
      };
      var dataString = JSON.stringify(data);
  
      $.ajax({
          type: 'POST',
          url: '@Url.Action("AlterPitch", "Home")',
          data: dataString,
          async: true,
          dataType: 'json',
          success: function (result) {
              // Unimportant things.
          }
      });
  });
  </code></pre>
  
  <p>In the <code>data</code> object, you can see that I have two things: the <code>model</code> and the <code>steps</code>.  The steps determines how far we alter the musical note.  I have verified that the values for <code>note name</code>, <code>sign</code>, and <code>octave</code> are making it into the data object.  The <code>steps</code> are pre-determined.</p>
  
  <p>The <code>data</code> object, however, maps to a ViewModel on the C# side, which looks like this:</p>
  
  <pre><code>public class NoteViewModel
  {
      public enum NoteSign
      {
          Natural,
          Sharp,
          Flat
      }
  
      public string NoteName { get; set; }
      public NoteSign Sign { get; set; }
      public int Octave { get; set; }
      public float Frequency { get; set; }
  
      private static readonly Dictionary&lt;string, float&gt; FrequencyLookup = new Dictionary&lt;string, float&gt;
          {
              {"C", 16.35f},
              {"C#", 17.32f},
              {"D", 18.35f},
              {"D#", 19.45f},
              {"E", 20.60f},
              {"F", 21.83f},
              {"F#", 23.12f},
              {"G", 24.50f},
              {"G#", 25.96f},
              {"A", 27.50f},
              {"A#", 29.14f},
              {"B", 30.87f}
          };
  
      // Methods...not important for reasons below.
  }
  </code></pre>
  
  <p>...which itself is encapsulated in a unique view model:</p>
  
  <pre><code>public class AlterPitchViewModel
  {
      public NoteViewModel model;
      public int steps;
  
      public NoteViewModel AlterPitch()
      {
          model.ChangeStep(steps);
          return model;
      }
  }
  </code></pre>
  
  <p>...or at least it should.  I set a break point in my controller method:</p>
  
  <pre><code>[HttpPost]
  public ActionResult AlterPitch(AlterPitchViewModel model)
  {
      return Json(model.AlterPitch(), JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>...But the model is null, which leads to a <code>NullReference</code> exception.</p>
  
  <p>the model isn't serializing to an object that gets sent along in this context.  Obviously I am still doing something wrong.  <strong>Question</strong> is...what?</p>