遇到了这样的一个需求:通过勾选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. 初步认识mitmproxy(一)

    在windows机器上,经常用的最多的是fiddler工具,很强大,图形化界面,使用方便.简单:在mac上,Charles 类似fiddler工具,同样是易于操作的图形化界面,同样都是通过代理的方式实 ...

  2. Casper带有4个内建记录级别

    默认情况下,CasperJS会在‘error’级别过滤日志.所以如果你开始记录日志后没有看到任何东西,可能就是这个原因.为确保显示日志输出,我把它设置为‘debug’.而且我关闭了‘verbose’选 ...

  3. ORACLE数据库数据文件转移方法(不同于move方法)

    1) 手动拷贝要转移的数据数据文件'd:\OracleData\GWTABLE42.DBF'到新的位置'E:\OracleData\GWTABLE42.DBF'. 2) 把数据文件所属的表空间Offl ...

  4. KDevelop调试NS2

    1.将NS2项目导入到KDevelop 具体操作步骤:打开Kdevelop,首先,选择"Project"->"Open/Import Project".然 ...

  5. Codeforces 291 E Tree-String Problem AC自动机

    Tree-String Problem 网上的dfs + kmp 复杂度就是错的, 除非算出根据下一个字符直接转移Next数组直接转移, 而求出Next[ i ][ 26 ]数组和丢进AC自动机里面没 ...

  6. Channel Allocation HDU1373

    染色问题:相邻不能染同一种颜色 最少需要的颜色的数量=最大团点的数量 #include<bits/stdc++.h> using namespace std; #define N 27 i ...

  7. Linux常用包的安装

    下面列出的这些包都有很强大的功能,也是非常实用常用的工具 gcc yum -y install gcc GNU编译器套件(GNU Compiler Collection) gcc-c++ yum -y ...

  8. (转载)ACM训练计划,先过一遍基础再按此拼搏吧!!!!

    ACM大量习题题库 ACM大量习题题库 现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库. USACO ht ...

  9. Python3 kmeans 聚类算法

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

  10. [转]C++中vector使用详细说明

    一.向量的介绍    向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器. 与string相同, vector 同属于STL(Standard Template ...