dropdowns in asp.net mvc 2

I have asp.net mvc application in c# language. I want to develop the scenario like, my page will have have the 4 dropdown controls. on the selection of first , second's item should be load, on selction of 2'nd, 3'rd dropdown should be load it item. where as 4'th is independent. but on 4'th dropdown I want to change the UI design. what strategy I have to use here? how can i implement this scenario here.?

Edited: Controller->action

 [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult GetSubjects(int standardId)
        {
            List<Subject> subjectList = basicEntityManager.GetSubjects(standardId);
            JsonResult result=Json(subjectList, JsonRequestBehavior.AllowGet);
            return result;

        } 

i am able to debug this but not fetching data.

Script:

 <script type="text/javascript">

        $(function() {
            $('#StandardId').change
            (function() {
                  var url='/Test/GetSubjects';
                  fetchItems(url, { standardId: $(this).val() }, $('#SubjectId')
            );

            /* $('#SubjectId').change(function() {
            fetchItems(
            '/Test/GetChapters',
            {
            selectedItem1: $('#SubjectId').val(),
            selectedItem2: $(this).val()
            },
            $('#SelectedItem3')
            );
            });*/

        });
        });


        function fetchItems(url, data, ddl) {
            $.getJSON(url, data, function(items) {
            alert(items);
                $.each(items, function() {

                    ddl.append
                        (
                            $('<option/>').val(this.Value).text(this.Text)
                        );
                });
            });
        }

开发者_开发百科
        function OnStandardChange() {
            var standard = document.getElementById("StandardId");
            var subject = document.getElementById("SubjectId");
            var ActionUrl = "/Test/GetSubjects/"
            alert("Hi");
            // $.getJSON('/Test/GetSubjects', { standardId: standard.val() }, function(data) { });




        }
        $('#StandardId').change(function() {

        });

        function OnSubjectChange() {

        }

        function OnChapterChange() {

        }
        function addOption(selectbox, text, value) {
            var optn = document.createElement("OPTION");
            optn.text = text;
            optn.value = value;
            selectbox.options.add(optn);
        }




    </script>

You could cascade with AJAX:

Model:

public class MyViewModel
{
    public string SelectedItem1 { get; set; }
    public IEnumerable<SelectListItem> Items1 { get; set; }
    public string SelectedItem2 { get; set; }
    public string SelectedItem3 { get; set; }
    public string SelectedItem4 { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // Load initial data
            Items1 = Enumerable.Range(1, 5).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = "item " + x
            })
        };
        return View(model);
    }

    public ActionResult Items2(string selectedItem1)
    {
        // invoked to populate the second DDL
        return Json(
            Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }),
            JsonRequestBehavior.AllowGet
        );
    }

    public ActionResult Items3(string selectedItem1, string selectedItem2)
    {
        // invoked to populate the third DDL
        return Json(
            Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }),
            JsonRequestBehavior.AllowGet
        );
    }

    public ActionResult Items4(string selectedItem1, string selectedItem2, string selectedItem3)
    {
        // invoked to populate the fourth DDL
        return Json(
            Enumerable.Range(1, 3).Select(x => new { Value = x, Text = x }),
            JsonRequestBehavior.AllowGet
        );
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

View:

<script type="text/javascript">
    $(function () {
        $('#SelectedItem1').change(function () {
            fetchItems(
                '<%= Url.Action("items2") %>', 
                { 
                    selectedItem1: $(this).val() 
                }, 
                $('#SelectedItem2')
            );
        });

        $('#SelectedItem2').change(function () {
            fetchItems(
                '<%= Url.Action("items3") %>', 
                { 
                    selectedItem1: $('#SelectedItem1').val(), 
                    selectedItem2: $(this).val() 
                }, 
                $('#SelectedItem3')
            );
        });

        $('#SelectedItem3').change(function () {
            fetchItems(
                '<%= Url.Action("items4") %>', 
                { 
                    selectedItem1: $('#SelectedItem1').val(), 
                    selectedItem2: $('#SelectedItem2').val(), 
                    selectedItem3: $(this).val() 
                }, 
                $('#SelectedItem4')
            );
        });

        $('#SelectedItem4').change(function () {
            alert('changing UI');
        });
    });

    function fetchItems(url, data, ddl) {
        $.getJSON(url, data, function (items) {
            $.each(items, function () {
                ddl.append(
                    $('<option/>').val(this.Value).text(this.Text)
                );
            });
        });
    }
</script>

<% using (Html.BeginForm()) { %>
    <%= Html.DropDownListFor(x => x.SelectedItem1, new SelectList(Model.Items1, "Value", "Text"))
    <%= Html.DropDownListFor(x => x.SelectedItem2, Enumerable.Empty<SelectListItem>()) %>
    <%= Html.DropDownListFor(x => x.SelectedItem3, Enumerable.Empty<SelectListItem>()) %>
    <%= Html.DropDownListFor(x => x.SelectedItem4, Enumerable.Empty<SelectListItem>()) %>

    <input type="submit" value="OK" />
<% } %>