Dynamically generate api url parameters in jquery url action to populate dropdown list

Question

I have a View in my VS project that has three dropdown lists, 2 of which are cascading and need to populate on the parent control's change. The workflow I have works great for static url calls, but I need to dynamically add the data and I am not having any luck. Below is a working static section of code and one of my many iterations of an attempt to make it work dynamically.

If needed, the example data hierarchy I have below is in descending order:Item (e.g. Food), Type (e.g. Fruit), Name (e.g. Banana)

Appreciate any input.

Working Static Code:

    function dynamicTypeList() {
       $.ajax({
           url: '@Url.Action("", "api/types/1")',

           success: function (data) {
               $("#Type_Id").empty();
               $("#Name_Id").empty();
               $("#Type_Id").append("<option value>Select Type (NEW)</option>");
               $("#Name_Id").append("<option value>Select Name (NEW)</option>");
               for (var i in data) {
                   $("#Type_Id").append("<option value='" + (i + 1) + "'>" + $(data)[i] + "</option>");
               }
           }
       });
   };

Broken Dynamic Code:

    function dynamicTypeList() {
       selItem = $("#Item_Number").val();
       console.log(selItem);
       $.ajax({
           url: '@Url.Action("", "api/types/" + selItem)',

           success: function (data) {
               $("#Type_Id").empty();
               $("#Name_Id").empty();
               $("#Type_Id").append("<option value>Select Type (NEW)</option>");
               $("#Name_Id").append("<option value>Select Name (NEW)</option>");
               for (var i in data) {
                   $("#Type_Id").append("<option value='" + (i + 1) + "'>" + $(data)[i] + "</option>");
               }
           }
       });
   };

Brian Mains · Accepted Answer · 2017-01-09 14:42:01Z

0

Assuming "api" is the controller and "types" is the action, try replacing the url variable with:

url: '@Url.Action("types", "api")' + sellItem,

sellItem is a JavaScript variable and needs to stay completely on the client. Or you can use this technique so you can use the natural URL parameter passing within Url.Action:

How to access javascript variable within @URL.Action()

answered Jan 9, 2017 at 14:42

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2653814 Over a year ago

Worked like a charm. Much appreciated.

Collectives™ on Stack Overflow

Dynamically generate api url parameters in jquery url action to populate dropdown list

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related