遇到了这样的一个需求:通过勾选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>
}

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

  1. html 勾选框点击文字勾选,ztree点击文字勾选checkbox,radio实现方法

    ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...

  2. 在ASP.NET MVC中实现Select多选

    我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...

  3. 在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  4. ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  5. mvc html dropdownlist,ASP.NET MVC中使用DropDownList地详解

    DropDownList控件又称下拉列表框控件,DropDownList控件动态连接到数据库,按指定 条件从数据库 中查询 出列表选项数据,然后绑 定到控件,可以方便快速地显示出多个下拉选 项 . 同 ...

  6. 通过源代码研究ASP.NET MVC中的Controller和View(二)

    通过源代码研究ASP.NET MVC中的Controller和View(一) 在开始之前,先来温习下上一篇文章中的结论(推论): IView是所有HTML视图的抽象 ActionResult是Cont ...

  7. 在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证

    在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证 具体场景为:某一属性是否允许为null的验证,要根据另 ...

  8. ASP.NET MVC中你必须知道的13个扩展点

         ScottGu在其最新的博文中推荐了Simone Chiaretta的文章13 ASP.NET MVC extensibility points you have to know,该文章为我 ...

  9. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

  10. 在 ASP.NET MVC 中使用 Chart 控件

    在 .NET 3.5 的时候,微软就提供了一个 Chart 控件,网络上有大量的关于在 VS2008 中使用这个控件的文章,在 VS2010 中,这个控件已经被集成到 ASP.NET 4.0 中,可以 ...

最新文章

  1. 开源吞噬世界,得开发者得天下
  2. ​GPLinker:基于GlobalPointer的实体关系联合抽取
  3. 包装类型与包装类别_包装的重要性
  4. 第十二题:设int x=1,float y=2,则表达式x/y的值是:
  5. Mtk camera driver
  6. html如何在网页上看错误,HTML错误时,Spring MVC的,但不能查看网页时,静态
  7. Python 使用Schema 实现接口或方法的JSON格式参数的高效、优雅校验
  8. C/C++中字符串切割(split)
  9. notesDocument类的HTTP URL属性 和note URL属性的区别
  10. 极路由1S HC5661A 刷入不死u-boot(breed)加刷潘多拉固件教程
  11. 2022年,想自学java有没有一个详细的框架?
  12. Linux内核专题 - 介绍
  13. MFC小游戏之坦克大战
  14. dockerfile使用DEBIAN_FRONTEND
  15. 美国学生债务数据 csv_我如何摆脱学生债务陷阱,为什么其他美国人不那么幸运...
  16. SHOI 2008 仙人掌图 BZOJ 1023
  17. [SOC]clock与reset设计
  18. android studio 使用夜神模拟器
  19. Ubuntu系统Vscode安装以及配置C++环境(一条龙服务)
  20. 编程计算下面的分段函数: y=e​√​x​​​​​−1 (0<x<1) y=|x|+2 (3≤x≤4) y=sin(x​2​​) (当x取其他值时)

热门文章

  1. Atitit 常见面试问题回答法 原则与细则 目录 1.1. 1、工作多久了?为什么离职? 1 1.2. 、自我评价 1 1.3. 问你有什么缺点 2 1.4. 4、理想薪资 2 1.5. 职业规
  2. Atitit 技术领域之道 技术领域的艺术attilax著 v2 s66.docx Atitit 技术领域之道 attilax著 1. 分类 1 1.1. 按照架构 web cs桌面 1 1.2.
  3. Atitit 微服务之道 attilax著 1. 什么是微服务架构? 1 1.1. 、微服务与SOA的关系 :微服务架架构师面向服务架构(SOA)的一种特定实现 2 1.2. 微服务与康威定律 2 1
  4. paip.提升安全性----用户资金账户模块平账功能
  5. CTP: 接收心跳超时Bug
  6. 思科CEO自爆:G20虚拟会议用的我家技术
  7. 号外!德国惊现大罢工--要求每周上班28小时
  8. pyqt 子窗口控制主窗口绘图_PyQtGraph如何关闭绘图窗口/关闭所有绘图窗口?
  9. 【优化算法】水基湍流优化算法(TFWO) 【含Matlab源码 1585期】
  10. 【单目标优化求解】基于matlab被囊群算法(TSA)求解最优目标问题【含Matlab源码 1567期】