Second DDL not firing - asp.net-mvc

Question

good day, why my second DDL do not fire when I select the Parent dropdown list.
Also can anyone elaborate the script and the [ 0] in the View beside m=>m.StateModel
And for the last question, how can I make this DDL dynamic, How can I populate it using database data?
Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Kaskid.Models
{
public class State
{
public int Id { get; set; }
public string StateName { get; set; }
}
public class City
{
public int Id { get; set; }
public int StateId { get; set; }
public string CityName { get; set; }
}
public class CountryModel
{
public List<State> StateModel { get; set; }
public SelectList FilteredCity { get; set; }
}
}
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kaskid.Models;
namespace Kaskid.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
CountryModel objCountryModel = new CountryModel();
objCountryModel.StateModel = new List<State>();
objCountryModel.StateModel = GetAllState();
return View(objCountryModel);
}
[HttpPost]
public ActionResult GetCityByStateId(int stateId)
{
List<City> objCity = new List<City>();
objCity = GetAllcity().Where(m => m.StateId == stateId).ToList();
SelectList obgcity = new SelectList(objCity, "Id", "CityName", 0);
return Json(obgcity);
}
public List<State> GetAllState()
{
List<State> objState = new List<State>();
objState.Add(new State {Id = 0,StateName="Select State"});
objState.Add(new State {Id = 1,StateName = "State 1"});
objState.Add(new State {Id = 2, StateName="State 2"});
objState.Add(new State {Id = 3, StateName="State 3"});
return objState;
}
public List<City> GetAllcity()
{
List<City> objCity = new List<City>();
objCity.Add(new City{Id = 1,StateId = 1, CityName = "City1-1" });
objCity.Add(new City{Id = 2,StateId=2,CityName = "City2-1"});
objCity.Add(new City{Id = 3,StateId=4,CityName="City4-1"});
objCity.Add(new City{Id = 4,StateId=1,CityName="City1-2"});
return objCity;
}
}
}
View
#model Kaskid.Models.CountryModel
#{
ViewBag.Title = "Index";
}
<script language="javascript">
function GetCity(_stateId) {
var procemessage = "<option value='0'> Please wait...</option>";
$('#ddlcity').html(procemessage).show();
var url = "/Home/GetCityByStaeId/";
$.ajax({
url: url,
data: { stateid: _stateId },
cache: false,
type: "POST",
success: function (data) {
var markup = "<option value='0'>Select City</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$('#ddlcity').html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
</script>
<h4>
MVC3 Cascading Dropdown List Using Jquery</h4>
#using (Html.BeginForm("", ""))
{
#Html.DropDownListFor(m => m.StateModel[0].Id, new SelectList(Model.StateModel, "Id", "StateName"), new { #id = "ddlstate", #style = "width:200px;", #onchange = "javascript:GetCity(this.value);" })
<br />
<br />
<select id="ddlcity" name="ddlcity" style="width: 200px">
</select>
}

Answer 1

You've got a typo:
var url = "/Home/GetCityByStaeId/";
But your controller action is called GetCityByStateId and not GetCityByStaeId. Also you may take a look at a similar example I once wrote where you could take some ideas about improving your code.