Click here to Skip to main content
14,921,505 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

C#
@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:

C#
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:

JavaScript
<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!
Posted
Updated 19-Dec-19 8:49am
Comments
MadMyche 17-Dec-19 21:21pm
   
Can you add in the actual Rendered HTML, as opposed to the View code?

('#Network_UID').val()


You are calling "val" on ('#Network_UID') which is just a string, it doesn't support val. You meant to use $('#Network_UID') which creates a new jQuery object ("$" being the jQuery function alias) passing #Network_UID as a param which will cause jQuery to return an object that wraps the element with an id of Network_UID, and that jQuery object supports "val"

$.getJSON(bwUrl, { UNIID: $(this).val(), NetworkID: $('#Network_UID').val() }, function (data) {
   
Comments
Mitchell Schaff 19-Dec-19 14:57pm
   
Thanks for clarifying that, your answer definitely made a difference!

One related question: after making that change, I'm getting a response that
Quote:
The view 'Index' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/bandwidthchange/Index.aspx
~/Views/bandwidthchange/Index.ascx
~/Views/Shared/Index.aspx
~/Views/Shared/Index.ascx
~/Views/bandwidthchange/Index.cshtml
~/Views/bandwidthchange/Index.vbhtml
~/Views/Shared/Index.cshtml
~/Views/Shared/Index.vbhtml
But that puzzles me, because it finds the FetchBandwidth method in the controller correctly if I define the method with just one parameter and pass a single parameter from the .getJSON call. Now, however, with the method defined as
Hide Copy Code
public JsonResult FetchBandwidth(int UNIID, int NetworkID)
and the .getJSON call revised to pass the second parameter correctly, the routine raises the error show above. For reference, the view is named Edit.cshtml, and the controller is named BandwidthChangecontroller.cs

Any hints on what might be causing the error?
F-ES Sitecore 20-Dec-19 4:20am
   
Supply both the action and controller in Url.Action

'@Url.Action("FetchBandwidth", "ControllerName")';
Mitchell Schaff 19-Dec-19 18:57pm
   
I realized after I posted this that I was asking the wrong question. I don't have the correct handler in place to process the button press that was generating this error.

However, when I made the suggested change, adding the $ sign in front of the reference, the page still does not call the bwURL method. If I try to debug the script in IE 11, it parses the .getJSON call line of code, but never seems to get to the "if (!data)" code. Something is not quite right with that call, but IE doesn't give me any information on what the issue is. I'd appreciate any pointers on this. Thanks!
Mitchell Schaff 19-Dec-19 19:02pm
   
When executing the page in Chrome, the following error is reported:
jquery-3.3.1.js:9600 GET http://localhost:54979/bandwidthchange/FetchBandwidth?UNIID=1539 500 (Internal Server Error)

Forgive me if this is a newbie question, but does this JsonResult method need to be a Post method rather than the Get method?
Thanks for clarifying that, your answer definitely made a difference!

One related question: after making that change, I'm getting a response that
Quote:
The view 'Index' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Views/bandwidthchange/Index.aspx
~/Views/bandwidthchange/Index.ascx
~/Views/Shared/Index.aspx
~/Views/Shared/Index.ascx
~/Views/bandwidthchange/Index.cshtml
~/Views/bandwidthchange/Index.vbhtml
~/Views/Shared/Index.cshtml
~/Views/Shared/Index.vbhtml
But that puzzles me, because it finds the FetchBandwidth method in the controller correctly if I define the method with just one parameter and pass a single parameter from the .getJSON call. Now, however, with the method defined as
public JsonResult FetchBandwidth(int UNIID, int NetworkID)
and the .getJSON call revised to pass the second parameter correctly, the routine raises the error show above. For reference, the view is named Edit.cshtml, and the controller is named BandwidthChangecontroller.cs

Any hints on what might be causing the error?
   
Comments
Richard Deeming 19-Dec-19 14:54pm
   
If you want to reply to a solution, click the "Have a Question or Comment?" button under that solution and post a comment.

Do not post your comment as a new "solution".
Mitchell Schaff 19-Dec-19 14:59pm
   
Thanks for the heads-up on this. That was an oversight on my part.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900