MVC implement multiple selection drop-down box, save and display multiple options, mvc multiple selection

MVC implement multiple selection drop-down box, save and display multiple options, mvc multiple selection

In the "MVC implementation multi-select drop-down box", it mainly displays multiple select drop-down boxes. The actual situation is usually: after multiple options are selected for submission, all selected items must be displayed on the editing page.

 

Simulate a scenario where a car fan may have multiple car brands that he or she prefers.

 

Model for car fans:

namespace MvcApplication1.Models{    public class CarFan    {        public int Id { get; set; }        public string Name { get; set; }        public string[] SelectedCars { get; set; }    }}

As mentioned above, in the "MVC implementation multi-select drop-down box", when we use <select multiple = "multiple"...> </select> when multiple drop-down lists are displayed, the corresponding Model attribute type must be string [].

 

Model about automobile brands:

namespace MvcApplication1.Models{    public class Car    {        public int Id { get; set; }        public string Name { get; set; }    }}

Create 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: Save the selected Car number and CarFan to the intermediate table //} ViewBag. allcars = GetAllCars (); return View (carFan);} private IEnumerable <SelectListItem> GetAllCars () {List <SelectListItem> allCars = new List <SelectListItem> (); allCars. add (new SelectListItem () {Value = "1", Text = "Benz"}); allCars. add (new SelectListItem () {Value = "2", Text = "BMW"}); allCars. add (new SelectListItem () {Value = "3", Text = "Chery"}); allCars. add (new SelectListItem () {Value = "4", Text = "BYD"}); allCars. add (new SelectListItem () {Value = "5", Text = "Kia"}); allCars. add (new SelectListItem () {Value = "6", Text = ""}); allCars. add (new SelectListItem () {Value = "7", Text = "Skoda"}); allCars. add (new SelectListItem () {Value = "8", Text = "Toyota"}); allCars. add (new SelectListItem () {Value = "9", Text = "Honda"}); return allCars. asEnumerable ();}

Show <select multiple = "multiple"...> </select>, an IEnumerable <SelectListItem> type set is required. We pass this type set to the foreground view through ViewBag.

 

Inside the [HttpPost] SaveCars (CarFan carFan) method, in actual projects, it is supposed to traverse all the IDs of the selected car brands, the CarFan Id and the car brand Id are saved in the middle table. However, for convenience, the original/Fan/SaveCars are returned after being saved successfully. the cshtml view displays the selected items.

 

/Fan/SaveCars. cshtml View

@ Model MvcApplication1.Models. CarFan @ {ViewBag. Title = "SaveCars"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}< link href = "~ /Content/chosen.css "rel =" stylesheet "/> 
 
Run:


When you select an item and submit it, return to the/Fan/SaveCars. cshtml view again. The interface is as follows:


What is the specific usage of the drop-down and multi-choice boxes in MVC? Better examples
Bind drop-down box:
$ ('# SelPayBillPersonName'). combobox ({
Url: 'path ',
ValueField: 'id ',
TextField: 'text ',
Editable: false
});
Drop-down box value: $ ("# SelPayBillPersonName"). combobox ('gettext ')

Complete code of the Interaction Effect in the MVC3 drop-down box
View:

<Script>
$ (Function (){
$ ("# ORG3"). change (function () {// activated when the ORG3 option is changed
Var selec = $ (this). val (); // get the changed option value
Var url = "@ Url. Action (" GetBZ "," TianChuang ", new {area =" SGManage "})"; // The type of parameters in sequence (action, Controller, area)

$ ("# ORG4"). find ("option"). remove (); // clear

$. GetJSON (url, {'orgid': selec}, function (data) {// orgID is the same as the action parameter name in Controllers.
$. Each (data, function (I, item ){
$ ("<Option> </option> "). val (item ["Value"]). text (item ["Text"]). appendTo ($ ("# ORG4 "));
}); // If the url access is successful, the function (data) will be executed (read carefully, and this function is also the third parameter of. getJSON)
}); // Function (data) obtains the value returned by the url and reads it cyclically.
});
});
</Script>
@ Html. DropDownListFor (m => m. ORG3, CheJian, new {style = "width: 100px ;"})
@ Html. DropDownListFor (m => m. ORG4, BanZu, new {style = "width: 100px ;"})

Controllers:
// JsonResult inherits ActionResult

Public JsonResult GetBZ (int orgID) // GetBZ of the View corresponding to GetBZ. orgID can also be obtained through View.
{
Var d = Organization. GetOrgSelectList1 (orgID, OrgLayer. Work area );
Return Json (d, JsonRequestBehavior. AllowGet );

// The code here is encapsulated. You can write any desired code here.
// Note that the returned value is List <SelectListItem ...... full text>