在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>}
在ASP.NET MVC中通过勾选checkbox来更改select的内容的更多相关文章
- 在ASP.NET MVC中实现Select多选
我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- ASP.NET MVC中商品模块小样
在前面的几篇文章中,已经在控制台和界面实现了属性值的笛卡尔乘积,这是商品模块中的一个难点.本篇就来实现在ASP.NET MVC4下商品模块的一个小样.与本篇相关的文章包括: 1.ASP.NET MVC ...
- ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积02, 在界面实现
在"ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现"中,在控制台应用程序中实现了属性值的笛卡尔乘积.本篇在界面中实现.需要实现的大致如下: 在界面 ...
- ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积01, 在控制台实现
在电商产品模块中必经的一个环节是:当选择某一个产品类别,动态生成该类别下的所有属性和属性项,这些属性项有些是以DropDownList的形式存在,有些是以CheckBoxList的形式存在.接着,把C ...
- 再议ASP.NET MVC中CheckBoxList的验证
在ASP.NET MVC 4中谈到CheckBoxList,经常是与CheckBoxList的显示以及验证有关.我在"MVC扩展生成CheckBoxList并水平排列"中通过扩展H ...
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]
在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- [摘]在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
随机推荐
- 初步认识mitmproxy(一)
在windows机器上,经常用的最多的是fiddler工具,很强大,图形化界面,使用方便.简单:在mac上,Charles 类似fiddler工具,同样是易于操作的图形化界面,同样都是通过代理的方式实 ...
- Casper带有4个内建记录级别
默认情况下,CasperJS会在‘error’级别过滤日志.所以如果你开始记录日志后没有看到任何东西,可能就是这个原因.为确保显示日志输出,我把它设置为‘debug’.而且我关闭了‘verbose’选 ...
- ORACLE数据库数据文件转移方法(不同于move方法)
1) 手动拷贝要转移的数据数据文件'd:\OracleData\GWTABLE42.DBF'到新的位置'E:\OracleData\GWTABLE42.DBF'. 2) 把数据文件所属的表空间Offl ...
- KDevelop调试NS2
1.将NS2项目导入到KDevelop 具体操作步骤:打开Kdevelop,首先,选择"Project"->"Open/Import Project".然 ...
- Codeforces 291 E Tree-String Problem AC自动机
Tree-String Problem 网上的dfs + kmp 复杂度就是错的, 除非算出根据下一个字符直接转移Next数组直接转移, 而求出Next[ i ][ 26 ]数组和丢进AC自动机里面没 ...
- Channel Allocation HDU1373
染色问题:相邻不能染同一种颜色 最少需要的颜色的数量=最大团点的数量 #include<bits/stdc++.h> using namespace std; #define N 27 i ...
- Linux常用包的安装
下面列出的这些包都有很强大的功能,也是非常实用常用的工具 gcc yum -y install gcc GNU编译器套件(GNU Compiler Collection) gcc-c++ yum -y ...
- (转载)ACM训练计划,先过一遍基础再按此拼搏吧!!!!
ACM大量习题题库 ACM大量习题题库 现在网上有许多题库,大多是可以在线评测,所以叫做Online Judge.除了USACO是为IOI准备外,其余几乎全部是大学的ACM竞赛题库. USACO ht ...
- Python3 kmeans 聚类算法
# -*- coding: utf-8 -*- """ Created on Wed Jan 10 19:18:56 2018 @author: markli " ...
- [转]C++中vector使用详细说明
一.向量的介绍 向量 vector 是一种对象实体, 能够容纳许多其他类型相同的元素, 因此又被称为容器. 与string相同, vector 同属于STL(Standard Template ...