drop down list refresh in razor

Question

I have a drop down list which represent states and according to selected state, I need to refresh City drop down list which represent the cities in the selected state. How can I refresh the city drop down ?

Here is my code :

 public class AccountController : Controller
        {
    public static List<SelectListItem> StateListItem()
            {
                var stateList = new List<SeraydarBL.Accounts.State>();
                var selectListItems = new List<SelectListItem>();
                stateList = SeraydarBL.Accounts.SelectStates();
                foreach (var state in stateList)
                {
                    var selectListItem = new SelectListItem();
                    selectListItem.Text = state.name;
                    selectListItem.Value = state.id.ToString();
                    selectListItems.Add(selectListItem);
                }
                return selectListItems;
            }

}

here is the razor :

    @using (Html.BeginForm())
    {
        <fieldset>
            <legend>Registration Form</legend>
            <ol>
                <li>
        //-------------------------------------------------------
        var stateList = new List<SelectListItem>();
        stateList = AccountController.StateListItem();
                    }


                    @Html.LabelFor(model => model.StateId)
                    @Html.DropDownListFor(model => model.StateId, stateList, " Select your State ...")
                    @Html.ValidationMessageFor(m => m.StateId)

                    @*HERE MUST BE THE DROP DOWN LIST OF CITIES*@


                </li>
            </ol>
            <input type="submit" value="Register" />
        </fieldset>


    <script>
        $('#StateId').change(function () {

        });

    </script>
}

Answer 1

You can achieve this using jquery ajax call.

 <script type="text/javascript">
    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#StateId").change(function () {
            $("#CityId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCity")', 
                dataType: 'json',
                data: { id: $("#StateId").val() },
                success: function (cities) {
                    $.each(cities, function (i, city) {
                        $("#CityId").append('<option value="' + city.Value + '">' +``});
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        })
    });
</script>

refer few articles

http://www.codeproject.com/Articles/730953/Cascading-Dropdown-List-With-MVC-LINQ-to-SQL-and-A http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/