Question

I have an AJAX call to a function:

$('#DeviceType').change(function () {
   // when the selection of the device type drop down changes 
   // get the new value
   var devicetype = $(this).val();

   $.ajax({
      url: '@Url.Action("GetEquipmentCode")',
      type: 'POST',
      data: { deviceTypeID: devicetype },
      success: function (result) {
         // when the AJAX succeeds refresh the EquipmentCode text box
         $('#EquipmentCode').val(result);
      }
   });
});

with the function being

[HttpPost]
public string GetEquipmentCode(int deviceTypeID)
{
   var deviceType = _db.DeviceTypes.Single(d => d.ID == deviceTypeID);

   return (deviceType.EquipmentCode != null) ? 
                      deviceType.EquipmentCode.Code : 
                      String.Empty;
}

However, if the function returns String.Empty the string I actually get in my text box is “[object XMLDocument]“. How do I get a result of empty string in my text box?

Answer 1

JSON is probably the easiest.

Try:

$('#DeviceType').change(function () {
   // when the selection of the device type drop down changes 
   // get the new value
   var devicetype = $(this).val();

   $.ajax({
      url: '@Url.Action("GetEquipmentCode")',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      data: { deviceTypeID: devicetype },
      success: function (result) {
         // when the AJAX succeeds refresh the EquipmentCode text box
         $('#EquipmentCode').val(result);
      }
   });
});

Then in your ActionMethod

[HttpPost]
public ActionResult GetEquipmentCode(int deviceTypeID)
{
   var deviceType = _db.DeviceTypes.Single(d => d.ID == deviceTypeID);

   return Json((deviceType.EquipmentCode != null) ? 
                      deviceType.EquipmentCode.Code : 
                      String.Empty);
}