title: MVC 4 Razor using Ajax forms to update a foreach loop
body: <p>Where to start...I can find similar things on the Internet as to how, but they never seem to work with my specific way of wanting to do something. I have tried with and without partial views with very little success.</p>
  
  <p>Quick rundown: I have a strongly-typed View with an Ajax form. underneath the form, I have a foreach loop that repeats a code block. I need to be able to update the code block from the forms choices (filters).</p>
  
  <p>Here's my View, 'FindATeacher.cshtml', as it currently stands (after trying many different ideas):</p>
  
  <pre><code>@model Teachers.Models.OmniModel
  @{
      ViewBag.Title = "FindATeacher";
      Layout = "~/Views/Shared/_Layout.cshtml";
  
  }
  &lt;h2&gt;Find a Teacher&lt;/h2&gt;
  @using (Ajax.BeginForm("FilterTeachers", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess" }))
  {
      &lt;div id="ContentFilter"&gt;
          &lt;div class="filterLabels"&gt;
              &lt;p&gt;Search by Name&lt;/p&gt;
              &lt;p&gt;Filter By Instrument&lt;/p&gt;
              &lt;p&gt;Filter By City&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="filterObjects"&gt;
              &lt;p&gt;
                  &lt;input type="text" id="nameTXT" /&gt;
                  &lt;button type="submit" id="findButton"&gt;find&lt;/button&gt;
              &lt;/p&gt;
              &lt;p&gt;@Html.DropDownList("InstrumentID", (SelectList)Model.Instruments, "-- Select an Instrument --", new { id = "instrumentDD" })&lt;/p&gt;
              &lt;p&gt;@Html.DropDownList("CityID", (SelectList)Model.Cities, "-- Select a City --", new { id = "cityDD" })&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;hr /&gt;
  @foreach (var r in Model.Teachers)
  {
      &lt;div id="ContentResults"&gt;
          &lt;div id="avatar"&gt;
              &lt;img src="i" /&gt;
          &lt;/div&gt;
  
          &lt;div id="demographics"&gt;
              &lt;h6&gt;@r.Teacher&lt;/h6&gt;
              &lt;strong&gt;@r.StudioName&lt;/strong&gt;
              &lt;p&gt;&lt;a href="#"&gt;@r.URL&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;@r.StreetAddress&lt;/p&gt;
              &lt;p&gt;@r.City, @r.AddressStateID @r.Zip&lt;/p&gt;
              &lt;p&gt;@r.Phone&lt;/p&gt;
              &lt;p&gt;@r.EmailAddress&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="studioDetails"&gt;
              &lt;p&gt;&lt;strong&gt;Instrument(s) Taught&lt;/strong&gt;&lt;/p&gt;
              &lt;p&gt;
                  @{
      var instrumentString = r.Instruments.Aggregate("", (a, b) =&gt; a + b.Instrument + ", ");
      if (instrumentString.Length != 0)
      {
          instrumentString = instrumentString.Remove(instrumentString.LastIndexOf(","));
      }
                  }
                  @instrumentString
              &lt;/p&gt;
              &lt;br /&gt;
  
              @if (r.Information != "" &amp;&amp; r.Information != null)
              {
                  &lt;p&gt;&lt;strong&gt;Information&lt;/strong&gt;&lt;/p&gt;
                  &lt;p&gt;@r.Information&lt;/p&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Now here's my Controller. I get the results back correctly in the Controller, just not updating the code block:</p>
  
  <pre><code>public ActionResult FindATeacher()
          {
              Model.Instruments = new SelectList(TeacherService.GetInstrumentList(0),"InstrumentID","Instrument");
              Model.Cities = new SelectList(TeacherService.GetCityList(),"CityID","City");
              Model.Teachers = TeacherService.GetTeacherList("", 0);
              return View(Model);
          }
  
          [HttpPost]
          public JsonResult FilterTeachers(String teacherName, String instrumentID, String cityID)
          {
              Model.Teachers = TeacherService.GetTeacherList("John", 0, 0);
              return Json(Model.Teachers);
          }
  </code></pre>
  
  <p>Thanks.</p>