title: Rendering partial view in ASP.Net MVC3 Razor using Ajax
body: <p>The base functionality I wish to achive is that the contents of a table are updated when a dropdownlist item is selected. This will update when the user makes a new selection and retrieve new information from the database and repopulate the table.</p>
  
  <p>It's also worth noting that the DropDownListFor that I want the .change() to work with is not contained within the AjaxForm but appears elsewhere on the page (admittedly in another form)</p>
  
  <p>To achieve this I looked at this question: <a href="https://stackoverflow.com/questions/8164328/rendering-partial-view-dynamically-in-asp-net-mvc3-razor-using-ajax-call-to-acti">Rendering partial view dynamically in ASP.Net MVC3 Razor using Ajax call to Action</a> which does a good job of going part the way of what I want to do.  </p>
  
  <p>So far, I have a controller method which handles populating a customized viewmodel for the partial view:</p>
  
  <pre><code>    [HttpPost]
      public ActionResult CompanyBillingBandDetails(int id = 0)
      {
          var viewModel = new BillingGroupDetailsViewModel();
          var billingGroupBillingBands =
              _model.GetAllRecordsWhere&lt;BillingGroupBillingBand&gt;(x =&gt; x.BillingGroupId == id).ToList();
  
          foreach (var band in billingGroupBillingBands)
          {
              viewModel.BillingBands.Add(band.BillingBand);
          }
  
          return PartialView("BillingGroupDetailsPartial", viewModel);
      }
  </code></pre>
  
  <p>The ViewModel I wish to populate each call:</p>
  
  <pre><code> public class BillingGroupDetailsViewModel
      {
          public List&lt;BillingBand&gt; BillingBands { get; set; }
      }
  </code></pre>
  
  <p>The strongly typed model I'm using as a model for the partial view</p>
  
  <pre><code>public class BillingBandsObject
      {
          public int BillingBandId { get; set; }
          public int RangeFrom { get; set; }
          public int RangeTo { get; set; }
          public Decimal Charge { get; set; }
          public int BillingTypeId { get; set; }
          public bool Delete { get; set; }
      }
  </code></pre>
  
  <p>The partial view it populates and returns:</p>
  
  <pre><code>@model xxx.xxx.DTO.Objects.BillingBandsObject
  
  
  &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayTextFor(x =&gt; x.RangeFrom)
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayTextFor(x =&gt; x.RangeTo)
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          @Html.DisplayTextFor(x =&gt; x.Charge)
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The Razor code for this section of the page:</p>
  
  <pre><code>    &lt;table&gt;
          &lt;thead&gt;
             &lt;tr&gt;
                 &lt;th&gt;
                    Range From
                 &lt;/th&gt;
                 &lt;th&gt;
                    Range To
                 &lt;/th&gt;
                 &lt;th&gt;
                    Charge
                 &lt;/th&gt;
             &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;tbody&gt;
  
      @using (Ajax.BeginForm("CompanyBillingBandDetails", new AjaxOptions() { UpdateTargetId = "details", id = "ajaxform" }))
      {
      &lt;div id="details"&gt;
          @Html.Action("CompanyBillingBandDetails", new { id = 1 })
      &lt;/div&gt;
      }
  
      &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>and finally the function I lifted almost straight from Darin's answer:</p>
  
  <pre><code>$(function () {
          $('#billinggrouplist').change(function () {
              // This event will be triggered when the dropdown list selection changes
  
              // We start by fetching the form element. Note that if you have
              // multiple forms on the page it would be better to provide it
              // an unique id in the Ajax.BeginForm helper and then use id selector:
              var form = $('#ajaxform');
  
              // finally we send the AJAX request:
              $.ajax({
                  url: form.attr('action'),
                  type: form.attr('method'),
                  data: form.serialize(),
                  success: function (result) {
                      // The AJAX request succeeded and the result variable
                      // will contain the partial HTML returned by the action
                      // we inject it into the div:
                      $('#details').html(result);
                  }
              });
          });
      });
  </code></pre>
  
  <p>At the moment I have fought through a number of errors, currently I am faced with :</p>
  
  <p>"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'."</p>
  
  <p>However, i feel my understanding of the problem as a whole may be lacking.</p>
  
  <p>Any help appreciated!</p>