title: MVC Update Model Properties Using JQuery
body: <p>It's been a while since I did any MVC/JQuery. I'm looking for a solution or a better way of achieving this.</p>
  
  <p>To simplify things, I have a Model with the following properties:</p>
  
  <pre><code>public IEnumerable&lt;XmlInputFieldModel&gt; XmlFields { get; set; }
  public IEnumerable&lt;string&gt; BusinessObjectFields { get; set; }
  public IEnumerable&lt;XmlSchemaField&gt; MappedFields { get; set; }
  
  public class XmlInputFieldModel
  {
      public string XmlElement { get; set;}
  
      public string XmlValue { get; set; }
  }
  
  public class XmlSchemaField
  {
      public string XmlElement { get; set; }
  
      public string BusinessObjectField { get; set; }
  }
  </code></pre>
  
  <p>In my View, I'm providing a list of the XmlField Elements and their Values, and for each XmlField I have a dropdown to select a BusinessObjectField, shown below:</p>
  
  <pre><code>@foreach(var item in Model.XmlFields)
  {
      &lt;div&gt;
          &lt;div style="width: 300px; display: inline-block;"&gt;
              @Html.DisplayFor(i =&gt; item.XmlElement)
          &lt;/div&gt;
          &lt;div style="width: 300px; display: inline-block;"&gt;
              @Html.DisplayFor(i =&gt; item.XmlValue)
          &lt;/div&gt;
          &lt;div class="busoblist" data-elementid="@(item.XmlElement)" style="display: inline-block;"&gt;
              @Html.DropDownListFor(m =&gt; m.BusinessObjectFields, new SelectList(Model.BusinessObjectFields, item.XmlElement))
          &lt;/div&gt;
          &lt;hr /&gt;
      &lt;/div&gt;
  }
  
  &lt;div style="width: 200px; display: inline-block;"&gt;
      &lt;input type="button" name="Save" id="Save" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to happen when I click Save is to populate my MappedFields property with the values from the given Element and the chosen dropdown Field value.  I've attempted this through the script below, but I can't work out how to get from the Key/Value array into my Model.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#Save").on("click", function () {
  
              var mappedFields = new Array();
              $('.busoblist').each(function() {
                  var element = $(this).attr('data-elementid');
                  mappedFields.push(element + ' : ' + $("option:selected", this).text() + ',');
              });
  
              var dataToSend = { Val: "Working" };
  
              $.ajax({
                  url: "Home/SetMappedFields",
                  type: "POST",
                  data: dataToSend,
                  error: function(error) {
                      alert("Error: " + error.statusText);
                  },
                  success: function(result) {
                      alert("Result: " + result.statusText);
                  }
              });
          });
      });
  &lt;/script&gt;
  
  [HttpPost]
  public ActionResult SetMappedFields(string Val)
  {
      string newVal = Val;
      return this.RedirectToAction(x =&gt; x.Index());
  }
  </code></pre>
  
  <p>I explored the Ajax route (commented code), but can't seem to get this to find the controller action.  The above view and script sits in a partial view, where other properties of the base Model are populated.</p>
  
  <p>@CSharper - I've updated the code above, and it's still not hitting the controller :( (I'm using the default HomeController from a starting MVC4 application).  My Error function on the script returns "Error: Not Found".</p>