better way to load 2 dropdown in mvc

Question

This is how i am loading on page load state and city dropdown:

My Controller method:

This is the first method which is calling when page is

Answer 1

Here's how I'd do it without the page refresh, assuming the list of cities isn't too long. I'm assuming you can create a GetStatesAndCities method to return a Dictionary.

public ActionResult Index()
{
  Dictionary> statesAndCities = GetStatesAndCities();
  ViewBag.StatesAndCities = Json(statesAndCities);
}

Then in the view:

var states = JSON.parse(@ViewBag.StatesAndCities);

function loadCities(obj) {
    var cities = states[$(obj).val()];
    var html = 'Select City';
    $(cities).each(function () {
        html += ''+this.Text+''
    });
    $("#ddlCity").html(html);
}

This way when the state is changed the cities field with update immediately with no need for callback.