How to Implement Dependent Dropdownlist in MVC4 Razor

I need to implement dependent drop-down lists in MVC4+Razor View. I have 3 drop-down lists: Country, State and City. All are coming from the database. So, I want to populate the Country list from the database. When I select a country, in the second drop-down list I should get associated states based on that country. And finally, in the third drop-down list I should get cities based on the selected state. I am sharing the code I have prepared.

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace Employee_Mgmt_System.Models
{
public class EmployeeRegistration
{
    public List<string> country = new List<string>();
    public List<string> city = new List<string>();
    public List<string> state = new List<string>();

}

}

Controller

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Employee_Mgmt_System.Models;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;

    namespace Employee_Mgmt_System.Controllers
    {
        public class EmployeeRegistrationController : Controller
        {
    //
    // GET: /EmployeeRegistration/
    EmployeeRegistration Er = new EmployeeRegistration();
    public ActionResult EmployeeRegistration()
    {

        Er.getCountry();
        Er.getCity();
        Er.getState();
        ViewBag.countryddl = Er.country;
        ViewBag.cityddl = Er.city;
        ViewBag.stateddl = Er.state;
        return View(Er);
    }

    [HttpPost]
    public ActionResult Register(EmployeeRegistration empRegmodel)
    {
        if (ModelState.IsValid)
        {
            Er.registerEmpInfo(empRegmodel);
            return RedirectToAction("HomeScreen", "HomeScreen");
        }
        Er.getCountry();
        Er.getCity();
        Er.getState();
        ViewBag.countryddl = Er.country;
        ViewBag.cityddl = Er.city;
        ViewBag.stateddl = Er.state;
        return View("EmployeeRegistration");
            }

        }
    }

View

        @model Employee_Mgmt_System.Models.EmployeeRegistration
        @{
            ViewBag.Title = "EmployeeRegistration";
        }

        <body style="background-color:rgb(128,128,128)">
   
            @using (Html.BeginForm("Register", "EmployeeRegistration", FormMethod.Post))
            {
              @Html.ValidationSummary(true)
                <div style="color:red; text-align:center" >
                    <fieldset>
                        <legend>Validation Summary</legend>
                        @Html.ValidationMessageFor(m => m.Password)
                   <br />
                        @Html.ValidationMessageFor(m=>m.ConfirmPassword)
                        <br />
                        @Html.ValidationMessageFor(m=>m.EmailID)
                    </fieldset>
                </div>
               <br />
                <br />
          

                <div>
                  <table border="1" style=  "width:500px">
                           <tr>
                           <td style="width:200px">
                               @Html.LabelFor(m=>m.country)
                          </td>
                          <td>
                              @Html.DropDownListFor(m=>m.countryDDL, new SelectList(@ViewBag.CountryDDL),new {style="Width:300px"})
        @*                       @Html.DropDownListFor(m=>m.countryDDL, new SelectList(Model.country), new {style="Width:300px"})*@
                               </td>
                      </tr>
                       <tr>
                           <td style="width:200px">
                               @Html.LabelFor(m=>m.city)
                          </td>
                          <td style="width:300px">
                               @Html.DropDownListFor(m=>m.cityDDL, new SelectList(@ViewBag.CityDDL),new {style="Width:300px"})
                             @*  @Html.DropDownListFor(m=>m.cityDDL, new SelectList(Model.city), new  { style="Width:300px"})*@
                          </td>
                      </tr>
                       <tr>
                           <td style="width:200px">
                                @Html.LabelFor(m=>m.state)
                          </td>
                           <td style="width:300px">
                                @Html.DropDownListFor(m=>m.stateDDL, new SelectList(@ViewBag.StateDDL),new {style="Width:300px"})
                              @*  @Html.DropDownListFor(m=>m.stateDDL, new SelectList(Model.state), new  { style="Width:300px"})*@
                          </td>
                      </tr>
                  </table>
                  <input type="submit" value="Register Emp Information" style="text-align:center"/>
              </div>
   
            }

        </body>

Solution

This might help you. http://code.msdn.microsoft.com/Cascading-DropDownList-in-833683f9

Try to implement like example given in that tutorial.