locked
Id pass error while creating cascading three dropdown list in Asp.net MVC 5 RRS feed

  • Question

  • User1661386615 posted

    @model CDL.Models.CountryStateViewModel

    @{
    ViewBag.Title = "Index";
    }

    <h2>Index</h2>

    <div class="container">
    <div class="form-group">
    @if (ViewBag.StateList != null)
    {
    @Html.DropDownListFor(model => model.StateId, ViewBag.StateList as SelectList, "Select State", new { @class = "form-control" })
    }
    </div>


    <div class="form-group">

    @Html.DropDownListFor(model => model.CityId,new SelectList(""), "Select City", new { @class = "form-control" })

    </div>
    <div class="form-group">

    @Html.DropDownListFor(model => model.DistricId,new SelectList(""), "Select Distric", new { @class = "form-control" })

    </div>
    </div>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function () {
    $("#StateId").change(function () {

    $.get("/Home/GetCityList", {StateId: $("#StateId").val() }, function (data) {
    $("#CityId").empty();
    $.each(data, function (index, row) {

    $("#CityId").append("<option value='" + row.CityId+"'>"+row.CityName+"</option>")
    });

    });
    })

    });
    $(document).ready(function () {
    $("#CityId").change(function () {

    $.get("/Home/GetDistricList", { CityId: $("#CityId").val() }, function (data) {
    $("#DistricId").empty();
    $.each(data, function (index, row) {

    $("#DistricId").append("<option value='" + row.DistricId + "'>" + row.DistricName + "</option>")
    });

    });
    })

    });
    </script>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using CDL.Models;
    namespace CDL.Controllers
    {
    public class HomeController : Controller
    {
    CDDLEntities db;
    public HomeController()
    {
    db = new CDDLEntities();
    }
    public ActionResult Index()
    {
    List<State> StateList = db.States.ToList();

    ViewBag.StateList = new SelectList(StateList, "ID", "StateName");
    return View();
    }
    public JsonResult GetCityList(int StateId)
    {
    db.Configuration.ProxyCreationEnabled = false;
    List<City> CityList = db.Cities.Where(x => x.StateId == StateId).ToList();
    return Json(CityList, JsonRequestBehavior.AllowGet);
    }
    public JsonResult GetDistricList(int CityId)
    {
    db.Configuration.ProxyCreationEnabled = false;
    List<Distric> DistricList = db.Districs.Where(x => x.CityId == CityId).ToList();
    return Json(DistricList, JsonRequestBehavior.AllowGet);
    }
    }
    }

    Sunday, August 9, 2020 4:55 AM

Answers

  • User1686398519 posted

    Hi Syed Ammar Bukhari,

    JSON objects are written in key/value pairs. You can view the returned data by breaking points and view the correct key. The reason for the error may be that the key named "CityId" does not exist in the data.

    • Based on the code you provided, I created some models to reproduce your problem.If there is no field named "CityId" in your model named City, then "row.CityId" has no value.
    • In addition, you need to modify your js code so that distric can be successfully changed after changing the state for the first time.

    Model

        public class CountryStateViewModel
        {
    
            public int StateId { get; set; }
            public int CityId { get; set; }
            public int DistricId { get; set; }
        }
        public class State
        {
            public int ID { get; set; }
            public string StateName { get; set; }
        }
        public class City
        {
            public int ID { get; set; }
            public string CityName { get; set; }
            public int StateId { get; set; }
        }
        public class Distric
        {
            public int ID { get; set; }
            public string DistricName { get; set; }
            public int CityId { get; set; }
        }

    View

    <script>
    $(document).ready(function () {
        $("#StateId").change(function () {
            $.get("@Url.Action("GetCityList")", { StateId: $("#StateId").val() }, function (data) {
                $("#CityId").empty();
                console.log(data)
                $.each(data, function (index, row) {
                    $("#CityId").append("<option value='" + row.ID + "'>" + row.CityName + "</option>")
                });
                changeDistric();
            });
        });
        $("#CityId").change(function () {
            changeDistric();
        });
        function changeDistric() {
            $.get("@Url.Action("GetDistricList")", { CityId: $("#CityId").val() }, function (data) {
                $("#DistricId").empty();
                $.each(data, function (index, row) {
                    $("#DistricId").append("<option value='" + row.ID + "'>" + row.DistricName + "</option>")
                });
            });
        }
    });
    </script>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2020 2:36 AM

All replies

  • User1686398519 posted

    Hi Syed Ammar Bukhari,

    JSON objects are written in key/value pairs. You can view the returned data by breaking points and view the correct key. The reason for the error may be that the key named "CityId" does not exist in the data.

    • Based on the code you provided, I created some models to reproduce your problem.If there is no field named "CityId" in your model named City, then "row.CityId" has no value.
    • In addition, you need to modify your js code so that distric can be successfully changed after changing the state for the first time.

    Model

        public class CountryStateViewModel
        {
    
            public int StateId { get; set; }
            public int CityId { get; set; }
            public int DistricId { get; set; }
        }
        public class State
        {
            public int ID { get; set; }
            public string StateName { get; set; }
        }
        public class City
        {
            public int ID { get; set; }
            public string CityName { get; set; }
            public int StateId { get; set; }
        }
        public class Distric
        {
            public int ID { get; set; }
            public string DistricName { get; set; }
            public int CityId { get; set; }
        }

    View

    <script>
    $(document).ready(function () {
        $("#StateId").change(function () {
            $.get("@Url.Action("GetCityList")", { StateId: $("#StateId").val() }, function (data) {
                $("#CityId").empty();
                console.log(data)
                $.each(data, function (index, row) {
                    $("#CityId").append("<option value='" + row.ID + "'>" + row.CityName + "</option>")
                });
                changeDistric();
            });
        });
        $("#CityId").change(function () {
            changeDistric();
        });
        function changeDistric() {
            $.get("@Url.Action("GetDistricList")", { CityId: $("#CityId").val() }, function (data) {
                $("#DistricId").empty();
                $.each(data, function (index, row) {
                    $("#DistricId").append("<option value='" + row.ID + "'>" + row.DistricName + "</option>")
                });
            });
        }
    });
    </script>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2020 2:36 AM
  • User1661386615 posted

    Thanks alot YihuiSun for your support problem is solved

    Monday, August 10, 2020 4:20 AM