ASP.NET MVC通过勾选checkbox更改select的内容

 更新时间:2022年09月16日 08:25:06   作者: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>
}

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • ASP.NET性能优化之局部缓存分析

    ASP.NET性能优化之局部缓存分析

    如果我们在开发网站过程中的缓存策略是不支持页面局部缓存的,整个架构就是不合理的
    2011-10-10
  • Request.UrlReferrer中文乱码解决方法

    Request.UrlReferrer中文乱码解决方法

    参考了网络大部分的解决方案,没一个能搞定的,如果穷途末路,试试下面的方法:将获得的前一页面的URL分成两段,后面的参数部分进行编码(直接对URL编码是不行的),然后再组合一下就可以了,需要的朋友可以了解下
    2012-12-12
  • Asp.Net二级域名共享Forms身份验证、下载站/图片站的授权访问控制

    Asp.Net二级域名共享Forms身份验证、下载站/图片站的授权访问控制

    我们平时一般在做图片或者文件下载权限控制的时候基本都是控制到下载页面的,当你的下载地址暴露后,浏览者就直接可以通过文件地址进行下载了,这时候也就出现了我们常说的盗链
    2012-02-02
  • 对GridView的行加颜色并弹出Kindeditor的实现思路

    对GridView的行加颜色并弹出Kindeditor的实现思路

    本文主要详细介绍下对GridView的行加颜色并弹出Kindeditor,感兴趣的朋友可以了解下,希望可以帮助到你
    2013-04-04
  • .NET API 接口数据传输加密最佳实践记录

    .NET API 接口数据传输加密最佳实践记录

    这篇文章主要介绍了.NET API 接口数据传输加密最佳实践记录,我们在做 Api 接口时,相信一定会有接触到要给传输的请求 body 的内容进行加密传输。其目的就是为了防止一些敏感的内容直接被 UI 层查看或篡改,需要的朋友可以参考下
    2022-10-10
  • 实例说明asp.net中的简单角色权限控制

    实例说明asp.net中的简单角色权限控制

    权限控制在信息管理中属于基本功能,权限控制中其中以Window权限为模型的角色用户(也称用户组用户)模型使用较多。本文以网站管理后台权限控制为例简要说明。
    2009-10-10
  • ASP.net(c#) 生成html的几种解决方案[思路]

    ASP.net(c#) 生成html的几种解决方案[思路]

    下面的文章转载自网络,其代码很多都有问题,这里只提供给大家一个思路.
    2009-05-05
  • WPF简介与基础开发

    WPF简介与基础开发

    WPF是微软推出的基于Windows的用户界面框架,这篇文章介绍了WPF的基础开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-02-02
  • Asp.Net Cache缓存使用代码

    Asp.Net Cache缓存使用代码

    本例完成建立缓存,清除缓存使用缓存进行数据绑定
    2008-12-12
  • asp.net 分页潜谈

    asp.net 分页潜谈

    最近研究了一下Asp.net下的分页功能。以前受前辈们的误导,人云已云的以为做分页很难很麻烦。这一研究才发现,分页也不过如此嘛。
    2009-06-06

最新评论