Getting undefined in Cascading DropDownList In ASP.Core MVC ?

[Lost User]

In the first DropdownList should display the Countries and in the second should display Cities based on the Country like .. USA then display just cities in USA . well i am getting undefined in dropdown city the Question is why i am getting always undefined in City dropDown list ?

here is countrol :

public ActionResult Index()
{
Details();
return View();
}

    public void Details (
    {
        var model = db.GetUniversities().ToList();
        List li = new List();
        li.Add(new SelectListItem { Text = "Please select Country",Value="0"});
        foreach (var item in model)
        {
            li.Add(new SelectListItem { Text = item.Country, Value = item.Id.ToString()});
            ViewBag.state = li;
        }
    }
    \[HttpPost\]
    public JsonResult GetCity (int id)
    {
        var ddlCity = db.GetUniversities().Where(x => x.Id == id).ToList();
        List licities = new List();

        //licities.Add(new SelectListItem { Text = "--Select City--", Value = "0" });

        if (ddlCity != null)
        {
            foreach (var x in ddlCity)
            {
                licities.Add(new SelectListItem { Text = x.City, Value = x.Id.ToString() });
            }
        }
        return Json(new SelectList(licities, "Text", "Value"));

    }

here view

@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })


    @Html.DropDownListFor(model => model.Country, ViewBag.state as List, new { style = "width: 200px;" })

    @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })


@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })


    @Html.DropDownListFor(model => model.City, new SelectList(string.Empty, "Value", "Text"), "--Select City--", new { style = "width:200px" })

    @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })

here jQuery

$(document).ready(function () {

    $("#Country").change(function () {
        $("#City").empty();
        $.ajax({
            type: 'POST',

[Vincent Maverick Durano]

You may have to set an ID attribute to your DropDownListFor control so you can reference them in your jQuery code. For example:

@Html.DropDownListFor(model => model.Country, ViewBag.state as List, { @id="ddlCountry", @class="YourCSSClassName" })

then in your jQuery, you can access it like this:

$("#ddlCountry").change(function () {

});

[Lost User]

i am still getting the same error .. where should i exactly write the id .. could you more explain please i thank you very much in advanced

[Vincent Maverick Durano]

You need to give ID's to all your controls that you reference in your jQuery and then use the IDs just like what I demonstrated. If you followed that and you are still getting error, then post your updated code here and show us which line you are getting the error.

[Lost User]

Hi Vincent, so i am still getting the same problem thus let me show you what i have changed . i did what you have told me . could you check once again and in SQL there are some Countries and Cities like USA -> Bosten , Germany -> Frankfurt etc.... the View :

@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })


    @Html.DropDownListFor(model => model.Country, ViewBag.state as List
, new {@id ="ddlCountry", @class = "form-control" })

@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })


    @Html.DropDownListFor(model => model.City, new SelectList(string.Empty, "Value", "Text"), "--Select City--", 
   new {@id ="ddlCity", @class = "form-control" })

The jQuery :

$(document).ready(function () {

    $("#ddlCountry").change(function () {
        $("#ddlCity").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetCity")',
            dataType: 'json',
            data: { id: $("#ddlCountry").val() },
            success: function (city) {

                $.each(city, function (i, city) {
                    $("#ddlCity").append(''+ city.Text + '');

                });
            },
            error: function (ex) {
                alert('Failed.' + ex);
            }
        });
        return false;
    })
});

and with Controls haven't changed :

public void Details ()
{
var model = db.GetUniversities().ToList();
List li = new List();
li.Add(new SelectListItem { Text = "Please select Country",Value="0"});
foreach (var item in model)
{
li.Add(new SelectListItem { Text = item.Country, Value = item.Id.ToString()});
ViewBag.state = li;
}
}
[HttpPost]
public JsonResult GetCity (int id)
{
var ddlCity = db.GetUniversities().Where(x => x.Id == id).ToList();
List licities = new List();

        licities.Add(new SelectListItem { Text = "--Select City--", Value = "0" });

        if (ddlCity != null)

[Vincent Maverick Durano]

What error are you getting now? Still undefined? Please be specific also for the errors that you are currently getting.

[Lost User]

it's fine now . i have got it . i thank you a lot

[Vincent Maverick Durano]

That's great! Glad to be of help! :)