遇到了这样的一个需求:通过勾选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. 在ASP.NET MVC中实现Select多选

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

  2. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  3. ASP.NET MVC中商品模块小样

    在前面的几篇文章中,已经在控制台和界面实现了属性值的笛卡尔乘积,这是商品模块中的一个难点.本篇就来实现在ASP.NET MVC4下商品模块的一个小样.与本篇相关的文章包括: 1.ASP.NET MVC ...

  4. ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积02, 在界面实现

    在"ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现"中,在控制台应用程序中实现了属性值的笛卡尔乘积.本篇在界面中实现.需要实现的大致如下: 在界面 ...

  5. ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现

    在电商产品模块中必经的一个环节是:当选择某一个产品类别,动态生成该类别下的所有属性和属性项,这些属性项有些是以DropDownList的形式存在,有些是以CheckBoxList的形式存在.接着,把C ...

  6. 再议ASP.NET MVC中CheckBoxList的验证

    在ASP.NET MVC 4中谈到CheckBoxList,经常是与CheckBoxList的显示以及验证有关.我在"MVC扩展生成CheckBoxList并水平排列"中通过扩展H ...

  7. 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]

    在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...

  8. 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)

    在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...

  9. [摘]在ASP.NET MVC中使用DropDownList

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

随机推荐

  1. screen命令记录

    1.screen -x 进入 2.ctrl+a+n 下一个 3.ctrl+a+p 上一个任务 4.ctrl+a+d 退出 5.ctrl+c 结束任务 其他 screen -ls 所有任务 screen ...

  2. oracle数据库_实例_用户_表空间之间的关系

    基础概念:Oracle数据库.实例.用户.表空间.表之间的关系 数据库:Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实Oracle数据库的 ...

  3. 解决Python3 pip list 红色DEPRECATION

    解决Python3 pip list 红色DEPRECATION 打开文件扩展名和隐藏的项目 找到ProgramData,在该目录下创建pip文件夹,在pip里面创建pip.ini  在pip.ini ...

  4. Qt编程之悲惨世界

    最近需要给人写点基于QtWebkit的代码,算是领教了Qt编程的痛苦之处. QNetworkConfigurationManager::isOnline() 只有在编译平台上能运行,拷贝到其他Wind ...

  5. hdu 1232 变成生成树至少还要加几条边 (并查集模板题)

    求一个图 变成生成树至少还要加几条边(成环的边要删掉,但不用统计) Sample Input4 2 //n m1 3//u v4 33 31 21 32 35 21 23 5999 00 Sample ...

  6. PHP 与redis 操作添加处理投票

    <?php header("Content-Type:text/html;charset=utf-8"); include 'lib/mysql.class.php'; $m ...

  7. 【PAT】1060 Are They Equal (25)(25 分)

    1060 Are They Equal (25)(25 分) If a machine can save only 3 significant digits, the float numbers 12 ...

  8. 026.Zabbix简单调优

    一 调优相关对应项 Zabbix busy trapper processes, in % StartTrappers=5 Zabbix busy poller processes, in % Sta ...

  9. Python3 kmeans 聚类算法

    # -*- coding: utf-8 -*- """ Created on Wed Jan 10 19:18:56 2018 @author: markli " ...

  10. 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html

    写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...