ASP.NET MVC通过勾选checkbox更改select的内容
作者：Darren Ji
这篇文章介绍了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>
}以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接