Rendering partial view in ASP.Net MVC3 Razor using Ajax

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.

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)

To achieve this I looked at this question: Rendering partial view dynamically in ASP.Net MVC3 Razor using Ajax call to Action which does a good job of going part the way of what I want to do.

So far, I have a controller method which handles populating a customized viewmodel for the partial view:

    [HttpPost]
    public ActionResult CompanyBillingBandDetails(int id = 0)
    {
        var viewModel = new BillingGroupDetailsViewModel();
        var billingGroupBillingBands =
            _model.GetAllRecordsWhere<BillingGroupBillingBand>(x => x.BillingGroupId == id).ToList();

        foreach (var band in billingGroupBillingBands)
        {
            viewModel.BillingBands.Add(band.BillingBand);
        }

        return PartialView("BillingGroupDetailsPartial", viewModel);
    }

The ViewModel I wish to populate each call:

 public class BillingGroupDetailsViewModel
    {
        public List<BillingBand> BillingBands { get; set; }
    }

The strongly typed model I'm using as a model for the partial view

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; }
    }

The partial view it populates and returns:

@model xxx.xxx.DTO.Objects.BillingBandsObject


<tr>
    <td>
        @Html.DisplayTextFor(x => x.RangeFrom)
    </td>
</tr>
<tr>
    <td>
        @Html.DisplayTextFor(x => x.RangeTo)
    </td>
</tr>
<tr>
    <td>
        @Html.DisplayTextFor(x => x.Charge)
    </td>
</tr>

The Razor code for this section of the page:

    <table>
        <thead>
           <tr>
               <th>
                  Range From
               </th>
               <th>
                  Range To
               </th>
               <th>
                  Charge
               </th>
           </tr>
        </thead>
    <tbody>

    @using (Ajax.BeginForm("CompanyBillingBandDetails", new AjaxOptions() { UpdateTargetId = "details", id = "ajaxform" }))
    {
    <div id="details">
        @Html.Action("CompanyBillingBandDetails", new { id = 1 })
    </div>
    }

    </tbody>
 </table>

and finally the function I lifted almost straight from Darin's answer:

$(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);
                }
            });
        });
    });

At the moment I have fought through a number of errors, currently I am faced with :

"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'."

However, i feel my understanding of the problem as a whole may be lacking.

Any help appreciated!