Providing a partial view in ASP.Net MVC3 Razor using Ajax

Question

The basic functionality that I want to achieve is that the contents of the table are updated when the dropdownlist element is selected. This will be updated when the user makes a new selection and retrieves new information from the database and refills the table.

It is also worth noting that the DropDownListFor, which I want to work with .change (), is not contained in AjaxForm, but appears elsewhere on the page (although in a different form)

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

So far, I have a controller method that processes a custom view model for a 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); } 

ViewModel I want to populate every call:

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

A strongly typed model that I use as a model for partial representation

 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 that it fills 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> 

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 that I raised almost directly 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 encountered a number of errors, currently I am facing:

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

However, I feel that my understanding of the problem as a whole may be absent.

Any help appreciated!

Answer 1

This error means that an exception has occurred while displaying your child view. Maybe something is related to your data, i.e. NulLReferenceException .

Just attach your debugger and set it to break when an exception is thrown.