title: Simple Ajax in asp.net MVC 3, update the model and rerender part
body: <p>I come from a more <code>WPF</code> application background and I'm used to bindings and such. Jumping into websites then can come with it's problems as they work so much more differently.</p>
  
  <p>I'm trying to do a simple <code>Ajax</code> action but not sure where to begin. Basically I want to make a dropdownlist that changes one property on the model and re-renders that part of the page. Perhaps this is too much of a WPF way to do this so my Model could be twisted for the thing it is supposed to do.</p>
  
  <p>Here is what I got already:</p>
  
  <pre><code>public class TheViewModel
  {
      private IEnumerable&lt;TheData&gt; _data;
  
      public TheViewModel(IEnumerable&lt;TheData&gt; data)
      {
          _data = data;
          Year = 2012;
      }
  
      public int Year { get; set; }
  
      public ICollection&lt;TheData&gt; Data
      {
          get
          {
              return _data.Where(d =&gt; d.Year == this.Year).ToList();
          }
      }
  
       public IEnumerable&lt;SelectListItem&gt; YearList
       {
          // lists the available years
       }
  }
  
  public class TheData
  {
      public int Year { get; set; }
      //Some more info I want to represent in Table
  }
  </code></pre>
  
  <p>And the razor:</p>
  
  <pre><code>@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "thetable" }))
  {
          @Html.DropDownListFor(model =&gt; model.Year, Model.YearList, new { AutoPostBack = "true"})
          &lt;input type="submit" name="name" value="Submit" /&gt;
  }
  
  
  &lt;table id="thetable"&gt;
      &lt;thead&gt;
          //some headers
      &lt;/thead&gt;
      &lt;tbody&gt;
      @foreach ( var item in Model.Data)
      {
          //row for each data
      }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As you can see I'm hoping for the Year property to be updated and a new call to be made for the Data property which would result in new information. That information would be rendered in <code>thetable</code> Table</p>