Hello,
I have an MVC form with three fields on it. One is a label named "Network_UID", the second is a dropdown list named "UNI_UID", and the third is named "Current_Bandwidth". They are defined in the view as follows:
@Html.LabelFor(model => model.Network_UID)
@Html.DisplayFor(model => model.Network_UID, new { htmlAttributes = new { @class = "form-control" } })
@Html.LabelFor(model => model.UNI_UID, htmlAttributes: new { @class = "col-form-label col-md-2" })
@Html.DropDownList("UNI_UID", null, "Select One...", htmlAttributes: new { @class = "form-control" })
@Html.LabelFor(model => model.Current_Bandwidth, htmlAttributes: new { @class = "col-form-label col-md-2" })
@Html.DisplayFor(model => model.Current_Bandwidth, new { htmlAttributes = new { @class = "form-control" } })
When a selection is made from the UNI_UID dropdown, I'd like to have the page make an AJAX call to a routine in the controller named "FetchBandwidth" which will return a decimal value. The routine is coded in the controller as follows:
public JsonResult FetchBandwidth(int UNIID, int NetworkID)
{
decimal CurBandwidth = 0;
CurBandwidth = 10;
var data = new { Value = 0, Text = CurBandwidth.ToString() };
return Json(data, JsonRequestBehavior.AllowGet);
}
In the view, I have the following script:
<script type="text/javascript">
var newBW = $('#New_Bandwidth');
var bwUrl = '@Url.Action("FetchBandwidth")';
var curBW = $('#Current_Bandwidth');
$('#UNI_UID').change(function () {
$.getJSON(bwUrl, { UNIID: $(this).val(), NetworkID: ('#Network_UID').val() }, function (data) {
if (!data) {
return;
}
$.each(data, function (index, item) {
curBW.val(item.Text);
});
})
})
</script>
As you can see, I'm trying to pass both the values from the "UNI_ID" field and the "Network_UID" field to the FetchBandwidth method, but I'm getting an "Object doesn't support property or method 'val'" error from the browser. I'm new to JQuery/AJAX, so I don't know whether I'm calling the FetchBandwidth correctly or not.
What I have tried:
If I remove the "NetworkID: ('#Network_UID').val()" code from the script, and remove the parameter from the FetchBandwidth declaration in the controller, the UNI_UID value passes correctly. In this case, I need to pass both values. I'm wondering if anyone can provide any insights on this?
Thanks!