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>
}
作者:Darren Ji原文地址:https://www.cnblogs.com/darrenji/p/4367696.html

%s 个评论

要回复文章请先登录注册