how to add data into a dropdown list?

Hi friends I want to develop a registration page int that page two fields 1.state 2.district(both are drop开发者_如何学Python down lists). now my question is how get data dynamically that is if select state field it will display all states available. for example there are three states 1.A 2.B 3.C each state contains 4 districts

state      district1   district1     district1   district1
A           AAA1        AAA2          AAA3         AAA4      
B           BBB1        BBB2          BBB3         BBB4
c           CCC1        CCC2          CCC3         CCC4

if I select state A it has to display only state a districts

pls tell me clearly how to do it in asp.net

---

As always you start by defining a view model:

public class MyViewModel
{
    [Required]
    [DisplayName("Select a state:")]
    public string SelectedState { get; set; }
    public IEnumerable<SelectListItem> States { get; set; }

    [Required]
    [DisplayName("Select a district:")]
    public string SelectedDistrict { get; set; }
    public IEnumerable<SelectListItem> Districts { get; set; }
}

then a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // TODO: load the states initially
            States = new[] { "A", "B", "C" }.Select(x => new SelectListItem
            {
                Value = x,
                Text = x
            }),
            // Initially we don't have districts
            Districts = Enumerable.Empty<SelectListItem>()
        };
        return View(model);
    }

    public ActionResult Districts(string state)
    {
        // TODO: given a state select its districts
        var districts = Enumerable
            .Range(1, 4)
            .Select(x => string.Format("district {0} of state {1}", x, state));
        return Json(districts, JsonRequestBehavior.AllowGet);
    }
}

then a view:

@model MyViewModel

<div>
    @Html.LabelFor(x => x.SelectedState)
    @Html.DropDownListFor(
        x => x.SelectedState, 
        Model.States, 
        "-- State --", 
        new { 
            id = "states", 
            data_url = Url.Action("districts") 
        }
    )
</div>

<div>
    @Html.LabelFor(x => x.SelectedDistrict)
    @Html.DropDownListFor(
        x => x.SelectedDistrict, 
        Model.Districts, 
        "-- District --", 
        new { id = "districts" }
    )
</div>

and finally some javascript to cascade the States dropdown:

$(function () {
    $('#states').change(function () {
        var url = $(this).data('url');
        var selectedState = $(this).val();
        $.get(url, { state: selectedState }, function (districts) {
            var districtsDdl = $('#districts');
            districtsDdl.empty();
            $.each(districts, function (index, district) {
                districtsDdl.append(
                    $('<option/>', {
                        value: district,
                        text: district
                    })
                );
            });
        });
    });
});