world countres list with cities

Question

is there any solution to show user all countries and after select country it reselect all cities of its country? be best with script selecting

p.s. russian name of countries

Answer 1

If you just need a one-time list (and not something that's continuously updated), then manually scraping the Russian Wikipedia page for list of countries isn't too bad. Could do something similar with a list of cities as well, but trying to get a complete list of cities is somewhat foolhardy. I'd try and limit it to the top 200 in the world or so.

Note: I just assume that's the page for list of countries because I speak no Russian but that's the first result I got when I searched for it.

Answer 2

Sure, there's a solution. You could have Country and City models with Id and Name properties:

public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
}

And an action that would give you all cities in a country:

public class CountriesController : Controller
{
    public ActionResult Index()
    {
        IEnumerable<Country> countries = Repository.GetCountries();
        return View(countries);
    }
}

public class CitiesController: Controller
{
    public ActionResult Index(string countryId)
    {
        IEnumerable<City> cities = Repository.GetCities(countryId);
        return Json(cities);
    }
}

And have a view similar to this:

<%= Html.DropDownList("selectedCountry", new SelectList(Model, "Id", "Name")) %>
<%= Html.DropDownList("selectedCity", Enumerable.Empty<City>()) %>

Then setup javascript:

$(function() {
    $('#selectedCountry').change(function() {
        var selectedCountry = $(this).val();
        $.getJSON('/cities/index', { countryId: selectedCountry }, function(cities) {
            var citiesSelect = $('#selectedCity');
            citiesSelect.empty();
            $(json).each(function(i, city) {
                citiesSelect.append('<option value="' + city.Id + '">' + city.Name + '</option>');
            });
        });
    });
});