Question

So, I found this tutorial that had also the code source of the example showing how to make cascading dropdownlist using Jquery.
I tried to use that code for my own project example but it didn’t seem to work.

    public class IndexViewModel
    {
        //1st DDL ID
        public int grupa_id
        {
            get;
            set;
        }


        //1st DropDownList Values
        public List<SelectListItem> GrupeValues
        {
            get;
            set;
        }

        //2nd  DDL ID
        public int produs_id
        {
            get;
            set;
        }


        //2nd DropDownList Values
        public List<SelectListItem> ProduseValues
        {
            get;
            set;
        }
    }

The Controller.:

    public ActionResult Blabla()
    {
        DataRepository objRepository = new DataRepository();

        IndexViewModel objIndexViewModel = new IndexViewModel();

        objIndexViewModel.GrupeValues = objRepository.GetGrupa();

        //Get the first item of the First drop down list(State ddl)
        string first = objIndexViewModel.GrupeValues[0].Value;

        //Get the City names based on the first Item in the State ddl
        objIndexViewModel.ProduseValues = objRepository.GetProduse(Convert.ToInt16(first));

        return View(objIndexViewModel);
    }

Then the actiont that return jsonresult:

    public JsonResult Cities_SelectedState(int param)
    {
        DataRepository objRepository = new DataRepository();

        JsonResult result = new JsonResult();
        var vCities = objRepository.GetProduse(Convert.ToInt16(param));
        result.Data = vCities.ToList();
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
        return result;
    }

The View:

       <script type="text/javascript">
           $(document).ready(function () {
               $("#grupa_id").change(function () {
                   var url = '<%= Url.Content("~/") %>' + "Home/Cities_SelectedState";
                   var ddlsource = "#grupa_id";
                   var ddltarget = "#produs_id";
                   $.getJSON(url, { param: $(ddlsource).val() }, function (data) {
                       $(ddltarget).empty();
                       $.each(data, function (index, optionData) {
                           $(ddltarget).append("<option value='" + optionData.Text + "'>" + optionData.Value + "</option>");
                       });

                   });
               });
           });

   </script>

<p>

  <%:Html.Label("Grupe:") %>
  <%:Html.DropDownListFor(m=>m.grupa_id, Model.GrupeValues) %>

  <%:Html.Label("Produse:") %>
  <%:Html.DropDownListFor(m=>m.produs_id, Model.ProduseValues)%>        
</p>

Where and what am I doing wrong?

Answer 1

You are calling Home/Cities_SelectedState but I don’t see where you pass the int param in — maybe that is what you are missing.