AJAX Get sending null variable to ActionResult

Question

I have a DropDownListFor that, when a different elementID/value is selected, should populate related elements with Model data returned from a GET ActionResult, or clear the entries from the related TextBoxFor(s) if no value is selected. The string ID from the DropDownListFor passed to the ActionResult is always null, generating an error. I've tried using variables for the AJAX data call, stringify-ing the data, and reading many StackOverflow questions, but the null exception still occurs. I'm new to jQuery, so can anyone see why the data doesn't contain a value?

The View:

<div class="row">
    <div class="col-lg-4">
        @Html.LabelFor(m => m.AccountOwnerID, "Account Owner Name", new { @class = "req" })
        @Html.DropDownListFor(m => m.AccountOwnerID, Model.AccountOwners, "--New Owner--")
    </div>
    <div class="col-lg-4" id="AccountOwnerName">
        @Html.LabelFor(m => m.AccountOwner.AccountOwnerName, new { @class = "req"})
        @Html.TextBoxFor(m => m.AccountOwner.AccountOwnerName)
    </div>
</div>
<div class="row">
    <div class="col-lg-6" id="AccountOwnerPhoneNumber">
        @Html.LabelFor(m => m.AccountOwner.AccountOwnerPhoneNumber, "Owner Phone Number")
        @Html.TextBoxFor(m => m.AccountOwner.AccountOwnerPhoneNumber, new { @class = "form-control", data_parsley_required = "true" })
    </div>
    <div class="col-lg-6" id="AccountOwnerEmail">
        @Html.LabelFor(m => m.AccountOwner.AccountOwnerEmail, "Owner E-Mail Address")
        @Html.TextBoxFor(m => m.AccountOwner.AccountOwnerEmail, new { @class = "form-control", data_parsley_required = "true" })
    </div>
</div>

@section Scripts{

<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>

<script>
    $("#AccountOwnerID").change(function () {
        var $ownerName = $("#AccountOwner\\.AccountOwnerName"),
            $ownerEmail = $("#AccountOwner\\.AccountOwnerEmail"),
            $ownerPhone = $("#AccountOwner\\.AccountOwnerPhoneNumber"),
            $ownerValue = $("#AccountOwnerID").val(),
            $aOID = { ownerID : $ownerValue };
        if (this.value >= 1) {
            $.ajax({
                type: "GET",
                url: '/Sales/GetAccountOwnerInfo',
                data: JSON.stringify($aOID),
                success: function (data) {
                    //Fill data
                    $ownerName = data.AccountOwnerName;
                    $ownerEmail = data.AccountOwnerEmail;
                    $ownerPhone = data.AccountOwnerPhoneNumber;
                }
            });
        }
        else {
            //clear fields
            $ownerName.val('');
            $ownerEmail.val('');
            $ownerPhone.val('');
        }
    }).change();
</script>

The Controller, which returns a model with elements to which the AJAX success assigns to the TextBoxFor(s):

public ActionResult GetAccountOwnerInfo(string ownerID)
    {
        Int64 accountOwnerID = 0;
        Int64.TryParse(ownerID, out accountOwnerID);

        ProjectEntities projectDB = new ProjectEntities();
        var owner = projectDB.uspGetAccountOwnerInformation(accountOwnerID).FirstOrDefault();
        AccountOwnersModel accountOwner = new AccountOwnersModel()
        {
            AccountOwnerID = owner.AccountOwnerID,
            AccountOwnerName = owner.AccountOwnerName,
            AccountOwnerEmail = owner.AccountOwnerEmail,
            AccountOwnerPhoneNumber = owner.AccountOwnerPhone,
        };

        return Json(accountOwner, JsonRequestBehavior.AllowGet);
    }

Answer 1

Firstly $ownerName = $("#AccountOwner\\.AccountOwnerName"), will mean $ownerName is undefined since you don't have any elements with id="AccountOwner\\.AccountOwnerName". The html helper methods generate id attributes by using the replacing any . (and [ and ] characters) in the property name with _ to avoid issues with jquery. It would need to be $ownerName = $("#AccountOwner_AccountOwnerName")

Secondly, you do not need to stringify the data (and if you do, then you need to specify the contentType: 'json', ajax option). It should be data: { ownerID: $(this.val() },. Note the use of $(this) to avoid having to search the DOM again.

Thirdly, $ownerName is a jquery element so to set its value, it needs to $ownerName.val(data.AccountOwnerName);

Side note: your usage of if (this.value >= 1) suggests something wrong. Your helper is generating its first option with <option value="">--New Owner--</option> so you should be checking for null.

Your script should be

// cache the elements since you repeatedly accessing them
var ownerName = $("#AccountOwner_AccountOwnerName"),
    ownerEmail = $("#AccountOwner_AccountOwnerEmail"),
    ownerPhone = $("#AccountOwner_AccountOwnerPhoneNumber");
$("#AccountOwnerID").change(function () {
  if ($(this).val()) {
    $.ajax({
      type: "GET",
      url: '@Url.Action("GetAccountOwnerInfo", "Sales")', // don't hard code your url's
      data: { ownerID: $(this).val() },
      success: function (data) {
        // Fill data
        ownerName.val(dataAccountOwnerName);
        ownerEmail.val(data.AccountOwnerEmail);
        ownerPhone.val(data.AccountOwnerPhoneNumber);
      }
    });
  } else {
    // clear fields
    ownerName.val('');
    ownerEmail.val('');
    ownerPhone.val('');
  }
})

Side note: Since your passing a value which is int to the method, your method parameter should be int ownerID. Also you don't need the value of AccountOwnerID in the response so you could just create an anonymous object in the controller

public ActionResult GetAccountOwnerInfo(int ownerID)
{
  ProjectEntities projectDB = new ProjectEntities();
  var owner = projectDB.uspGetAccountOwnerInformation(ownerID).FirstOrDefault();
  var data = new
  {
    AccountOwnerName = owner.AccountOwnerName,
    AccountOwnerName = owner.AccountOwnerName,
    AccountOwnerPhoneNumber = owner.AccountOwnerPhone
  };
  return Json(data, JsonRequestBehavior.AllowGet);
}