locked
Binding cascading drop down via MVC. RRS feed

  • Question

  • User-240513752 posted

    I am binding a cascading drop down by using ajax call and json format, it results undefined, even the controller and view is showing data while debugging but not binding in the child dropdown.

    Images are attached there.

    child drop down

    http://oi65.tinypic.com/25f1uzq.jpg

    http://oi66.tinypic.com/1zyvg3d.jpg

    In controller

       public JsonResult FillStates(int countryId)
            {
                List<SelectListItem> list = new List<SelectListItem>();
                var lststates = from str in _db.state_tbl
                                where str.ctry_id == countryId
                                select str;
               
                return Json(new { lststates }, JsonRequestBehavior.AllowGet);
            }

    In view

     $(document).ready(function () {
            $("#ctry_id").change(function () {
                $.ajax({
                    type: 'Post',
                    url: '@Url.Action("FillStates")',
                    dataType: 'json',
                    data: { countryId: $("#ctry_id").val() },
                    success: function (states) {
    
    
                        $.each(states, function (i, state) {
                            $("#State").append("<option ='" + state.st_id + "'>"
                                 + state.st_name + "</option>");
    
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve country states.' + ex);
                    }
                });
                return false;
            });
        });

    Wednesday, February 13, 2019 8:57 AM

Answers

  • User1520731567 posted

    Hi Khan_1,

    According to your this picture,state is a list<> collection,it must be state[0].st_name or state[1].st_name... to get value.

    return Json(new { lststates }, JsonRequestBehavior.AllowGet);

    As I can see in your return of controller,your return is named lststates,

    So, you could modify in ajax,like:

     success: function (states) {
    
    
                        $.each(states.lststates, function (i, state) {
                            $("#State").append("<option ='" + state.st_id + "'>"
                                 + state.st_name + "</option>");
    
                        });
                    },

    In addition,I suggest you could programming normalization so that avoiding some unnecessary potential errors,

    This will help you to reduce the bugs in subsequent maintenance:

     $("#State").append("<option value='" + state.st_id + "'>"
                                 + state.st_name + "</option>");

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 14, 2019 9:55 AM

All replies

  • User-1038772411 posted

    i think this below reference will help you to solve your problem.

    Ref Link: https://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/

    Wednesday, February 13, 2019 11:13 AM
  • User1429838465 posted

    I wrote this post specifically for people having issues binding data to MVC dropdowns.

    I hope it helps.

    https://www.danylkoweb.com/Blog/the-ultimate-guide-to-aspnet-mvc-dropdowns-JO

    JD

    Wednesday, February 13, 2019 11:20 AM
  • User-2054057000 posted

    I think the binding code in the success callback is wrong:

    $.each(states, function (i, state) {
      $("#State").append("<option ='" + state.st_id + "'>" + state.st_name + "</option>");
    });

    You add them to a variable then use the .html() method to set them to your drop down. 

    var str:
    $.each(states, function (i, state) {
      str += "<option ='" + state.st_id + "'>" + state.st_name + "</option>");
    });
    $("#state").html(str);

    The good think about this code is that you can easily debug what value the str is forming by using console.log() method:

    console.log(str);

    Check this tutorial which does the cascading drop down binding with jQuery.

    Thanks & Regards

    Wednesday, February 13, 2019 11:44 AM
  • User-240513752 posted

    I have tried every method which you guys suggested but no vain, The issue is in iteration value in i, which is not showing numbers, what should i do?

    Wednesday, February 13, 2019 7:02 PM
  • User1520731567 posted

    Hi Khan_1,

    According to your this picture,state is a list<> collection,it must be state[0].st_name or state[1].st_name... to get value.

    return Json(new { lststates }, JsonRequestBehavior.AllowGet);

    As I can see in your return of controller,your return is named lststates,

    So, you could modify in ajax,like:

     success: function (states) {
    
    
                        $.each(states.lststates, function (i, state) {
                            $("#State").append("<option ='" + state.st_id + "'>"
                                 + state.st_name + "</option>");
    
                        });
                    },

    In addition,I suggest you could programming normalization so that avoiding some unnecessary potential errors,

    This will help you to reduce the bugs in subsequent maintenance:

     $("#State").append("<option value='" + state.st_id + "'>"
                                 + state.st_name + "</option>");

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 14, 2019 9:55 AM