快捷導(dǎo)航

ASP.NET?MVC通過(guò)勾選checkbox更改select的內(nèi)容

更新時(shí)間：2022年09月16日 08:25:06 作者：Darren?Ji

這篇文章介紹了ASP.NET?MVC通過(guò)勾選checkbox更改select內(nèi)容的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

遇到了這樣的一個(gè)需求：通過(guò)勾選checkbox來(lái)更改select的內(nèi)容。

在沒(méi)有勾選checkbox之前是這樣的：

在勾選checkbox之后是這樣的：

想通過(guò)ajax異步來(lái)實(shí)現(xiàn)。所以，從控制器拿到的json數(shù)據(jù)，在控制器中應(yīng)該先是Dictionary<string, string>類(lèi)型，然后再轉(zhuǎn)換成json格式。

在沒(méi)有勾選checkbox之前，select中內(nèi)容對(duì)應(yīng)的Model為：

    public class Old
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

在勾選checkbox之后，select中內(nèi)容對(duì)應(yīng)的Model為：

    public class NewItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Home控制器中應(yīng)該給出對(duì)應(yīng)的json數(shù)據(jù)。

   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視圖中，根據(jù)checkbox是否勾選來(lái)呈現(xiàn)不同的內(nèi)容。

@{
    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>
}

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章: