Question

我用c＃语言编写了asp.net mvc应用程序。我想开发这样的场景，我的页面将有4个下拉控件。在第一个，第二个项目的选择应该加载，在2'的选择，3'rd下拉应该加载它项目。第4个独立的地方。但是在第4个下拉列表中我想改变UI设计。我必须在这里使用什么策略？我如何在这里实现这个场景。？

编辑： 控制器 - ＆GT;动作

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

        }

我能够调试这个但不能获取数据。

脚本：

 <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>

Answer 1

你可以与AJAX级联：

型号：

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; }
}

控制器：

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);
    }
}

查看：

<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" />
<% } %>

asp.net mvc 2中的下拉列表

1 个答案: