Home > Developer > Web Develop
Aceadmin has a lot of HTML control, and after downloading it all mixed together, want to use a control sometimes adjust half a day, simply sort out a version, and combine the encapsulation of MVC. In the future, you don't need a JS css tune.
1. Drop-down box
View:
@{Layout = null;}<!DOCTYPE HTML><HTMLLang= "en"><Head> <title>Drop-down box-Ace Admin</title>@* This control width (just control div) *@<Linkrel= "stylesheet"href= "/assets/css/bootstrap.min.css" />@* The following two affects the style of the drop-down box *@<Linkrel= "stylesheet"href= "/assets/css/chosen.css" /> <Linkrel= "stylesheet"href= "/assets/css/ace.min.css" /> <Linkrel= "stylesheet"href= "/assets/css/font-awesome.min.css" /> <Scriptsrc= "/scripts/jquery_2_1_0_min.js"></Script> <!--[If ie]> <script src= "/scripts/jquery_1_11_0_min.js" ></script> <! [EndIf] - <Scriptsrc= "/assets/js/chosen.jquery.min.js"></Script> <Scripttype= "Text/javascript"> $(function ($) { $('. Chosen-select'). Chosen ({allow_single_deselect:true }); //when the window size changes, the drop-down box follows the zoom$ (window). On ('Resize.chosen', function () { varW= $('. Chosen-select'). Parent (). width (); $('. Chosen-select'). Next (). css ({'width': w}); }). Trigger ('Resize.chosen'); }); </Script></Head><Body> <Divclass= "Modal-body"> <Divclass= "Row"> <Divclass= "Col-xs-12 col-sm-4"> <!--HTML Example - <Selectclass= "Chosen-select"name= "Hero"Data-placeholder= "Please select Heroes ..."> <optionvalue=""></option> <!--do not put anything in the default text, otherwise it will not be selected (Please select) - <optionvalue= "1">Liu bei</option> <optionvalue= "2">Guan yu</option> <optionvalue= "3">Zhang Fei</option> </Select> <Divclass= "Space-4"></Div> <!--MVC version Example -@* for Aceadmin a lot--in MVC instead of *@@html.dropdownlist ("SelectListItem", NULL, NULL , new {@class = "Chosen-select", data_placeholder= "Please select Hero ...", name = "Hero"}) </Div> </Div> </Div></Body></HTML>
Background:
Public actionresult HTMLControl () { List <SelectListItem> SelectListItem =New List<SelectListItem>(); Selectlistitem.add (New SelectListItem{Text =" ", Value ="" }); Selectlistitem.add (New SelectListItem{Text ="Liu Bei", Value ="1" }); Selectlistitem.add (New SelectListItem{Text ="Guan Yu", Value ="2" }); Selectlistitem.add (New SelectListItem{Text ="Zhang Fei", Value ="3" }); Viewbag.selectlistitem=SelectListItem; returnView (); }
There are also 1 ways to create selectlist that can be better combined with ORM tools.
//data from the simulation database List< Person> Listperson =New List< Person>() { New Person() {Id =0, name=" " }, New Person() {Id =1, name="Liu Bei" }, New Person() {Id =2, name="Guan Yu" }, New Person() {Id =3, name="Zhang Fei" } }; SelectList ListItem=New SelectList(Listperson,"Id","Name"); ///There is a fourth parameter that is the default selected value Viewbag.selectlistitem= ListItem;
If you are using SelectListItem, then use LINQ's Select () method to isolate text and value
IEnumerable<selectlistitemnewselectlistitem {Value = Item. Id.tostring (), Text = Item. Name});Multiple selection, if it is multi-select, only need to add a property is OK, the other exactly:multiple= "multiple"
Aceadmin in MVC controls
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
