在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的内容相关推荐
- html 勾选框点击文字勾选,ztree点击文字勾选checkbox,radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
- 在ASP.NET MVC中实现Select多选
我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...
- 在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
- ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
- mvc html dropdownlist,ASP.NET MVC中使用DropDownList地详解
DropDownList控件又称下拉列表框控件,DropDownList控件动态连接到数据库,按指定 条件从数据库 中查询 出列表选项数据,然后绑 定到控件,可以方便快速地显示出多个下拉选 项 . 同 ...
- 通过源代码研究ASP.NET MVC中的Controller和View(二)
通过源代码研究ASP.NET MVC中的Controller和View(一) 在开始之前,先来温习下上一篇文章中的结论(推论): IView是所有HTML视图的抽象 ActionResult是Cont ...
- 在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证
在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证 具体场景为:某一属性是否允许为null的验证,要根据另 ...
- ASP.NET MVC中你必须知道的13个扩展点
ScottGu在其最新的博文中推荐了Simone Chiaretta的文章13 ASP.NET MVC extensibility points you have to know,该文章为我 ...
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
- 在 ASP.NET MVC 中使用 Chart 控件
在 .NET 3.5 的时候,微软就提供了一个 Chart 控件,网络上有大量的关于在 VS2008 中使用这个控件的文章,在 VS2010 中,这个控件已经被集成到 ASP.NET 4.0 中,可以 ...
最新文章
- 开源吞噬世界,得开发者得天下
- ​GPLinker:基于GlobalPointer的实体关系联合抽取
- 包装类型与包装类别_包装的重要性
- 第十二题:设int x=1,float y=2,则表达式x/y的值是:
- Mtk camera driver
- html如何在网页上看错误,HTML错误时,Spring MVC的,但不能查看网页时,静态
- Python 使用Schema 实现接口或方法的JSON格式参数的高效、优雅校验
- C/C++中字符串切割(split)
- notesDocument类的HTTP URL属性 和note URL属性的区别
- 极路由1S HC5661A 刷入不死u-boot(breed)加刷潘多拉固件教程
- 2022年,想自学java有没有一个详细的框架?
- Linux内核专题 - 介绍
- MFC小游戏之坦克大战
- dockerfile使用DEBIAN_FRONTEND
- 美国学生债务数据 csv_我如何摆脱学生债务陷阱,为什么其他美国人不那么幸运...
- SHOI 2008 仙人掌图 BZOJ 1023
- [SOC]clock与reset设计
- android studio 使用夜神模拟器
- Ubuntu系统Vscode安装以及配置C++环境(一条龙服务)
- 编程计算下面的分段函数: y=e​√​x​​​​​−1 (0<x<1) y=|x|+2 (3≤x≤4) y=sin(x​2​​) (当x取其他值时)
热门文章
- Atitit 常见面试问题回答法 原则与细则 目录 1.1. 1、工作多久了?为什么离职?	1 1.2. 、自我评价	1 1.3. 问你有什么缺点	2 1.4. 4、理想薪资	2 1.5. 职业规
- Atitit 技术领域之道 技术领域的艺术attilax著 v2 s66.docx Atitit 技术领域之道 attilax著 1. 分类	1 1.1. 按照架构 web cs桌面	1 1.2.
- Atitit 微服务之道 attilax著 1. 什么是微服务架构?	1 1.1. 、微服务与SOA的关系 :微服务架架构师面向服务架构(SOA)的一种特定实现	2 1.2. 微服务与康威定律	2 1
- paip.提升安全性----用户资金账户模块平账功能
- CTP: 接收心跳超时Bug
- 思科CEO自爆:G20虚拟会议用的我家技术
- 号外!德国惊现大罢工--要求每周上班28小时
- pyqt 子窗口控制主窗口绘图_PyQtGraph如何关闭绘图窗口/关闭所有绘图窗口?
- 【优化算法】水基湍流优化算法(TFWO) 【含Matlab源码 1585期】
- 【单目标优化求解】基于matlab被囊群算法(TSA)求解最优目标问题【含Matlab源码 1567期】