How does one use jQuery to reference the field(s) of a Model serving as a variable of a parent Model, then retrieve those fields for different entries of that inner Model?
For example, there's a AccountOwnerModel and a AccountModel, the latter containing an variable of AccountOwnerModel type.
AccountOwner Model:
public class AccountOwnerModel
{
public int AccountOwnerID {get; set;}
public string AccountOwnerName {get; set;}
public string AccountOwnerEmail {get; set;}
public string AccountOwnerPhoneNumber {get; set;}
}
Account Model:
public class AccountModel
{
public int AccountID {get; set;}
public int AccountOwnerID {get; set;}
public AccountOwnerModel AccountOwner {get; set;}
}
In the Controller, there is an Action to retrieve the AccountOwner fields should a different AccountOwner be selected:
[HttpPost]
public ActionResult GetAccountOwnerInfo(string ownerID)
{
Int64 accountOwnerID = 0;
Int64.TryParse(ownerID, out accountOwnerID);
DbEntities projectDB = new DbEntities();
var owner = projectDB.uspGetAccountOwnerInformation(accountOwnerID).FirstOrDefault();
AccountOwnersModel accountOwner = new AccountOwnersModel()
{
AccountOwnerID = owner.AccountOwnerID,
AccountOwnerName = owner.AccountOwnerName,
AccountOwnerEmail = owner.AccountOwnerEmail,
AccountOwnerPhoneNumber = owner.AccountOwnerPhoneNumber
};
return Json(accountOwner, JsonRequestBehavior.AllowGet);
}
In the View, there's a dropdownlist for the AccountOwnerModels by AccountOwnerID and AccountOwnerName, then lines to show and modify the data for that AccountOwnerID, save a different AccountOwnerModel to the AccountModel, and fetch the data for a different selected AccountOwnerID:
<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-8" 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="AccountOwnerEmailAddress">
@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>
<div class="row">
<div class="col-lg-12 text-right">
<button type="submit" class="btn btn-success">Save Account Owner</button>
</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");
if (this.value >= 1) {
$.ajax({
type: "POST",
url: '/Sales/GetAccountOwnerInfo',
data: { ownerID: $("#AccountOwnerID").val() },
success: function (data) {
//Fill data
$ownerName.val = data.AccountOwnerName;
$ownerEmail.val = data.AccountOwnerEmail;
$ownerPhone.val = data.AccountOwnerPhoneNumber;
}
});
}
else {
//clear fields
$ownerName.val('');
$ownerEmail.val('');
$ownerPhone.val('');
}
}).change();
</script>
So, to be more specific, can the variables in the jQuery code be assigned by $("#AccountOwner.AccountOwnerName"), or will the period refer to a class id? Also, is the AJAX Post syntax correct? This code isn't showing errors in either Visual Studio or the Chrome console, but it isn't returning anything on different dropdown selections, either. I've tried referring the variables to just the field name, e.g. $("AccountOwnerName"), searching this site to no avail, and using $("#AccountOwnerID").val() in the AJAX Post data, which was null each time but seemed to at least send a null on each dropdown change. There's an id for each column class, but will using that in the references affect the "@LabelFor" as well? Thanks in advance!
