This is a simple introduction tutorial that can help ASP.NET MVC3 beginners to create a first MVC application. Following the instructions and using code attached to this article, you will be able to create a simple MVC web application and extend it.
|
|
.dataTables_wrapper {
clear: both;
position: relative;
}
.dataTables_processing {
background-color: white;
border: 1px solid #DDDDDD;
color: #999999;
font-size: 14px;
height: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
padding: 14px 0 2px;
position: absolute;
text-align: center;
top: 50%;
width: 250px;
}
.dataTables_length {
float: left;
width: 40%;
}
.dataTables_filter {
float: right;
text-align: right;
width: 50%;
}
.dataTables_info {
float: left;
width: 60%;
}
.dataTables_paginate {
float: right;
text-align: right;
}
.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
color: #111111 !important;
cursor: pointer;
float: left;
height: 19px;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover, .paginate_disabled_next:hover, .paginate_enabled_next:hover {
text-decoration: none !important;
}
.paginate_disabled_previous:active, .paginate_enabled_previous:active, .paginate_disabled_next:active, .paginate_enabled_next:active {
outline: medium none;
}
.paginate_disabled_previous, .paginate_disabled_next {
color: #666666 !important;
}
.paginate_disabled_previous, .paginate_enabled_previous {
padding-left: 23px;
}
.paginate_disabled_next, .paginate_enabled_next {
margin-left: 10px;
padding-right: 23px;
}
.paginate_disabled_previous {
background: url("../images/back_disabled.png") no-repeat scroll left top transparent;
}
.paginate_enabled_previous {
background: url("../images/back_enabled.png") no-repeat scroll left top transparent;
}
.paginate_enabled_previous:hover {
background: url("../images/back_enabled_hover.png") no-repeat scroll left top transparent;
}
.paginate_disabled_next {
background: url("../images/forward_disabled.png") no-repeat scroll right top transparent;
}
.paginate_enabled_next {
background: url("../images/forward_enabled.png") no-repeat scroll right top transparent;
}
.paginate_enabled_next:hover {
background: url("../images/forward_enabled_hover.png") no-repeat scroll right top transparent;
}
table.display {
clear: both;
margin: 0 auto;
width: 100%;
}
table.display thead th {
border-bottom: 1px solid black;
cursor: pointer;
font-weight: bold;
padding: 3px 18px 3px 10px;
}
table.display tfoot th {
border-top: 1px solid black;
font-weight: bold;
padding: 3px 18px 3px 10px;
}
table.display tr.heading2 td {
border-bottom: 1px solid #AAAAAA;
}
table.display td {
padding: 3px 10px;
}
table.display td.center {
text-align: center;
}
.sorting_asc {
background: url("../images/sort_asc.png") no-repeat scroll right center transparent;
}
.sorting_desc {
background: url("../images/sort_desc.png") no-repeat scroll right center transparent;
}
.sorting {
background: url("../images/sort_both.png") no-repeat scroll right center transparent;
}
.sorting_asc_disabled {
background: url("../images/sort_asc_disabled.png") no-repeat scroll right center transparent;
}
.sorting_desc_disabled {
background: url("../images/sort_desc_disabled.png") no-repeat scroll right center transparent;
}
th:active {
outline: medium none;
}
table.display tr.odd.gradeA {
background-color: #DDFFDD;
}
table.display tr.even.gradeA {
background-color: #EEFFEE;
}
table.display tr.odd.gradeC {
background-color: #DDDDFF;
}
table.display tr.even.gradeC {
background-color: #EEEEFF;
}
table.display tr.odd.gradeX {
background-color: #FFDDDD;
}
table.display tr.even.gradeX {
background-color: #FFEEEE;
}
table.display tr.odd.gradeU {
background-color: #DDDDDD;
}
table.display tr.even.gradeU {
background-color: #EEEEEE;
}
tr.odd {
background-color: #E2E4FF;
}
tr.even {
background-color: white;
}
.dataTables_scroll {
clear: both;
}
.dataTables_scrollBody {
}
.top, .bottom {
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
padding: 15px;
}
.top .dataTables_info {
float: none;
}
.clear {
clear: both;
}
.dataTables_empty {
text-align: center;
}
tfoot input {
color: #444444;
margin: 0.5em 0;
width: 100%;
}
tfoot input.search_init {
color: #999999;
}
td.group {
background-color: #D1CFD0;
border-bottom: 2px solid #A19B9E;
border-top: 2px solid #A19B9E;
}
td.details {
background-color: #D1CFD0;
border: 2px solid #A19B9E;
}
.example_alt_pagination div.dataTables_info {
width: 40%;
}
.paging_full_numbers {
height: 22px;
line-height: 22px;
width: 400px;
}
.paging_full_numbers a:active {
outline: medium none;
}
.paging_full_numbers a:hover {
text-decoration: none;
}
.paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active {
border: 1px solid #AAAAAA;
border-radius: 5px 5px 5px 5px;
color: #333333 !important;
cursor: pointer;
margin: 0 3px;
padding: 2px 5px;
}
.paging_full_numbers a.paginate_button {
background-color: #DDDDDD;
}
.paging_full_numbers a.paginate_button:hover {
background-color: #CCCCCC;
text-decoration: none !important;
}
.paging_full_numbers a.paginate_active {
background-color: #99B3FF;
}
table.display tr.even.row_selected td {
background-color: #B0BED9;
}
table.display tr.odd.row_selected td {
background-color: #9FAFD1;
}
tr.odd td.sorting_1 {
background-color: #D3D6FF;
}
tr.odd td.sorting_2 {
background-color: #DADCFF;
}
tr.odd td.sorting_3 {
background-color: #E0E2FF;
}
tr.even td.sorting_1 {
background-color: #EAEBFF;
}
tr.even td.sorting_2 {
background-color: #F2F3FF;
}
tr.even td.sorting_3 {
background-color: #F9F9FF;
}
tr.odd.gradeA td.sorting_1 {
background-color: #C4FFC4;
}
tr.odd.gradeA td.sorting_2 {
background-color: #D1FFD1;
}
tr.odd.gradeA td.sorting_3 {
background-color: #D1FFD1;
}
tr.even.gradeA td.sorting_1 {
background-color: #D5FFD5;
}
tr.even.gradeA td.sorting_2 {
background-color: #E2FFE2;
}
tr.even.gradeA td.sorting_3 {
background-color: #E2FFE2;
}
tr.odd.gradeC td.sorting_1 {
background-color: #C4C4FF;
}
tr.odd.gradeC td.sorting_2 {
background-color: #D1D1FF;
}
tr.odd.gradeC td.sorting_3 {
background-color: #D1D1FF;
}
tr.even.gradeC td.sorting_1 {
background-color: #D5D5FF;
}
tr.even.gradeC td.sorting_2 {
background-color: #E2E2FF;
}
tr.even.gradeC td.sorting_3 {
background-color: #E2E2FF;
}
tr.odd.gradeX td.sorting_1 {
background-color: #FFC4C4;
}
tr.odd.gradeX td.sorting_2 {
background-color: #FFD1D1;
}
tr.odd.gradeX td.sorting_3 {
background-color: #FFD1D1;
}
tr.even.gradeX td.sorting_1 {
background-color: #FFD5D5;
}
tr.even.gradeX td.sorting_2 {
background-color: #FFE2E2;
}
tr.even.gradeX td.sorting_3 {
background-color: #FFE2E2;
}
tr.odd.gradeU td.sorting_1 {
background-color: #C4C4C4;
}
tr.odd.gradeU td.sorting_2 {
background-color: #D1D1D1;
}
tr.odd.gradeU td.sorting_3 {
background-color: #D1D1D1;
}
tr.even.gradeU td.sorting_1 {
background-color: #D5D5D5;
}
tr.even.gradeU td.sorting_2 {
background-color: #E2E2E2;
}
tr.even.gradeU td.sorting_3 {
background-color: #E2E2E2;
}
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}
.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}
.ex_highlight_row #example tr.even:hover {
background-color: #ECFFB3;
}
.ex_highlight_row #example tr.even:hover td.sorting_1 {
background-color: #DDFF75;
}
.ex_highlight_row #example tr.even:hover td.sorting_2 {
background-color: #E7FF9E;
}
.ex_highlight_row #example tr.even:hover td.sorting_3 {
background-color: #E2FF89;
}
.ex_highlight_row #example tr.odd:hover {
background-color: #E6FF99;
}
.ex_highlight_row #example tr.odd:hover td.sorting_1 {
background-color: #D6FF5C;
}
.ex_highlight_row #example tr.odd:hover td.sorting_2 {
background-color: #E0FF84;
}
.ex_highlight_row #example tr.odd:hover td.sorting_3 {
background-color: #DBFF70;
}
table.KeyTable td {
border: 3px solid transparent;
}
table.KeyTable td.focus {
border: 3px solid #3366FF;
}
table.display tr.gradeA {
background-color: #EEFFEE;
}
table.display tr.gradeC {
background-color: #DDDDFF;
}
table.display tr.gradeX {
background-color: #FFDDDD;
}
table.display tr.gradeU {
background-color: #DDDDDD;
}
div.box {
background-color: #E5E5FF;
border: 1px solid #8080FF;
height: 100px;
overflow: auto;
padding: 10px;
}
.number_range_filter {
width: 20px;
}
.date_range_filter {
width: 5.5em;
}
.search_init {
color: #999999;
}
|
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.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.
Submit an article or tip