MVC实现多选下拉框,保存并显示多选项
2014-07-11 19:30
190 查看
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来。
模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌。
关于车迷的Model:
以上,在"MVC实现多选下拉框"中也提到了,当我们通过<select multiple="multiple"...></select>显示多选下拉框的时候,其对应的Model属性类型一定是string[]。
关于汽车品牌的Model:
创建FanController:
显示<select multiple="multiple"...></select>的时候,需要一个IEnumerable<SelectListItem>类型的集合,我们通过ViewBag把该类型集合传递到前台视图。
打上[HttpPost]的SaveCars(CarFan carFan)方法内部,在实际项目中,本该是需要遍历所有选中汽车品牌的Id,把CarFan的Id和汽车品牌的Id保存到两者的中间表的,但这里为了方便,保存成功后还是回到原先的/Fan/SaveCars.cshtml视图,把选中的项显示出来。
/Fan/SaveCars.cshtml 视图
运行,在没有选择任何项时的界面如下:
当选择项,提交后,重新返回/Fan/SaveCars.cshtml视图,界面如下:
模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌。
关于车迷的Model:
namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public string[] SelectedCars { get; set; } } }
以上,在"MVC实现多选下拉框"中也提到了,当我们通过<select multiple="multiple"...></select>显示多选下拉框的时候,其对应的Model属性类型一定是string[]。
关于汽车品牌的Model:
namespace MvcApplication1.Models { public class Car { public int Id { get; set; } public string Name { get; set; } } }
创建FanController:
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers { public class FanController : Controller { public ActionResult SaveCars() { var carFan = new CarFan() {Id = 1, Name = "Darren", SelectedCars = {}}; ViewBag.allcars = GetAllCars(); return View(carFan); } [HttpPost] public ActionResult SaveCars(CarFan carFan) { //if (ModelState.IsValid) //{ // foreach (var item in carFan.SelectedCars) // { // //TODO:把选中的Car的编号和CarFan保存到中间表 // } //} ViewBag.allcars = GetAllCars(); return View(carFan); } private IEnumerable<SelectListItem> GetAllCars() { List<SelectListItem> allCars = new List<SelectListItem>(); allCars.Add(new SelectListItem() { Value = "1", Text = "奔驰" }); allCars.Add(new SelectListItem() { Value = "2", Text = "宝马" }); allCars.Add(new SelectListItem() { Value = "3", Text = "奇瑞" }); allCars.Add(new SelectListItem() { Value = "4", Text = "比亚迪" }); allCars.Add(new SelectListItem() { Value = "5", Text = "起亚" }); allCars.Add(new SelectListItem() { Value = "6", Text = "大众" }); allCars.Add(new SelectListItem() { Value = "7", Text = "斯柯达" }); allCars.Add(new SelectListItem() { Value = "8", Text = "丰田" }); allCars.Add(new SelectListItem() { Value = "9", Text = "本田" }); return allCars.AsEnumerable(); }
显示<select multiple="multiple"...></select>的时候,需要一个IEnumerable<SelectListItem>类型的集合,我们通过ViewBag把该类型集合传递到前台视图。
打上[HttpPost]的SaveCars(CarFan carFan)方法内部,在实际项目中,本该是需要遍历所有选中汽车品牌的Id,把CarFan的Id和汽车品牌的Id保存到两者的中间表的,但这里为了方便,保存成功后还是回到原先的/Fan/SaveCars.cshtml视图,把选中的项显示出来。
/Fan/SaveCars.cshtml 视图
@model MvcApplication1.Models.CarFan @{ ViewBag.Title = "SaveCars"; Layout = "~/Views/Shared/_Layout.cshtml"; } <link href="~/Content/chosen.css" rel="stylesheet" /> <h2>@Model.Name 感兴趣的汽车品牌包括:(最多选择2个)</h2> @using (Html.BeginForm("SaveCars", "Fan", FormMethod.Post, new {id="editForm"})) { @Html.ListBoxFor(m => m.SelectedCars, (IEnumerable<SelectListItem>)ViewBag.allcars, new {@class="chosen", multiple="multiple", style="width:350px;"}) <br/> <input type="submit" value="提交"/> } @section scripts { <script src="~/Scripts/chosen.jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.chosen').chosen({ max_selected_options: 2 }); $(".chosen-deselect").chosen( { allow_single_deselect: true }); $(".chosen").chosen().change(); $(".chosen").trigger('liszt:updated'); }); </script> }
运行,在没有选择任何项时的界面如下:
当选择项,提交后,重新返回/Fan/SaveCars.cshtml视图,界面如下:
相关文章推荐
- 利用chosen.js插件实现下拉可搜索多选,控制选择个数,选项框复位,修改下拉选项的功能(附代码)
- RM2011 Lookup类型字段实现多选及保存、显示
- jquery multiselect如何实现下拉框多选并获取多个选项的值
- 【java】mysql+springMvc+easyui实现图片的保存和读取显示
- MVC实现多选下拉框
- jsp实现下拉框选项下有选择的显示
- javascript实现下拉列表框显示(输入拼音头显示选项)
- JS实现支持多选的遍历下拉列表代码
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现(cs)
- textbox显示下拉框中,实现自动完成
- 在IE中实现窗口间操作下拉选框的选项
- 仿google的下拉提示,实现关键字智能化显示
- 如何把select选项给只读,让他不可选,但数据还是保存在下拉表中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中(ZT)
- jsp中 根据传入值,采用javascript自动显示标签下拉选项
- window程序中实现图片保存到Sql与显示
- 模拟层实现限制下拉框显示个数
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中