Introduction and Overview ASP.NET

Introduction

This series of tutorials guides you through the steps required to create an ASP.NET Web Forms application using Visual Studio Express 2012 for Web and ASP.NET 4.5.
The application you'll create is named Wingtip Toys. It's a simplified example of a store front web site that sells items online. This tutorial series highlights several of the new features available in ASP.NET 4.5.
Comments are welcome, and we'll make every effort to update this tutorial series based on your suggestions.

Audience

The intended audience of this tutorial series is experienced developers who are new to ASP.NET Web Forms. A developer interested in this tutorial series should have the following skills:

•  Familiar with an object oriented programming language
•  Familiar with Web development concepts (HTML, CSS, JavaScript)
•  Familiar with relational database concepts
•  Familiar with n-tier architecture concepts

Application Features

The ASP.NET Web Form features presented in this series include:

•  The Web Application Project (not Web Site Project)
•  Web Forms
•  Master Pages, Configuration
•  Entity Framework Code First, LocalDB
•  Request Validation
•  Strongly Typed Data Controls, Model Binding, Data Annotations, and Value Providers
•  OAuth and OpenID
•  ASP.NET Membership, Configuration and Authorization
•  Unobtrusive Validation
•  Routing

Application Scenarios and Tasks

Tasks demonstrated in this first series include:

•  Creating, reviewing and running the new project
•  Creating the database structure
•  Initializing and seeding the database
•  Customizing the UI using styles, graphics and a master page
•  Adding pages and navigation
•  Displaying menu details and product data
•  Creating a shopping cart
•  Adding OpenID support
•  Adding a payment method
•  Including an administrator role and a user to the application
•  Restricting access to specific pages and folder
•  Uploading a file to the web application
•  Implementing input validation
•  Registering routes for the web application
•  Implementing error handling and error logging

Overview

If you are new to ASP.NET Web Forms but have familiarity with programming concepts, you have the right tutorial. If you are already familiar with ASP.NET Web Forms, you can benefit from this tutorial series by the new features available in ASP.NET 4.5. If you are unfamiliar with programming concepts and ASP.NET Web Forms, see Getting Started on the ASP.NET Web site.
The following screen shots provide a quick view of the ASP.NET Web forms application that you will create in this tutorial series. When you run the application from Visual Studio Express 2012 for Web, you will see the following web Home page.

Optimizing Your Asp.Net Pages for Faster Loading and Better Performance

If you read the internet and all of the websites dedicated to Asp.Net you will inevitably read about the wonders of the DataGrid, DataList, and Repeater controls. While each of these has its place, if you are only displaying data there is a much faster and more efficient means to do so.

Let's say you have a page that displays articles based on a query string. Take my article pages for instance. Each article is stored in a database and displayed on the page based on the unique id of the article as stored in the database.

A normal asp page execution procedure goes something like this. The code queries the database based on the Article I.D. and then brings back that information to the page where you display it in the fashion that you would like. This is a fairly straight forward approach with asp and is done all the time.

So how do we speed up our asp.net pages?
 1>: Use Asp.Net Caching!

This is a no-brainer, and I won't go into the brilliance or details of asp.net caching here because at the time of this writing Google has 2,780,000 articles on the topic. Basically instead of querying the database each time the page is loaded you only query the database once and load that result into the system cache. Subsequent calls to load the page retrieve the data from the cache as opposed to the database which gives you an instant and considerable performance boost. You can then set the cache for how long the cache should store the information as well as many other features. If you are not using the cache, you should be whenever possible!

2>: If possible, do NOT use the standard Asp.Net controls.
That's right. The standard asp.net controls are designed for rapid development and not page performance. They allow you to design pages that grab and display data very quickly but their actual performance suffers because of the extra overhead which is there for ease and speed of development time and not page execution speed.
Instead, create either a User Control or even better yet a Web Custom Control which is by far the fastest performance wise and really quite easy to create and use.

3>: Use an SqlDataReader or even better yet use a set based command for Sql Server data retrieval and simply execute that one command against the database.
An asp.net SqlDataReader is a fast forward only datareader that closes the connection after it reads the last set of results. Now for my article pages we are only returning 1 particular result. In this case we would opt for the set based command. If you had more than 1 result returned, in your table of contents for instance, you would use the SqlDataReader because you are returning multiple sets of results.
Set based commands are stored procedures that bring back data through parameters as opposed to a result set which then in turn needs to be looped through to obtain your data. So instead of writing your stored procedure like the following which brings back 1 result set:

Select Title, Body, Author
From Articles
Where ArtID = 215

We can write it using a set based command like this.
Create Procedure mysp_GetArticle

@Title varchar(200) Output,
@Body varchar(8000) Output,
@Author varchar(500) Output

As

Select @Title = Title, @Body = Body, @Author = Author
From Articles
Where ArtID = 215

GO

The above query will return only the three parameters called for and not a result or record set so you don't have to then walk through the returned record set that has only 1 result in it anyway. This second little process of work decreases your performance so you should avoid it whenever possible. Combine this technique with the asp.net cache.

4>: Use Classes and ArrayLists as opposed to returning an SqlDataReader.

Create a class and then if there are more than one set of results store those results into individual instantiations of that class. Finally store each of those classes into an ArrayList. You can then store only that ArrayList into the asp.net cache. So instead of getting the results back from a SqlDataReader when loading your page you get them from the ArrayList which is stored in the cache. Nice huh?
Finally... you want to incorporate all of these techniques into your final results which would be performed in the following manner and sequence.
On the first time the page loads, query the database and return all of your data storing it into individual classes. Then store each of those classes into an ArrayList. If you only have one single result you may store only the class into the cache. Then take your ArrayList and store it into the cache.
Next create a Web Custom Control and pass the cached ArrayList to the custom control and loop out your data using the HtmlTextWriter which is very fast. Remember each subsequent call to load the page will be called from the cache which stores your ArraList of classes or your single class.
Certainly it takes a significant amount of additional coding to do it in this fashion, especially when you take proper error handling into consideration, but if you follow this approach your pages will be screeching fast, you will immediately notice the difference, and your asp.net pages will execute in the proper sequence - Data handling in the PageLoad function and the html display in the PageRender function.

it allows a search parameter to be used on any part or parts of the server+database+schema+table names:

SET NOCOUNT ON
DECLARE @AllTables table (CompleteTableName nvarchar(4000))
DECLARE @Search nvarchar(4000)
       ,@SQL   nvarchar(4000)
SET @Search='login' --all rows
SET @SQL='select @@SERVERNAME+''.''+''?''+''.''+s.name+''.''+t.name from [?].sys.tables t inner join sys.schemas s on t.schema_id=s.schema_id WHERE @@SERVERNAME+''.''+''?''+''.''+s.name+''.''+t.name LIKE ''%'+ISNULL(@SEARCH,'')+'%'''

INSERT INTO @AllTables (CompleteTableName)
    EXEC sp_msforeachdb @SQL
SET NOCOUNT OFF
SELECT * FROM @AllTables ORDER BY 1

Create New DataBase

ALTER PROCEDURE [Company].[Create_New_DataBase]
(@bd_name varchar(50),
@SchmaName VARCHAR(255),
 @CompanyName VARCHAR(255))
as
BEGIN
    IF NOT EXISTS(SELECT database_id FROM sys.databases WHERE name =@bd_name)
    BEGIN
        EXEC('Create DATABASE'+' '+ @bd_Name)
        BEGIN
            EXEC('USE'+' '+ @bd_Name)
           
            EXEC('SELECT * INTO  '+@bd_Name+'.'+@SchmaName+'.Banner FROM BlueBubble.Contents.Banner
            where CompanyName='+@CompanyName)
        end
    end
else
    print 'This Data base Is allready Existing'
end

IFrame

CSS drop-shadows without images

Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

The basic technique

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}

The pseudo-elements need to be positioned and given explicit or implicit dimensions.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

The next step is to add a CSS3 box-shadow and apply CSS3 transforms. Different types of drop-shadow can be produced by varying these values and the types of transforms applied.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ.

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

The final core code is as shown below. There is just one more addition – max-width – to prevent the drop-shadow from extending too far below very wide elements.

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

No Firefox 3.0 problems this time

Some pseudo-element hacks require a work-around to avoid looking broken in Firefox 3.0 because that browser does not support the positioning of pseudo-elements. This usually involves implicitly setting their dimensions using offsets.
However, as Divya Manian pointed out to me, in this case we’re only using box-shadow – which Firefox 3.0 doesn’t support – and Firefox 3.0 will ignore the position:absolute declaration for the pseudo-elements. This leaves them with the default display:inline style. As a result, there is no problem explicitly setting the pseudo-element width and height because it won’t be applied to the pseudo-elements in Firefox 3.0.

Further enhancements

From this base there are plenty of ways to tweak the effect by applying skew to the pseudo-elements and modifying the styles of the element itself. A great example of this was shared by Simurai. By adding a border-radius to the element you can give the appearance of page curl.

.drop-shadow {
   -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
   border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

What Are Media Queries?

CSS3 has brought about a ton of fancy visual effects such as shadows and animations, but what about practical improvements? Is there anything about CSS3 that actually improves the way you can build websites from a usability standpoint?
The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.
User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.
That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.
This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.

How It Works

 

This may seem like it’s going to be a ton of extra work, and I’d be lying if I said that it’s a painless process, but the good news is that CSS and media queries do a lot of the heavy lifting for you. Let’s jump into Owltastic’s code a little to see how this all works.
For starters, you’re going to see a lot of expert use of floats and percentages used for sizing. Notice in the snippet below Meagan used percentages for both the width of the element and the margin. She’s also meticulous about telling you where these percentages come from in the form of a comment with some quick math.

.navigation li { float: left; display: block; width: 16.24%; /* 105/645 */ margin-right: 4.7%; /* 30.315/645 */ }

This definitely makes layout a little trickier, but it sets a good foundation for flexible page widths even before she gets to the media queries. However, the properties shown above are, for the most part, what you see being manipulated further within the media queries.

@media screen and (max-width: 800px) { .aside p { font-size: .75em; } .aside .section { background: none; padding: 0; margin-bottom: 2em; } .section .latest-shot { background: url(../img/bg-light.jpg); } .aside h1 { text-align: left; } .hentry h1 { font-size: 1.75em; } .hentry .meta p { float: none; margin: 0 0 5px 0; } .hentry .meta .bullet { display: none; } }

Here we can see that Meagan has targeted a maximum screen width of 800px and then defined a series of styles that apply directly to devices meeting that specification. From here, floats, margins, padding, display and even images are tweaked for optimum layout at that size.
A total of five different media queries are setup for different circumstances: max-width: 960px, 800px, 640px, 540px and 480px. Each of these is quite thorough in outlining specific behaviors for that screen size. Here is the section for max-width: 480px.

@media screen and (max-width: 480px) { .logo { margin-top: 30px; } .container { padding: 15px; } .navigation { margin: 0 0 15px 0; } .navigation li { width: auto; margin-bottom: 10px; margin-right: 3%; } .navigation li a { border-right: none; padding: 0; display: block; } .navigation li a em { display: none; } .hentry .floated-image { width: 100%; } }

One interesting trick here that you should pay special attention to is the use of fluid images. By setting the width of an image to 100%, it will fit into the width of its container and resize as the browser window changes. Ethan Marcotte explains this technique in-depth on his site . Be sure to resize your browser window on his site and watch the header images respond.