在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 ...
随机推荐
- screen命令记录
1.screen -x 进入 2.ctrl+a+n 下一个 3.ctrl+a+p 上一个任务 4.ctrl+a+d 退出 5.ctrl+c 结束任务 其他 screen -ls 所有任务 screen ...
- oracle数据库_实例_用户_表空间之间的关系
基础概念:Oracle数据库.实例.用户.表空间.表之间的关系 数据库:Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实Oracle数据库的 ...
- 解决Python3 pip list 红色DEPRECATION
解决Python3 pip list 红色DEPRECATION 打开文件扩展名和隐藏的项目 找到ProgramData,在该目录下创建pip文件夹,在pip里面创建pip.ini 在pip.ini ...
- Qt编程之悲惨世界
最近需要给人写点基于QtWebkit的代码,算是领教了Qt编程的痛苦之处. QNetworkConfigurationManager::isOnline() 只有在编译平台上能运行,拷贝到其他Wind ...
- hdu 1232 变成生成树至少还要加几条边 (并查集模板题)
求一个图 变成生成树至少还要加几条边(成环的边要删掉,但不用统计) Sample Input4 2 //n m1 3//u v4 33 31 21 32 35 21 23 5999 00 Sample ...
- PHP 与redis 操作添加处理投票
<?php header("Content-Type:text/html;charset=utf-8"); include 'lib/mysql.class.php'; $m ...
- 【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 ...
- 026.Zabbix简单调优
一 调优相关对应项 Zabbix busy trapper processes, in % StartTrappers=5 Zabbix busy poller processes, in % Sta ...
- Python3 kmeans 聚类算法
# -*- coding: utf-8 -*- """ Created on Wed Jan 10 19:18:56 2018 @author: markli " ...
- 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html
写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...