在ASP.NET MVC中通过勾选checkbox来更改select的内容

遇到了这样的一个需求：通过勾选checkbox来更改select的内容。

 

在没有勾选checkbox之前是这样的：

 

在勾选checkbox之后是这样的：

 

想通过ajax异步来实现。所以，从控制器拿到的json数据，在控制器中应该先是Dictionary<string, string>类型，然后再转换成json格式。

 

在没有勾选checkbox之前，select中内容对应的Model为：

    public class Old

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

 

在勾选checkbox之后，select中内容对应的Model为：

    public class NewItem

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }   

 

 

Home控制器中应该给出对应的json数据。

   public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult GetOld()

        {

            var olds = new List<Old>

            {

                new Old(){Id = 1, Name = "老版本1"},

                new Old(){Id = 2, Name = "老版本2"},

                new Old(){Id = 3, Name = "老版本3"}

            };

            IDictionary<string, string> result = new Dictionary<string, string> {{"-1","None"}};

            foreach (var item in olds)

            {

                result.Add(item.Id.ToString(), item.Name);

            }

            return Json(result, JsonRequestBehavior.AllowGet);

        }

        public ActionResult GetNew()

        {

            var news = new List<NewItem>

            {

                new NewItem(){Id = 1, Name = "新版本1"},

                new NewItem(){Id = 2, Name = "新版本2"}

            };

            IDictionary<string, string> result = new Dictionary<string, string> { { "-1", "None" } };

            foreach (var item in news)

            {

                result.Add(item.Id.ToString(), item.Name);

            }

            return Json(result, JsonRequestBehavior.AllowGet);

        }

    }

 

在Home/Index.cshtml视图中，根据checkbox是否勾选来呈现不同的内容。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>

<div>

    <select id="v"></select>

</div>

<div>

    <span>是否选择新版本：</span><input type="checkbox" id="cn"/>

</div>

@section scripts

{

    <script type="text/javascript">

        $(function () {

            //初始获取老版本

            getOldOnes();

            //勾选checkbox事件

            $('#cn').on("change", function() {

                if ($(this).is(':checked')) {

                    getNewOnes();

                } else {

                    getOldOnes();

                }

            });

        });

        //获取老版本

        function getOldOnes() {

            $.getJSON('@Url.Action("GetOld","Home")', function(data) {

                var $s = $('#v');

                $s.children().remove();

                $.each(data, function(key, value) {

                    $s.append('<option value="' + key + '">' + value + "</option>");

                });

                $s.effect('shake', { times: 4 }, 100);

            });

        }

        //获取新版本

        function getNewOnes() {

            $.getJSON('@Url.Action("GetNew","Home")', function (data) {

                var $s = $('#v');

                $s.children().remove();

                $.each(data, function (key, value) {

                    $s.append('<option value="' + key + '">' + value + "</option>");

                });

                $s.effect('shake', { times: 4 }, 100);

            });

        }

    </script>

}