Sir I get a error in dropdownbox please check it in ASP.NET with mvc4

See more:

MVC4

This is Controler

public class HomeController : Controller
    {
        dropdownEntities db = new dropdownEntities();
        public ActionResult Index()
        {
            List<SelectListItem> StateName = new List<SelectListItem>();
            Student stumodel = new Student();
            List<StateDetail> states = db.StateDetails.ToList();
            states.ForEach(x =>
            {
                StateName.Add(new SelectListItem { Text = x.StateName, Value = x.StateId.ToString() });
            });
            stumodel.StateName = StateName;
            return View(stumodel);
        }
        [HttpPost]
        public ActionResult GetCity(string StatId)
        {
            int StateId;
            List<SelectListItem> CityName = new List<SelectListItem>();
            if (!string.IsNullOrEmpty(StatId))
            {
                StateId = Convert.ToInt32(StatId);
                List<CityDetail> CityNames = db.CityDetails.Where(x => x.StateId == StateId).ToList();
                CityNames.ForEach(x =>
                {
                    CityName.Add(new SelectListItem { Text = x.CityName, Value = x.CityId.ToString() });
                });
            }
            return Json(CityName, JsonRequestBehavior.AllowGet);
        }

    }
}

This is my Index>view

@model retrive2.Models.Student
@{
    ViewBag.Title = "Index";
}

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<h2 class="text-center">DropDownList</h2>
<div class="container" style="width:50%;margin:0 auto;">
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
                <tr class="success">
                    <th class="text-center">State</th>
                    <th class="text-center">City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.DropDownListFor(x => x.StateName, Model.StateName, "--Select--", new { @class = "form-control", @id = "ddlState" })</td>
                    <td>@Html.DropDownListFor(x => x.CityName, new List<SelectListItem>() , "--Select--", new { @class = "form-control", @id = "ddlCity" }) </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ddlState').change(function () {
            $.ajax({
                type: "post",
                url: "/Home/GetCity",
                data: { StateId: $('#ddlState').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var City = "<select id='ddlCity'>";
                    City = City + '<option value="">--Select--</option>';
                    for (var i = 0; i < data.length; i++) {
                        City = City + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    City = City + '</select>';
                    $('#City').html(City);
                }
            });
        });
    });
</script>

What I have tried:

Sir in this controller i fetch the data from database and i display on view but in web site only showing state dropdown only not a city please check i hope some give the asnwer