Cascading dropdownlist using Jquery in MVC

Hii guys it's little difficult to do code for cascading dropdwon in asp.net mvc. In asp.net web forms We have a directly event of asp.net control. While in mvc we have html control and there is no event. So What we have to do we have to use Jquery event for this and make ajax call to our server side code and then bind the dropdown. Here below explain how to achieve this. First of all we have to import jquery so we can use jquery functions like we importing namespace in our C# code.

Here below is Jquery functions required to bind the dropdown list. Let me explain how these functions are working.
$('#Country').change this is jquery dropdown change event whatever code you write inside this it will run when country dropdown index is changed. Inside this event i am calling function GetState($(this).val())
In Getstate function i am calling one ajax method and calling action result "GetState" which is my C# code is written in controller named nik.
As you can see in action result i have argument name countryid so i can pass from here like this way data: { 'Countryid': Countryid }
Now with this country id i will return states in json format of the passed coutryid.
I also get city of selected state same way here is change event for state dropdwon $('#State').change

Here below is code you can see is that simple html code. But something strange you can find like VIEWBAG. View bag helps to maintain data when you move from controller to view. So here using view bag i am binding country dropdown. You can see in action result DropDown i am setting value of ViewBag. ViewBag.Country = items;

<%-- Here is dropdowns --%>
@{
    ViewBag.Title = "DropDown";
}

    DropDown

    


        
Country :
        
        
@Html.DropDownList("Country", (IEnumerable)ViewBag.Country, htmlAttributes: new { id = "Country"})
        
    

        
State :
        
        

        
    

        
City :
        
        

        
    

Here below you guys can see it is controller code. There are 3 different action result Dropdown,GetState,GetCity.
Let me explain when these all will fired.
1.Dropdwon :- This will fire when my page is load first time or when page is postback again.
2.GetState :- As i explain above it will fired by ajax method which i write in GetState(Countryid) jquery function.
3.GetCity :- Same as "GetState" it will fired by ajax method which i write in GetCity(Stateid) jquery function.

'Here is controller code

namespace MvcApplication1.Controllers
{
    public class NikController : Controller
    {
        public ActionResult DropDown()
        {       
            List items = new List();
                items.Add(new SelectListItem { Text = "---Select Country---", Value = "0", Selected = true });
                items.Add(new SelectListItem { Text = "India", Value = "1",Selected= true  });
                items.Add(new SelectListItem { Text = "USA", Value = "2" });
                items.Add(new SelectListItem { Text = "Russia", Value = "3"});
                items.Add(new SelectListItem { Text = "South Africa", Value = "4" });
                ViewBag.Country = items;            
                return View(); 
        }


        public ActionResult GetState(int Countryid)
        {
            List States = new List();

            if (Countryid==1)
            {
                States.Add(new SelectListItem { Text = "Gujarat", Value = "1", Selected = true });
                States.Add(new SelectListItem { Text = "Maharashtra", Value = "2"});
                States.Add(new SelectListItem { Text = "Rajsthan", Value = "3"});
                States.Add(new SelectListItem { Text = "Punjab", Value = "4"});
                States.Add(new SelectListItem { Text = "MP", Value = "5" });
                States.Add(new SelectListItem { Text = "Keral", Value = "6" });
                States.Add(new SelectListItem { Text = "Karnatak", Value = "7"});
                States.Add(new SelectListItem { Text = "Jammu", Value = "8"});
                States.Add(new SelectListItem { Text = "Assam", Value = "9"});
                States.Add(new SelectListItem { Text = "AP", Value = "10"});
            }                                                                                                    
            else if(Countryid ==2)
            {
                States.Add(new SelectListItem { Text = "Alabama", Value = "11", Selected = true });
                States.Add(new SelectListItem { Text = "Alaska", Value = "12"});
                States.Add(new SelectListItem { Text = "Arizona", Value = "13"});
                States.Add(new SelectListItem { Text = "Arkansas", Value = "14"});
                States.Add(new SelectListItem { Text = "California", Value = "15"});
                States.Add(new SelectListItem { Text = "Colorado", Value = "16"});
                States.Add(new SelectListItem { Text = "Connecticut", Value = "17"});
                States.Add(new SelectListItem { Text = "Delaware", Value = "18"});
                States.Add(new SelectListItem { Text = "Florida", Value = "19" });
                States.Add(new SelectListItem { Text = "Georgia", Value = "20"});
            }

            return Json(States);
        }


        public ActionResult GetCity(int Stateid)
        {
            List City = new List();

            if (Stateid == 1)
            {
       City.Add(new SelectListItem { Text = "Ahmedabad", Value = "1", Selected = true });
                City.Add(new SelectListItem { Text = "Surat", Value = "2" });
                City.Add(new SelectListItem { Text = "Baroda", Value = "3" });
                City.Add(new SelectListItem { Text = "Rajkot", Value = "4" });
                City.Add(new SelectListItem { Text = "Jamnagar", Value = "5" });
                City.Add(new SelectListItem { Text = "Junagadh", Value = "6" });
                City.Add(new SelectListItem { Text = "Jetpur", Value = "7" });
                City.Add(new SelectListItem { Text = "Bharuch", Value = "8" });
                City.Add(new SelectListItem { Text = "Limabi", Value = "9" });
                City.Add(new SelectListItem { Text = "Vapi", Value = "10" });
            }
            return Json(City);
        } 
    }
}

Here it is how it look likes.