Как связать каскадный выпадающий список с помощью модели в MVC razor.

---

Привет я очень новой для MVC . Я хочу привязать выпадающий список, используя данные модели .

1)Выпадающий Список Стран
2)Выпадающий Список Состояний
3)Выпадающий Список Городов


в первый раз данные в списке стран заполнены, а в выпадающем списке Штатов и городов данные установлены пустыми. но в случае изменения страны государственные данные не являются обязательными. Я послал код, который пытался. Пожалуйста, дайте решение.

Что я уже пробовал:

Модель-----

public class MyClass
{
    public int  Id  { get; set; }
    public string Name { get; set; }
    public string Email{ get; set; }
    public int  CountryId { get; set; }
    public int  StateId{ get; set; }
    public int  CityId { get; set; }
    public SelectList CountryList { get; set; }
    public SelectList CityList { get; set; }
    public SelectList StateList { get; set; }
}

------------Вид ------------------------

@model MyProject.models.MyClass

@Html.DropDownListFor(model =>
    model.CountryId, 
    new SelectList(Model.CountryList, "Value", "Text"),
    new 
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select",
        onchange="FillRegion();"
    })

@Html.DropDownListFor(model =>
    model.StateId,
    new SelectList(Model.CountryList, "Value", "Text"),
    new 
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select", onchange="FillRegion();"
    })

@Html.DropDownListFor(model =>
    model.CityId,
    new SelectList(Model.CountryList, "Value", "Text"),
    new
    {
        @id = "ddlCountry",
        @placeholder = "...",
        @Class = "chzn-select",
        onchange="FillRegion();"
    })

Код Контроллера-------------

public ActionResult AddCompanyBranch()
{
    MyClass model= new MyClass();
    SelectListItem selListItem = new SelectListItem() { Value = "0", Text = "--Select--" };
    List<selectlistitem> newList = new List<selectlistitem>();
    newList.Add(selListItem);
    model.CountryList = listCountry; // Get Country List from Data base
    model.StateList = new SelectList(newList, "Value", "Text", "0"); // set Empty Data first time
    model.CityList = new SelectList(newList, "Value", "Text", "0");  // set Empty Data first time
    return View(model); 
}

[HttpPost]
public JsonResult ddCountry_SelectedIndexChanged(string CountryId)
{
    return Json(bindState( CountryId));
}

[HttpPost]
public JsonResult ddlState_SelectedIndexChanged(string stateId)
{
    JsonResult result = null;
    if (stateId != "0")
        result = Json(bindCity(stateId));

    return result;
}

function FillState() {

    var Region = $('#ddlCountry').val();
    $.ajax({
        type: "POST",
        url: '@Url.Action("ddlCountry_SelectedIndexChanged", "Company")',
        data: { CountryId: Id},
        success: function (data) {
            $("#ddlState").empty();  
            var items = [];
            //items.push("<option>--Select--</option>");
            $.each(data, function () {
                items.push("<option value=" + this.Value + ">" + this.Text + "</option>");
            });
            $("#ddlState").html(items.join(' '));
        }
    });
}

function FillCity() {
    var stateId = $('#ddlState').val();
    $.ajax({
        type: "POST",
        url: '@Url.Action("ddlState_SelectedIndexChanged", "Company")',
        data: { stateId: stateId},
        success: function (data) {
            $("#ddlCity").empty();  
            var items = [];
            //items.push("<option>--Select--</option>");
            $.each(data, function () {
                items.push("<option value=" + this.Value + ">" + this.Text + "</option>");
            });
            $("#ddlCity").html(items.join(' '));
        }
    });
}

---