В mvc4 я использую выпадающий список, но он не работает

---

<pre>

This is my controller
public class HomeController : Controller
    {
        dropdownEntities db = new dropdownEntities();
        public ActionResult Index()
        {
            ViewBag.Country = new SelectList(db.CountryDetails, "CountryId", "CountryName");
            return View();
        }

        
        public JsonResult GetState(string id)
        {
            List<SelectListItem> states = new List<SelectListItem>();
            var stateList = this.Getstatevalue(Convert.ToInt32(id));
            var stateData = stateList.Select(m => new SelectListItem()
          //  SelectList new StateDetails
            {
                Text = m.StateName,
                Value = m.StateId.ToString(),
            });
            return Json(stateData, JsonRequestBehavior.AllowGet);
        }

        public List<StateDetail> Getstatevalue(int CountryId)
        {
            //Database1Entities db = new Database1Entities();

            return db.StateDetails.Where(m => m.StateId == CountryId).ToList();
        }
    
        public JsonResult GetCity(string id)
        {
            List<SelectListItem> cities = new List<SelectListItem>();
            var cityList = this.Getcityvalue(Convert.ToInt32(id));
            var cityData = cityList.Select(m => new SelectListItem()
            {
                Text = m.CityName,
                Value = m.CityId.ToString(),
            });
            return Json(cityData, JsonRequestBehavior.AllowGet);
        }
        public List<CityDetail> Getcityvalue(int StateId)
        {
            //Database1Entities db = new Database1Entities();

            return db.CityDetails.Where(m => m.CityId == StateId).ToList();
        }
    

        }

    }

это мой показатель.Смотреть

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmployeeData</legend>

        <div class="editor-label">
            @Html.Label("Country")<br />
        </div>

        <div>
            @Html.DropDownList("Country", ViewBag.Country as SelectList, "-- Please Select a Country  --", new { style = "width:150px", @id = "Country" })
        </div>
        <div class="editor-label">
            <br />
            @Html.Label("State")<br />
        </div>
        <div>
            @Html.DropDownList("State", new SelectList(string.Empty, "Value", "Text"), "-- Please select a State --",
                        new { style = "width:150px", @id ="State" })
        </div>

        <div class="editor-label">
            <br />
            @Html.Label("City")<br />
        </div>
        <div>
            @Html.DropDownList("City", new SelectList(string.Empty, "Value", "Text"), "-- Please select a city --",
                        new { style = "width:150px", @id = "City" })
        </div>

        <p>
            <input type="button" onclick="ddlInsert()" value="Submit" />
        </p>
    </fieldset>
}

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        // this is Country Dropdown Selectedchange event
        $("#Country").change(function () {
            $("#State").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("Getstate")', // here we are Calling json method
                dataType: 'json',
                data: { id: $("#Country").val() },
                // Get Selected Country ID.

                success: function (States) {
                    $.each(States, function (i, state) {
                        $("#State").append('<option value="' + State.Value + '">' +
                             State.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert(' states retrieving fail.' + ex);
                }
            });
            return false;
        })

        $("#State").change(function () {
            $("#City").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCity")', // here we are Calling json method
                dataType: 'json',
                data: { id: $("#State").val() },
                // Get Selected Country ID.

                success: function (cities) {
                    $.each(cities, function (i, city) {
                        $("#City").append('<option value="' + City.Value + '">' +
                             City.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert(' city retrieving fail.' + ex);
                }
            });
            return false;
        })
    });
</script>

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

В контроллере я вызываю данные из базы данных и извлекаю их в скрипт и json, но они не работают и в index. view

пожалуйста, проверьте это, и если я выберу страну, она будет отображаться в выпадающем списке, но в штате и городе она не будет отображаться

---