ASP.NET?MVC實現(xiàn)多選下拉框保存并顯示
在"ASP.NET MVC實現(xiàn)多選下拉框"中,主要是多選下拉框的顯示,而實際情況通常是:選擇多個選項提交后,需要在編輯頁把所有選中的項顯示出來。
模擬這樣的一個場景:一個車迷可能有多個自己喜歡的汽車品牌。
關(guān)于車迷的Model:
namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public string[] SelectedCars { get; set; } } }
以上,在"ASP.NET MVC實現(xiàn)多選下拉框"中也提到了,當(dāng)我們通過<select multiple="multiple"...></select>顯示多選下拉框的時候,其對應(yīng)的Model屬性類型一定是string[]。
關(guān)于汽車品牌的Model:
namespace MvcApplication1.Models { public class Car { public int Id { get; set; } public string Name { get; set; } } }
創(chuàng)建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)方法內(nèi)部,在實際項目中,本該是需要遍歷所有選中汽車品牌的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="external nofollow" 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> }
運行,在沒有選擇任何項時的界面如下:
當(dāng)選擇項,提交后,重新返回/Fan/SaveCars.cshtml視圖,界面如下:
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
ASP.NET?Core中Razor頁面與MVC區(qū)別介紹
這篇文章介紹了ASP.NET?Core中Razor頁面與MVC的區(qū)別,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02ASP.NET(VB)寫的后臺發(fā)送短信實現(xiàn)代碼
使用vb寫的后臺發(fā)送短信代碼,很實用的一項功能,感興趣的朋友可以了解下,或許對你學(xué)習(xí)asp.net vb有所幫助2013-02-02MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查詢條件分頁
這篇文章主要介紹了MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查詢條件分頁,需要的朋友可以參考下2017-05-05在Repeater控件中通過Eval的方式綁定Style樣式代碼
這篇文章主要介紹了如何在Repeater控件中通過Eval的方式綁定Style樣式,需要的朋友可以參考下2014-04-04ASP.NET與ASP互通COOKIES的一點經(jīng)驗
ASP與ASP.NET互相整合時,其中文COOKIES信息無法被互通共享,當(dāng)使用ASP.NET寫入中文COOKIES信息后,使用ASP進行讀取,讀出來的卻是亂碼,而非中文。2010-03-03涉及網(wǎng)絡(luò)編程時,需要用到的幾個常用方法
涉及網(wǎng)絡(luò)編程時,需要用到的幾個常用方法...2006-09-09注冊或者點擊按鈕時,怎么防止用戶重復(fù)提交數(shù)據(jù)(實例講解)
這篇文章主要是對注冊或者點擊按鈕時,怎么防止用戶重復(fù)提交數(shù)據(jù)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12