Pass two parameters to a JSON AJAX query ASP.NET MVC

See more:

ASP.NET

MVC

JSON

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;
    // Calculate the bandwidth based on the two parameters
    CurBandwidth = 10;   // set it to 10 for now
    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!