2019-5-10 Asp.net MVC4 DropDownList控件快速Demo

第一步:

创建C#,Mvc4,基本 项目类型.

第二步:

创建Action Index相应的View:

Index.cshtml:

@{
    ViewBag.Title = "Index";
}

<h1>DropDownList Demo</h1>
<h2><a href="#">静态Demo省略</a></h2>
<h2>@Html.ActionLink("Demo1","Demo1")</h2>
<h2>@Html.ActionLink("Demo2","Demo2")</h2>
<h2><hr /></h2>
<h2>@Html.ActionLink("Student","Index","Student")</h2>
<h2>@Html.ActionLink("Demo3","Demo3")</h2>
<h2>@Html.ActionLink("Demo4","Demo4")</h2>

第三步:

在Models目录下,创建Student.cs文件:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DropDownListDemo.Models
{
    public class Student
    { 
        public int ID{ set; get; }
        public string Name { set; get; }
       
    }
}

第四步:

添加控制器StudentController.cs,相关选项如图:

点击 [添加] 按钮,产生相应的View文件.

第五步:

打开Models目录下文件:DropDownListDemoContext.cs

复制其中代码:

至Global.asax.cs至Application_Start()事件开头.

第六步:

修改Web.config文件:

第七步:

打开HomeController.cs文件,代码修改如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DropDownListDemo.Models;

namespace DropDownListDemo.Controllers
{
    public class HomeController : Controller
    {
        private DropDownListDemoContext db = new DropDownListDemoContext();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Demo1()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem { Text = "Kirin", Value = "1" });
            items.Add(new SelectListItem { Text = "Jade", Value = "2", Selected = true });
            items.Add(new SelectListItem { Text = "Yao", Value = "3" });
            ViewBag.list = items;
            return View();
        }
        public ActionResult Demo2()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem { Text = "Kirin", Value = "1" });
            items.Add(new SelectListItem { Text = "Jade", Value = "2" });
            items.Add(new SelectListItem { Text = "Yao", Value = "3" });
            ViewBag.list = items;
            ViewBag.selected = 3;
            return View();
        }
        public ActionResult Demo3()
        {
            var students = db.Students;
            var selectList = new SelectList(students, "ID", "Name", "2");
            ViewBag.list = selectList;
            return View();
        }
        public ActionResult Demo4()
        {
            var students = db.Students;
            List<SelectListItem> items = new List<SelectListItem>();
            foreach (var item in students)
            {
                items.Add(new SelectListItem { Text = item.Name, Value = item.ID.ToString() });
            }
            ViewBag.list = items;
            ViewBag.selected = 2;
            return View();
        }
    }
}

第八步:

添加 Demo1、Demo2、Demo3、Demo4 相应的View:

Demo1.cshtml

Demo2.csthml

Demo3.cshtml

Demo4.csthml

源代码与下方的View:Demo1.cshtml类似:

@{
    ViewBag.Title = "Demo1";
}

<h2>Demo1</h2>
@Html.DropDownList("namelist", ViewBag.list as IEnumerable<SelectListItem>)

小结:

• 前2个demo的下拉列表数据在Action中提前做好.后两个demo的下拉列表数据来自数据中的Student表中.这个Student表中数据可以通过/Student/Index 页面进行插入编辑修改删除等操作.
• 下拉列表中数据的默认值有两种方式解决.