Click here to Skip to main content
15,886,519 members
Search within:


Articles / Web Development / HTML
 

CheckBoxList(For) - A missing MVC extension (no longer supported)

Rate me:
Please Sign up or sign in to vote.
4.82/5 (44 votes)
4 Feb 2014CPOL6 min read 765.2K   15K   128  
Extends MVC HtmlHelper class so you can create POSTable checkbox list.
 
/*
	99Lime.com HTML KickStart by Joshua Gatcke
	kickstart.css
	
	Don't edit the file if you want HTML KickStart to be upgradeable. 
	Instead, copy any CSS selectors you want to modify to your style.css file.
	
	// Colors
	blue: #4D99E0;
*/
/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(kickstart-buttons.css);
@import url(kickstart-forms.css);
@import url(kickstart-menus.css);
@import url(kickstart-grid.css);
@import url(kickstart-icons.css);
@import url(jquery.fancybox-1.3.4.css);
@import url(prettify.css);
@import url(chosen.css);
@import url(tiptip.css);

/*---------------------------------
	HTML ELEMENTS
-----------------------------------*/
a{color:#4D99E0;outline:0;}
a:active{color:inherit;}
a:visited{}
a:hover{}
a img{border:0;}
strong,b{color:#000;background:lightyellow;position:relative;top:0;left:0;padding:2px 5px;}
strike{}
em,i{}
.hide{display:none;}
.show{display:block;}

/*---------------------------------
	UTILITY
-----------------------------------*/
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

/*---------------------------------
	HR
-----------------------------------*/
hr{clear:both;border-bottom:0;border-top:1px dotted #ccc;border-right:0;border-left:0;margin:30px 0;min-height: 0px;height:1px;}
hr.alt1{border-style: solid;}
hr.alt2{border-style: dashed;}

/*---------------------------------
	HTML5 ELEMENTS (shim)
-----------------------------------*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

/*---------------------------------
	HEADINGS
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
font-weight:bold;
line-height:140%;
}

h1{
font-size:3em;
margin:10px 0 10px 0;
}

h2{
font-size:2.5em;
margin:10px 0 10px 0;
}

h3{
font-size:2em;
margin:10px 0 10px 0;
line-height:130%;
}

h4{
font-size:1.5em;
margin:10px 0 10px 0;
}

h5{
font-size:1.2em;
margin:10px 0 10px 0;
}

h6{
font-size:1em;
margin:10px 0 5px 0;
}

/*---------------------------------
	PARAGRAPHS
-----------------------------------*/
p{
line-height:150%;
color:#666;
margin:10px 0;
}

/*---------------------------------
	BLOCKQUOTES
-----------------------------------*/
blockquote{
font-size:1.5em;
font-style: italic;
color:#888;
margin:30px 30px 30px 0;
padding:0 0 0 20px;
border-left:1px solid #ccc;
}

	blockquote span{font-size:0.7em;color:#000;display:block;}
	blockquote.small{font-size:1.2em;}
	
/*---------------------------------
	LISTS
-----------------------------------*/
ul, ol{
padding:0;
margin:0 0 20px 25px;
}

	li{
	padding:5px 0;
	margin:0;
	}
	
ul.checks{
padding:0;
margin:0 0 20px 0;
}

	ul.checks li{
	list-style-type:none;
	margin:0;
	background:url(img/icon-check.png) no-repeat 5px 0.5em;
	padding-left:30px;
	}

ul.alt{
padding:0;
margin:0 0 20px 0;
}

	ul.alt li{
	list-style-type:none;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	margin:0 0 -1px 0;
	background:url(img/icon-arrow-right.png) no-repeat 5px 0.7em;
	padding-left:20px;
	}
	
/*---------------------------------
	PRE & CODE
-----------------------------------*/
code{
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
font-size:0.9em;
border:1px solid lightblue;
padding:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#518BAB;
}

pre{
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
background:#fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:inset 0px 0px 7px rgba(0,0,0,0.2);
padding:10px;
margin:0 0 20px 0;
border:1px solid #ddd;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
font-size:0.9em;
}

/*---------------------------------
	TABLES
-----------------------------------*/
table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
	thead, tbody{margin:0;padding:0;}
	th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
	thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
	tbody tr.last th,
	tbody tr.last td{border-bottom:0;}
	
/* striped */
table.striped{}
	table.striped tr.alt{background:#f5f5f5;}
	table.striped thead th{background:#fff;}
	table.striped tbody th{background:#f5f5f5;text-align:right;padding-right:15px;border-right:1px dotted #e5e5e5;}
	table.striped tbody tr.alt th{background:#efefef;}

/* tight */
table.tight{}
	table.tight th, .tight td{padding:2px 10px;}

/* sortable */
table.sortable{border:1px solid #ddd;}
	table.sortable thead th{cursor: pointer;position:relative;top:0;left:0;border-right:1px solid #ddd;}
	table.sortable thead th:hover{background:#efefef;}
	table.sortable span.arrow{border-style:solid;border-width:5px;
	display:block;position:absolute;top:50%;right:5px;font-size:0;
	border-color:#ccc transparent transparent transparent;
	line-height:0;height:0;width:0;margin-top:-2px;}
	table.sortable span.arrow.up{border-color:transparent transparent #ccc transparent;margin-top:-7px;}

/*---------------------------------
	TABS
-----------------------------------*/
ul.tabs{
margin:10px 0 -1px 0;
padding:0;
width:100%;
border-bottom:1px solid #e5e5e5;
float:left;
}

	ul.tabs.left{text-align:left;}
	ul.tabs.center{text-align:center;}
	ul.tabs.right{text-align:right;}

	ul.tabs li{
	list-style-type:none;
	margin:0 2px 0 0;
	padding:0;
	display:inline-block;
	*display:inline;/*IE ONLY*/
	position:relative;
	top:0;
	left:0;
	*top:1px;/*IE 7 ONLY*/
	zoom:1;
	}
	
	ul.tabs li a{
	text-decoration:none;
	color:#666;
	display:inline-block;
	padding:9px 15px;
	position: relative;
	top:0;
	left:0;
	line-height:100%;
	background:#f5f5f5;
	box-shadow: inset 0px -3px 3px rgba(0,0,0,0.03);
	border:1px solid #e5e5e5;
	border-bottom:0;
	font-size:0.9em;
	zoom:1;
	}
	
	ul.tabs li a:hover{
	background:#fff;
	}
	
	ul.tabs li.current a{
	position:relative;
	top:1px;
	left:0;
	background:#fff;
	box-shadow: none;
	color:#222;
	}
	
	.tab-content{
	border:1px solid #efefef;
	border-left:1px solid #e5e5e5;
	clear:both;
	padding:20px;
	margin:0 0 40px 0;
	}
	
	/* w/icon */
	ul.tabs .icon{
	margin:-3px 7px -3px -5px;
	position:relative;
	top:-2px;
	left:0;
	}

/*---------------------------------
	BREADCRUMBS
-----------------------------------*/
ul.breadcrumbs{
margin:10px 0;
padding:0;
line-height:0%;
font-size:0;
}

	ul.breadcrumbs li{
	list-style-type:none;
	margin:0;
	padding:0;
	display:inline-block;
	*display:inline; /* IE ONLY*/
	position:relative;
	zoom:1;
	line-height:100%;
	font-size:14px; /* 0.8em default to override font-size:0; on parent*/
	}
	
	ul.breadcrumbs li a{
	display:inline-block;
	*display:inline; /* IE ONLY*/
	position:relative;
	padding:5px 15px 5px 5px;
	font-size:0.9em;
	zoom:1;
	margin:0;
	background:url(img/icon-arrow-right.png) no-repeat right center;
	}
	
	ul.breadcrumbs li.last a{
	color:#333;
	cursor: default;
	text-decoration:none;
	background:none;
	}
	
	ul.breadcrumbs li.last a:hover{
	text-decoration:none;
	}
	
	/* Alternative Style */
	ul.breadcrumbs.alt1{
	border:1px solid transparent;
	font-size:0;
	}
	
	ul.breadcrumbs.alt1 li a{
	padding:10px 25px 10px 15px;
	background:url(img/breadcrumbs-bg.gif) no-repeat right center;
	text-decoration:none;
	border-top:1px solid #efefef;
	border-bottom:1px solid #efefef;
	font-size:12px;
	}
	
	ul.breadcrumbs.alt1 a:hover{
	text-decoration:underline;
	}
	
	ul.breadcrumbs.alt1 li.first a{
	border-left:1px solid #efefef;
	}
	
	ul.breadcrumbs.alt1 li.last a{
	background:none;
	border-right:1px solid #efefef;
	}
	
/*---------------------------------
	IMAGES
-----------------------------------*/
/*
	for img .style1, .style2, .style3
	view js/kickstart.js Image Style Helpers
*/
img{
margin:0;
padding:0;
display:inline-block;
position:relative;
zoom:1;
}

	img.align-left{float:left;margin:0 10px 5px 0;}
	img.align-right{float:right;margin:0 0 5px 10px;}
	img.full-width{clear:both;display:block;width:100%;height:auto;margin:0 0 10px 0;}

	span.img-wrap{
	display:inline-block;
	position: relative;
	top:0;
	left:0;
	zoom: 1;
	}
	
		span.img-inner{
		display:block;
		position:absolute;
		top:0;
		left:0;
		width: 100%;
		height:100%;
		}
	
		span.img-wrap img{
		display:block;
		padding:0;
		margin:0;
		}
	
	img.style1{/* DON'T Style This */}
	
		.img-wrap.style1{
		border:1px solid #ddd;
		padding:3px;
		background-color:#fff;
		margin-left:-3px;
		margin-top:-3px;
		margin-bottom:-3px;
		}

	img.style2{/* DON'T Style This */}
		
		.img-wrap.style2{
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		overflow: hidden;
		}
		
	img.style3{/* DON'T Style This */}
	
		.img-wrap.style3{
		margin-left:-3px;
		margin-top:-3px;
		margin-bottom:-3px;
		border:3px solid #efefef;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		overflow: hidden;
		-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
		-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
		}
		
	div.caption{
	background:#f5f5f5;
	border:1px solid #ddd;
	padding:3px;
	}
	
		div.caption img{
		display:block;
		padding:0;
		margin:0;
		}
	
		div.caption span{
		display:block;
		margin-top:3px;
		font-size:0.8em;
		color:#666;
		padding:0px 5px;
		}
		
	.gallery{}
	
		.gallery a{
		display:inline-block;
		position:relative;
		border:1px solid #ddd;
		background:#fff;
		padding:3px;
		margin:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
		}
		
		.gallery a img{
		display: block;
		position: relative;
		margin:0;
		padding:0;
		}
		
/*---------------------------------
	SLIDESHOW2
-----------------------------------*/
.slideshow-wrap{
clear:both;
margin:0;
padding:0;
position:relative;
top:0;
left:0;
overflow:hidden;
clear:both;
}

	.slideshow-inner{
	overflow:hidden;
	clear:both;
	position:relative;
	top:0;
	left:0;
	border:1px solid #efefef;
	}
	
	.slideshow{
	clear:both;
	margin:0;
	padding:0;
	width:auto;
	height:auto;
	overflow:hidden;
	}
	
		.slideshow li{
		list-style-type:none;
		margin:0;
		padding:0;
		float:left;
		display:block;
		}
		
			.slideshow img{vertical-align: bottom;}
			
	.slideshow-buttons{
	text-align:right;
	margin:3px 0 0 0;
	padding:0;
	}
	
		.slideshow-buttons li{display:inline;position:relative;top:0;left:0;line-height:100%;margin:0;padding:0;}
		.slideshow-buttons li.current a{background:#ddd;}
		
		.slideshow-buttons a{
		display:inline;
		position:relative;
		top:0;
		left:0;
		padding:1px 3px;
		margin:0 1px;
		line-height:100%;
		border:1px solid #efefef;
		text-decoration:none;
		font-size:0.8em;
		}

/*---------------------------------
	MEDIA
-----------------------------------*/
.video-placeholder,
.video-placeholder a{
position:relative;
top:0;
left:0;
display:inline-block;
*display:inline;
zoom:1;
margin:0;
padding:0;
text-decoration:none;
}
	.video-placeholder img{vertical-align: bottom;}
	.video-placeholder .icon{
	position:absolute;
	top:50%;
	left:50%;
	margin:-24px 0 0 -24px;
	}
	
	.video-placeholder:hover .icon{
	text-shadow:0px 0px 10px rgba(255,255,255,0.8), 0px 2px 2px rgba(0,0,0,1);
	cursor: pointer;
	}
	
iframe.map-placeholder{
border:1px solid #ccc;
margin:0;
padding:0;
overflow: hidden;
box-sizing: border-box;
}
	
.calendar{
text-align:center;
text-shadow:0px 1px 0px #fff;
color:#666;
border:1px solid #ddd;
background:#f5f5f5;
}
	.calendar h4#current-month{font-size:1em;margin:0;padding:2% 0;border-top:1px solid #fff;line-height:100%;font-weight:normal;}
	.calendar table{margin:0;border-collapse: collapse;border:0;}
	.calendar th, .calendar td{text-align:center;padding:0;font-weight: normal;line-height:100%;border:0;}
	.calendar th{width:14.2857%;padding:2% 0;border-bottom:1px solid #ddd;}
	.calendar td{background:#fff;padding:3% 0;}
	.calendar th.weekday{color:#999;font-size:0.7em;text-transform: uppercase;}
	.calendar td.other-month{color:#ccc;}
	.calendar td.current-month{background:#fff;color:#777;}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Mikhail-T
Web Developer
United States United States
Coding is awesome!

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 29 Nov 2011

Article Copyright 2011 by Mikhail-T
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1