ASP.NET MVC 下拉列表实现

最新推荐文章于 2022-02-09 09:58:29 发布

简约的浪人

最新推荐文章于 2022-02-09 09:58:29 发布

阅读量2.5k

点赞数 1

分类专栏： ASP.NET MVC 片段

本文链接：https://blog.csdn.net/Ryan_laojiang/article/details/75349555

版权

本文详细介绍了ASP.NET MVC中下拉列表的实现方法，包括硬编码数据、从数据库读取、绑定枚举以及实现选择联动效果。通过实例代码展示了如何使用ViewBag传递数据，以及如何处理枚举绑定和JavaScript脚本实现省市区选择联动。

摘要由CSDN通过智能技术生成

前言

我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式。

话题引入

一般在下拉框中绑定数据的话，分为几种情况。

（1）下拉框中的数据是写死的，我们直接给出死代码即可。

（2）下拉框中的数据从数据库中读取出来，从而进行显示。

（3）下拉框中直接用枚举显示。

（4）下拉框中一个选择的值改变另外一个下拉框中的值。

关于下拉框中绑定大概就是以上四种方式，接下来我们一一来破解，我们样式利用Bootstrap来表示，顺便也温习温习Bootstrap。

下拉框硬编码【一】

我们在控制器中给出如下数据并利用ViewBag来进行传递

           ViewBag.hard_value = new List<SelectListItem>() { 
                new SelectListItem(){Value="0",Text="xpy0928"},
                new SelectListItem(){Value="1",Text="cnblogs"}
            };

在数据中进行如下绑定

  @Html.DropDownList("hard-code-dropdownlist", new SelectList(ViewBag.hard_value, "Value", "Text"), new { @class = "btn btn-success dropdown-toggle form-control" })

下面我们来看看效果：

下拉框读取数据库【二】

这个要读取数据库，我们就给出一个类测试就ok，并给出默认选中值，测试类：

        public class BlogCategory
        {
            public int CategoryId { get; set; }
            public string CategoryName { get; set; }

        }

绑定ViewBag传值：

            //从数据库中读取
            var categoryList = new List<BlogCategory>() { 
                new BlogCategory(){CategoryId=1,CategoryName="C#"},
                new BlogCategory(){CategoryId=2,CategoryName="Java"},
                new BlogCategory(){CategoryId=3,CategoryName="JavaScript"},
                new BlogCategory(){CategoryId=4,CategoryName="C"}
            };
            var selectItemList = new List<SelectListItem>() { 
                new SelectListItem(){Value="0",Text="全部",Selected=true}
            };
            var selectList = new SelectList(categoryList, "CategoryId", "CategoryName");
            selectItemList.AddRange(selectList);
            ViewBag.database = selectItemList;