Click here to Skip to main content
15,891,849 members
Articles / Web Development / ASP.NET

Fast Postback and Model Binding

Rate me:
Please Sign up or sign in to vote.
4.86/5 (28 votes)
27 Apr 2014CPOL6 min read 37.3K   992   37  
Faster way to save data on postback and simplified model binding with ASP.NET controls
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
    background-image:url('Images/bg2.jpg');
    background-position:center top;
    font-family: "Helvetica Neue", Helvetica, Verdana, Arial, 'Segoe UI', Tahoma, Sans-Serif;
    font-size:12px;
    margin: 0;
    padding: 0;
    color: #424141;
}

.page {
    border:1px solid #cccccc;
    border-radius:5px;
    background-color:white;
    padding:0px 15px 0px 15px;
}
p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}
div {
    line-height: 1.6em;
}

br, hr{clear:both;}
hr {
    background-color:#d5e7fa;
    display: block;
    height: 2px;
    border: 0;
    border-top: 1px solid #5e98b5;
    margin: 1em 0;
    padding: 0;
}


/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4
{
    color: #000086;
}

h1, .h1
{
    font-family: "Helvetica Neue", Helvetica, Sans-Serif;
    font-size: 24px;
    font-weight:bold;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top:5px;
}
h2, .h2
{
    color: #24A0DA;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    margin:0 0 0 0;
    padding: 8px 0 3px 0px;
    text-rendering: optimizelegibility;
    width: auto;
    /*font-family: 'Open Sans', Arial, Helvetica, sans-serif, 'Segoe UI Symbol', 'Segoe UI', Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    font-size:20px;
    font-weight:normal;
    margin:0 0 0 0;
    padding: 8px 0 3px 10px;*/
}
    h2.title
{
    background:none;
    color:#862c2c;
}

h3, .h3
{
    color: #00F;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, 'Segoe WP', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: auto;
    line-height: normal;
    margin-bottom:3px;
    text-align: left;
    /*font-family: 'Segoe UI Symbol', 'Segoe UI', Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    font-size: 14px;
    font-weight:600;
    margin-bottom:3px;*/
}
h4
{
    font-size: 11px;
}
h5, h6
{
    font-size: 1em;
}

#main
{
    border:1px solid #cccccc;
    padding: 10px 20px 15px 20px;
    margin:auto;
    margin-bottom: 20px;
    margin-top: 10px;
    min-height:400px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
    
    background: #ffffff;/* e6eaee Fallback for web browsers that doesn't support RGBa */
    
    /* RGBa with 0.6 opacity */
    /*background: rgba(255, 255, 255, 0.9);*/
    width:958px;
    float:left;

	/*-webkit-border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;*/
	-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6);
}

#mainRight
{
    width:230px;
    float:right;
    padding:0px;
}
    #mainRight > div {
        border:1px solid #cccccc;
        padding: 10px 20px 15px 20px;
        margin-bottom: 6px;
        margin-top: 6px;
        _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
        
        background: #ffffff;/* Fallback for web browsers that doesn't support RGBa */
        /* RGBa with 0.6 opacity */
        /*background: rgba(255, 255, 255, 0.9);*/

	    /*-webkit-border-radius: 8px 8px 8px 8px;
	    -moz-border-radius: 8px 8px 8px 8px;
	    border-radius: 8px 8px 8px 8px;*/
	    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	    -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	    box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6);
    }
    #mainRight a > div {
        padding:5px;
    }
    #mainRight a > div h3 {
        margin-top:2px;
    }
#header
{
    background: #fff;
    opacity:0.85;

    margin: 5px 0px 0px 0px;
    color: #000;
    padding: 0;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
}

#footer
{
    margin:auto;
    color: #999;
    font-family:Verdana, sans-serif;
    padding-bottom: 10px;
    text-align: center;
    line-height: normal;
    font-size: 10px;
    width:1000px;
}

.loadingBar
{
    background-color:#feffff; 
    border:1px solid #057294;
    color:#000086;
    font-size:14px;
    font-weight:bold;
    height:30px; 
    width:360px; 
    left:50%;
    margin-left:-180px;
    text-align:center; 
    vertical-align:middle; 
    padding:25px;
    position:absolute;
    z-index:10000;
	opacity:0.8; 
	filter:alpha(opacity=80);

	-webkit-border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	border-radius: 15px 15px 15px 15px;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

.btnBullet
{
    text-decoration:none;
    background-image:url('images/btnBulletBk.png');
    background-repeat:no-repeat;
    display:block;
    text-align:left;
    padding:5px 10px 8px 32px;
    color:#333399;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
}

.lCase { text-transform:lowercase; }
.tCase { text-transform:capitalize; }
.uCase { text-transform:uppercase; }
.greyBox{background-color: #f4f6ff; border: 1px solid #cccdff;}

.window {background-color:#ffffff; border:2px solid #7777cc; display:none; padding:20px; position:absolute; z-index:10000;}

/* Pager Related. */
td.pager { background:url('images/Light_Blue.jpg') repeat-x; border-top:1px solid #aaaadd; text-align: center;}
td.pager > span a { display:inline-block; }

div#pageLabel {  }
div#pageLabel:hover .pages { display:block; }
div.pages { background-color:#eeeeff; border:1px solid #cccccc; display:none; margin-top:10px; position:absolute; width:900px;}

/* Home Page Message Related. */
ul.msg li { list-style-image:url('images/blue-bullets.jpg'); line-height:22px; vertical-align:top; padding:2px;}

a img {
    border:1px none #cccccc;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */

.mainRight {
    border:1px none #cccccc;
    float:left; 
    padding:15px; 
    width:550px;
    
    background: #e2e2e2;
	background: -webkit-linear-gradient(top, #ffffff 0%, #aacaff 50%, #ffffff 100%);
	background: -moz-linear-gradient(top, #ffffff 0%, #aacaff 50%, #ffffff 100%);
	background: -o-linear-gradient(top, #ffffff 0%, #aacaff 50%, #ffffff 100%);
	background: -ms-linear-gradient(top, #ffffff 0%, #aacaff 50%, #ffffff 100%);
	background: linear-gradient(top, #ffffff 0%, #aacaff 50%, #ffffff 100%);
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.6);
}

input[type="text"].login, input[type="password"].login {
    border-top: 0px none transparent;
    border-left: 0px none transparent;
    border-right: 0px none transparent;
    border-bottom: 1px solid #aabbee;
    background-color:transparent;
    color:#000086;
    font-weight:bold;
    outline: none;
}

.fl, .float-left {
    float: left;
}
.fr, .float-right {
    float: right;
}

.page
{
    width: 1000px;
    margin-top:0px;
    margin-left: auto;
    margin-right: auto;
}

.box
{
    background-color:#f7f6ff; 
    border:1px solid #d6d6ff;
    padding:10px;
	/*-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;*/
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
    .box h3 {
        margin-top:4px;
    }

.msgBox
{
    background-color:#fff3f3; 
    border:2px solid #ffd6d6;
    border-style:double;
    color:#cc3333;
    padding:15px;
}

#header
{
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

#header h1
{
    font-weight: bold;
    padding: 0;
    margin: -15px 0px 0px 0px;
    color: #060b85;
    border: none;
    font-size: 32px !important;
}
#header h3
{
    font-weight: bold;
    padding: 0;
    margin: -8px 0px 0px 0px;
    /*color: #060ba5;*/
    color:#a33030;
    border: none;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

select
{
    border: 1px solid #82bbf8;    
}

input[type="text"], input[type="email"], input[type="number"], input[type="url"]
{
    width: 150px;
    border: 1px solid #82bbf8;
}

input[type="password"] 
{
    width: 150px;
    border: 1px solid #82bbf8;
}

textarea
{
    font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
    border: 1px solid #82bbf8;  
}

.CenterScreen
{
    text-align:center;
    vertical-align:middle;
    left:50%;
    margin-left:-50%;
    margin-top:-50%;
    position:absolute;
    top:50%;
}

.shaded
{
    background-color:#f8f8f8;
    color:#444489;
}
/* TABLE
----------------------------------------------------------*/


table.List
{
  border-collapse: collapse;
  padding:0;
}
    table.List tr {
        padding:0;
        border-bottom:1px solid #82bbf8;
    }
    table.List td {
        padding: 6px;
    }

    table.List th {
        color:white;
        padding: 6px 5px;
        text-align: left;
        background-color: #000056;
    }

    table.List tr:nth-child(odd) td {
        background-color: #fbfbfb;
    }
    table.List tr:nth-child(even) td {
        background-color: #e8eef4;
    }

/* MISC  
----------------------------------------------------------*/
.bold
{
    font-weight: bold;
}

.clear
{
    clear: both;
}

.error
{
    color:Red !important;
}

div#title
{
    background-color:#dddff8;
    border-top:3px double #777777;
    border-bottom:3px double #777777;
    display:block;
    text-align:left;
}

a:link
{
    color:Blue;
    text-decoration:none;
}

a:visited
{
    color:#2222ff;
}

a:hover, a div:hover
{
    background-color:#057294;
    color:#fff;
    text-decoration:none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
    margin: 1em 0 0 0;
}

.display-field,
.editor-field
{
    /*margin:0.5em 0 0 0;*/
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}


input[type="button"], input[type="submit"]
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}
.btn, input[type="button"], input[type="submit"] {
	color: #ffffff;
	border: 1px solid #057294;
	text-decoration: none;
	position: relative;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	background: #057294;
	background: -webkit-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -moz-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -o-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -ms-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: linear-gradient(top, #179cc6 0%, #057294 100%);
	/*-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;*/
	-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.6);
    padding: 3px 15px 3px 15px;
}
.btn:hover, input[type="button"]:hover, input[type="submit"]:hover  {
	background: #179cc6;
	background: -webkit-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -moz-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -o-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -ms-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: linear-gradient(top, #057294 0%, #179cc6 100%);
}

/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 700px;
  height: 280px;
  overflow: hidden;
  position: relative;
  margin: auto;
}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;}
 
ul.slideshow li.show {
  z-index: 500;}
 
ul.slideshow img {
  border: 1px solid #cccccc;
  height:250px;
  width:700px;
}
 
#slideshow-caption {
  width: 700px;
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 10px 0px 10px 0px; 
  background: transparent;  
  text-align:center;
  z-index: 1000;}
 
#slideshow-caption p {
    background:#2a6b2a;
  padding: 5px 5px 5px 5px;
  font: normal 130% arial, sans-serif;
  font-weight:bold;
  color: #FFF;}

.messagebox {
    
}
 

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
Architect
India India
Anurag Gandhi is a Freelance Developer and Consultant, Architect, Blogger, Speaker, and Ex Microsoft Employee. He is passionate about programming.
He is extensively involved in Asp.Net Core, MVC/Web API, Node/Express, Microsoft Azure/Cloud, web application hosting/architecture, Angular, AngularJs, design, and development. His languages of choice are C#, Node/Express, JavaScript, Asp .NET MVC, Asp, C, C++. He is familiar with many other programming languages as well. He mostly works with MS SQL Server as the preferred database and has worked with Redis, MySQL, Oracle, MS Access, etc. also.
He is active in programming communities and loves to share the knowledge with others whenever he gets the time for it.
He is also a passionate chess player.
Linked in Profile: https://in.linkedin.com/in/anuraggandhi
He can be contacted at soft.gandhi@gmail.com

Comments and Discussions