ASP.NET MVC實現多選下拉框
借助Chosen Plugin可以實現多選下拉框。
選擇多項:
設置選項數量,比如設置最多允許2個選項:
Model模塊
考慮到多選下拉<select multiple="multiple"…></select>選中項是string數組,Model應該這樣設計:
using System.Collections.Generic; using System.Web.Mvc; namespace MvcApplication1.Models { public class CarVm { public string[] SelectedCars { get; set; } public IEnumerable<SelectListItem> AllCars { get; set; } } }
HomeController中:
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers { public class HomeController : Controller { public ActionResult Index() { CarVm carVm = new CarVm(); carVm.SelectedCars = new string[]{"1","2"}; carVm.AllCars = GetAllCars(); return View(carVm); } [HttpPost] public ActionResult SaveCars(CarVm carVm) { if (ModelState.IsValid) { return View(carVm); } return RedirectToAction("Index", carVm); } 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(); } } }
視圖
Home/Index.cshtml視圖中,需要引用Chosen Plugin的css和js文件:
@model MvcApplication1.Models.CarVm @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <link href="~/Content/chosen.css" rel="external nofollow" rel="stylesheet" /> @using (Html.BeginForm("SaveCars", "Home", FormMethod.Post)) { @Html.LabelFor(m => m.SelectedCars,"最多選擇2個選項") <br/> @Html.ListBoxFor(m => m.SelectedCars, Model.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> }
到此這篇關於ASP.NET MVC實現多選下拉框的文章就介紹到這瞭。希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- ASP.NET MVC下拉框中顯示枚舉項
- ASP.NET MVC把表格導出到Excel
- ASP.NET MVC格式化日期
- ASP.NET MVC實現文件下載
- ASP.NET MVC使用JCrop上傳並裁剪圖片