MVC 下拉选项实现的几种方式

主要介绍4种方式

硬编码方式:

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" })

数据库中读取数据:

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;

@Html.DropDownList("database-dropdownlist", ViewBag.database as IEnumerable<SelectListItem>, new { @class = "btn btn-success dropdown-toggle form-control" })

枚举:

public enum Language
{
Chinese,
English,
Japan,
Spanish,
Urdu
}
ViewBag.from_enum = Enum.GetValues(typeof(Language)).Cast<Language>();

利用扩展方法 @Html.EnumDropDownListFor 来实现。

接下来依次给出两个类来进行演示：

public class StudentModel
{
[Display(Name = "语言")]
public ProgrammingLanguages Language { get; set; }
}

public enum ProgrammingLanguages
{
[Display(Name = "ASP.NET")]
ASPNet,
[Display(Name = "C# .NET")]
CSharp,
[Display(Name = "Java")]
Java,
[Display(Name = "Objective C")]
ObjectiveC,
[Display(Name = "Visual Basic .NET")]
VBNet,
[Display(Name = "Visual DataFlex")]
VisualDataFlex,
[Display(Name = "Visual Fortran")]
VisualFortran,
[Display(Name = "Visual FoxPro")]
VisualFoxPro,
[Display(Name = "Visual J++")]
VisualJPlus
}

<div class="form-group">
@Html.LabelFor(model => model.Language, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.Language, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Language, "", new { @class = "text-danger" })
</div>
</div>

联级绑定

public class Province
{
public int provinceId { get; set; }
public string provinceName { get; set; }
public string Abbr { get; set; }
}
public class City
{
public int CityId { get; set; }
public string CityName { get; set; }
public int provinceId { get; set; }
}
public class Employees
{

[Key]
public int EmployeeId { get; set; }

[Required, Display(Name = "雇员名字")]
public string EmployeeName { get; set; }

[Required, Display(Name = "地址")]
public String Address { get; set; }

[Required, Display(Name = "所属省")]
public int Province { get; set; }

[Required, Display(Name = "所在城市")]
public int City { get; set; }

[Display(Name = "地区代码")]
public String ZipCode { get; set; }

[Required, Display(Name = "联系号码")]
public String Phone { get; set; }
}

List<Province> provinceList = new List<Province>() {
	new Province(){provinceId=1,provinceName="湖南",Abbr="hunan_province"},
	new Province(){provinceId=2,provinceName="广东",Abbr="guangdong_province"},
	new Province(){provinceId=3,provinceName="吉林",Abbr="jilin_province"},
	new Province(){provinceId=4,provinceName="黑龙江",Abbr="heilongjiang_province"}
};
[HttpGet]
public ActionResult Create()
{

ViewBag.ProvinceList = provinceList;
var model = new Employees();
return View(model);
}

[HttpPost]
public ActionResult Create(Employees model)
{
if (ModelState.IsValid)
{

}
ViewBag.ProvinceList = provinceList;
return View(model);
}

public ActionResult FillCity(int provinceId)
{
var cities = new List<City>() {
 new City(){CityId=10,CityName="岳阳市",provinceId=1},
 new City(){CityId=10,CityName="深圳市",provinceId=2},
 new City(){CityId=10,CityName="吉林市",provinceId=3},
 new City(){CityId=10,CityName="哈尔滨市",provinceId=4}
};
cities = cities.Where(s => s.provinceId == provinceId).ToList();
return Json(cities, JsonRequestBehavior.AllowGet);
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>注册雇员</h4>
<div class="form-group">
	@Html.LabelFor(m => m.EmployeeName, new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control" })
		@Html.ValidationMessageFor(m => m.EmployeeName, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	@Html.LabelFor(m => m.Address, new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.TextBoxFor(m => m.Address, new { @class = "form-control" })
		@Html.ValidationMessageFor(m => m.Address, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	@Html.LabelFor(m => m.Province, new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.DropDownListFor(m => m.Province,
new SelectList(ViewBag.ProvinceList, "provinceId", "provinceName"),
	  "选择所在省",
	  new { @class = "form-control", @onchange = "FillCity()" })
		@Html.ValidationMessageFor(m => m.Province, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	@Html.LabelFor(m => m.City, new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.DropDownListFor(m => m.City,
new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"),
	  "选择所在市",
	  new { @class = "form-control" })
		@Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	@Html.LabelFor(m => m.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.TextBoxFor(m => m.ZipCode, new { @class = "form-control" })
		@Html.ValidationMessageFor(m => m.ZipCode, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	@Html.LabelFor(m => m.Phone, new { @class = "control-label col-md-2" })
	<div class="col-md-10">
		@Html.TextBoxFor(m => m.Phone, new { @class = "form-control" })
		@Html.ValidationMessageFor(m => m.Phone, "", new { @class = "text-danger" })
	</div>
</div>
<div class="form-group">
	<div class="col-md-offset-2 col-md-10">
		<input type="submit" value="Create" class="btn btn-success" />
		<a href="/Home/Employees" class="btn btn-warning">Cancel</a>
	</div>
</div>
</div>
}

动态处理选项:

function FillCity() {
var provinceId = $('#Province').val();
$.ajax({
	url: '/Home/FillCity',
	type: "GET",
	dataType: "JSON",
	data: { provinceId: provinceId },
	success: function (cities) {
		$("#City").html("");
		$.each(cities, function (i, city) {
			$("#City").append(
				$('<option></option>').val(city.CityId).html(city.CityName));
		});
	}
});
}