Programming Discussions

The Constructions of ASP.NET web pages

2010-09-07T19:51:00.001-07:00

If you’ve ever built a model from Lego bricks, you’re well prepared to start building real ASP.NET web pages. ASP.NET offers features that allow web developers to build parts of web pages independently, then put them together later to form complete pages.
The content we’re creating through our work with ASP.NET is almost never static. At design time, we tend to think in terms of templates that contain placeholders for the content that will be generated dynamically at runtime. And to fill those placeholders, we can either use one of the many controls ASP.NET provides, or build our own.

In this chapter of the fabulous new edition of Build Your Own ASP.NET 3.5 Web Site Using C# & VB, we’ll discuss many of the objects and techniques that give life and color to ASP.NET web pages, including:

web forms
HTML server controls
web server controls
web user controls
master pages
handling page navigation
styling pages and controls with CSS

If the list looks intimidating, don’t worry—all of this is far easier to understand than it might first appear. And to help you along, you can now visit the book’s web page to download the first four chapters for free! In fact, it’s highly recommended that you do have the downloaded pdf handy if you want to take part in the practical side of this chapter, as we work through some exercises that necessitate the creation of folders and files as described in Chapter 1.

Web Forms

As you know, there’s always new terminology to master when you’re learning new technologies. The term used to describe an ASP.NET web page is web form, and this is the central object in ASP.NET development. At first glance, web forms look much like HTML pages, but in addition to static HTML content, they contain ASP.NET-specific elements, and code that executes on the server side.
Every web form includes a <form runat="server"> tag, which contains the ASP.NET-specific elements that make up the page. Multiple forms aren’t supported. The basic structure of a web form is shown here:

<%@ Page Language="language" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> … code block… </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Page Title</title> </head> <body> <form id="form1" runat="server"> … user interface elements… </form> </body> </html>

To access and manipulate a web form programmatically, we use the System.Web.UI.Page class. We must mention the class explicitly in the code-behind file. In situations in which we’re not using code-behind files (that is, when we’re writing all the code inside the .aspx file instead), the Page class is still used—we just don’t see it.
We can use a range of user interface elements inside the form—including typical static HTML code—but we can also use elements whose values or properties can be generated or manipulated on the server either when the page first loads, or when the form is submitted. These elements—which, in ASP.NET parlance, are called controls—allow us to reuse common functionality, such as the page header, a calendar, a shopping cart summary, or a “Today’s Quote” box, for example, across multiple web forms. There are several types of controls in ASP.NET:

HTML server controls
web server controls
web user controls
master pages

There are significant technical differences between these types of controls, but what makes them similar is the ease with which we can integrate and reuse them in our web sites. Let’s take a look at them one by one.

HTML Server Controls

HTML server controls are outwardly identical to plain old HTML tags, but include a runat="server"runat="server" attribute. attribute. This gives the ASP.NET runtime control over the HTML server controls, allowing us to access them programmatically. For example, if we have an <a> tag in a page and we want to be able to change the address to which it links dynamically, using VB or C# code, we use the
A server-side HTML server control exists for each of HTML’s most common elements. Creating HTML server controls is easy: we simply stick a runat="server" attribute on the end of a normal HTML tag to create the HTML control version of that tag. The complete list of current HTML control classes and their associated tags is given in Table 1.

Table 1. HTML control classes

Class	Associated Tags
`HtmlAnchor`	`<a runat="server">`
`HtmlButton`	`<button runat="server">`
`HtmlForm`	`<form runat="server">`
`HtmlImage`	`<img runat="server">`
`HtmlInputButton`	`<input type="submit" runat="server">`
`HtmlInputCheckBox`	`<input type="reset" runat="server">`
	`<input type="button" runat="server">`
	`<input type="checkbox" runat="server">`
`HtmlInputFile`	`<input type="file" runat="server">`
`HtmlInputHidden`	`<input type="hidden" runat="server">`
`HtmlInputImage`	`<input type="image" runat="server">`
`HtmlInputRadioButton`	`<input type="radio" runat="server">`
`HtmlInputText`	`<input type="text" runat="server">`
`HtmlSelect`	`<input type="password" runat="server">`
`HtmlSelect`	`<select runat="server">`
`HtmlTable`	`<table runat="server">`
`HtmlTableRow`	`<tr runat="server">`
`HtmlTableCell`	`<td runat="server">`
`HtmlTextArea`	`<th runat="server">`
`HtmlTextArea`	`<textarea runat="server">`
`HtmlGenericControl`	`<span runat="server">`
	`<div runat="server">`
	All other HTML tags

All the HTML server control classes are contained within the System.Web.UI.HtmlControls namespace. As they’re processed on the server side by the ASP.NET runtime, we can access their properties through code elsewhere in the page. If you’re familiar with JavaScript, HTML, and CSS, you’ll know that manipulating text within HTML tags, or even manipulating inline styles within an HTML tag, can be cumbersome and error-prone. HTML server controls aim to solve these problems by allowing you to manipulate the page easily with your choice of .NET language—for instance, using VB or C#.
Using the HTML Server Controls
Nothing explains the theory better than a simple, working example. Let’s create a simple survey form that uses the following HTML server controls:

HtmlForm
HtmlButton
HtmlInputText
HtmlSelect

We’ll begin by creating a new file named Survey.aspx. Create the file in the LearningASP\VB or LearningASP\CS folder that we cover in Chapter 1 of the downloadable pdf of this book. For the purpose of the exercises in this chapter we won’t be using a code-behind file, so don’t check the Place code in a separate file checkbox when you create the form.
Update the automatically generated file with the following code to create the visual interface for the survey:
Visual Basic LearningASP\VB\Survey_01.aspx (excerpt)

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using ASP.NET HTML Server Controls</title> </head> <body> <form id="form1" runat="server"> <div> <h1>Take the Survey!</h1>  <p> Name:<br /> <input type="text" id="name" runat="server" /> </p>  <p> Email:<br /> <input type="text" id="email" runat="server" /> </p>  <p> Which server technologies do you use?<br /> <select id="serverModel" runat="server" multiple="true"> <option>ASP.NET</option> <option>PHP</option> <option>JSP</option> <option>CGI</option> <option>ColdFusion</option> </select> </p>  <p> Do you like .NET so far?<br /> <select id="likeDotNet" runat="server"> <option>Yes</option> <option>No</option> </select> </p>  <p> <button id="confirmButton" OnServerClick="Click" runat="server">Confirm</button> </p>  <p> <asp:Label id="feedbackLabel" runat="server" /> </p> </div> </form> </body> </html>

The C# version is identical except for the first line—the page declaration:
C# LearningASP\CS\Survey_01.aspx (excerpt)

<%@ Page Language="C#" %>
 …

From what we’ve already seen of HTML controls, you should have a good idea of the classes we’ll be working with in this page. All we’ve done is place some HtmlInputTextcontrols, an HtmlButtoncontrol, and an HtmlSelect control inside the obligatory HtmlForm control. We’ve also added a Label control, which we’ll use to give feedback to the user.

    TIP: HTML Server Controls in Action

    Remember, HTML server controls are essentially HTML tags with the runat="server" attribute. In most cases, you’ll also need to assign them IDs, which will enable you to use the controls in your code.

    NOTE: Validation Warnings

    You may notice that Visual Web Developer will display a validation warning about the multiple=”true” attribute value on the selectelement. In XHTML 1.0, the select element only supports multiple=”multiple” and the IDE dutifully reports the problem. However, since this is a server control—it has a runat="server" attribute—you must specify multiple=”true”, otherwise the page will not compile and execute.

    When you eventually test this page, you’ll be happy to note that ASP.NET will change the attribute value to multiple=”multiple” when the HTML is generated and the page is displayed.



    When it’s complete, and you view it in Visual Web Developer’s Design mode, the Survey.aspx web form will resemble Figure 1. Note that you can’t execute the form yet, because it’s missing the button’s Clickevent handler that we’ve specified using the OnServerClick attribute on the HtmlButton control.





    When a user clicks on the Confirm button, we’ll display the submitted responses in the browser. In a real application, we’d probably be more likely to save this information to a database, and perhaps show the results as a chart. Whatever the case, the code for the Click event handler method below shows how we’d access the properties of the HTML controls:

    Visual Basic LearningASP\VB\Survey_02.aspx (excerpt)

<script runat="server"> Sub Click(ByVal s As Object, ByVal e As EventArgs) Dim i As Integer feedbackLabel.Text = "Your name is: " & name.Value & "<br />" feedbackLabel.Text += "Your email is: " & email.Value & _ "<br />" feedbackLabel.Text += "You like to work with:<br />" For i = 0 To serverModel.Items.Count - 1 If serverModel.Items(i).Selected Then feedbackLabel.Text += " - " & _ serverModel.Items(i).Text & "<br />" End If Next i feedbackLabel.Text += "You like .NET: " & likeDotNet.Value End Sub </script>

C# LearningASP\CS\Survey_02.aspx (excerpt)

<script runat="server"> void Click(Object s, EventArgs e) { feedbackLabel.Text = "Your name is: " + name.Value + "<br />"; feedbackLabel.Text += "Your email is: " + email.Value + "<br />"; feedbackLabel.Text += "You like to work with:<br />"; for (int i = 0; i <= serverModel.Items.Count - 1; i++) { if (serverModel.Items[i].Selected) { feedbackLabel.Text += " - " + serverModel.Items[i].Text + "<br />"; } } feedbackLabel.Text += "You like .NET: " + likeDotNet.Value; } </script>

    As with the examples we’ve seen in previous chapters, we start by placing our VB and C# code inside a server-side script block within the <script> part of the page. Next, we create a new Click event handler that takes the two usual parameters. Finally, we use the Label control to display the user’s responses within the page.



    Once you’ve written the code, save your work and test the results in your browser. Enter some information and click the button. To select multiple options in the serverModel option box, hold down Ctrl as you click on your preferences. The information you enter should appear at the bottom of the page when the Confirm button is clicked, as shown in Figure 2.



    In conclusion, working with HTML server controls is really simple. All you need to do is assign each control an ID, and add the runat="server" attribute. Then, you can simply access and manipulate the controls using VB or C# code on the server side.

Web Server Controls

    Web server controls can be seen as advanced versions of HTML server controls. Web server controls are those that generate content for you—you’re no longer in control of the HTML being used. While having good knowledge of HTML is useful, it’s not a necessity for those working with web server controls.



    Let’s look at an example. We can use the Label web server control to place simple text inside a web form. To change the Label’s text from within our C# or VB code, we simply set its Text property like so:

    Visual Basic

    myLabel.Text = "Mickey Mouse"

    Similarly, to add a text box to our form, we use the TextBox web server control. Again, we can read or set its text using the Text property:

    C#

    username = usernameTextBox.Text;

    Though we’re applying the TextBox control, ASP.NET still uses an input element behind the scenes; however, we no longer have to worry about this detail. With web server controls, you no longer need to worry about translating the needs of your application into elements you can define in HTML—you can let the ASP.NET framework do the worrying for you.



    Unlike HTML server controls, web server controls don’t have a direct, one-to-one correspondence with the HTML elements they generate. For example, we can use either of two web server controls—the DropDownList control, or the ListBox control—to generate a select element.

    Web server controls follow the same basic pattern as HTML tags, but the tag name is preceded by asp:, and is capitalized using Pascal Casing. Pascal Casing is a form that capitalizes the first character of each word (such as TextBox). The object IDs are usually named using Camel Casing, where the first letter of each word except the first is capitalized (e.g. usernameTextBox).

    Consider the following HTML input element, which creates an input text box:

    <input type="text" name="usernameTextBox" size="30" />

    The equivalent web server control is the TextBox control, and it looks like this:

    <asp:TextBox id="usernameTextBox" runat="server" Columns="30"></asp:TextBox>

    Remember that, unlike any normal HTML that you might use in your web forms, web server controls are first processed by the ASP.NET engine, where they’re transformed to HTML. A side effect of this approach is that you must be very careful to always include closing tags (the </asp:TextBox> part above). The HTML parsers of most web browsers are forgiving about badly formatted HTML code, but ASP.NET is not. Remember that you can use the shorthand syntax (/>) if nothing appears between your web server control’s opening and closing tags. As such, you could also write this TextBox like so:

    <asp:TextBox id="usernameTextBox" runat="server" Columns="30" />

    To sum up, the key points to remember when you’re working with web server controls are:

Web server controls must be placed within a <form runat="server"> tag to function properly.

Web server controls require the runat="server" attribute to function properly.

We include web server controls in a form using the asp: prefix.

    There are more web server controls than HTML controls. Some offer advanced features that simply aren’t available using HTML alone, and some generate quite complex HTML code for you. We’ll meet many web server controls as we work through this and future chapters in the book. For more information on web server controls, including the properties, methods, and events for each, have a look at Appendix A of this book.

    Standard Web Server Controls

    The standard set of web server controls that comes with ASP.NET mirrors the HTML server controls in many ways. However, web server controls offer some new refinements and enhancements, such as support for events and view state, a more consistent set of properties and methods, and more built-in functionality. In this section, we’ll take a look as some of the controls you’re most likely to use in your day-to-day work.

    Remember to use the .NET Framework SDK Documentation whenever you need more details about any of the framework’s classes (or controls). You can access the documentation from the Help > IndexIndex Results window. For example, you’ll find that there are two classes named Label, located in the System.Web.UI.WebControls and System.Windows.Forms namespaces, as Figure 3 illustrates. You’ll most likely be interested in the version of the class situated in the WebControls namespace. menu item in Visual Web Developer. To find a class, simply search for the class’s name. If there are many classes with a given name in different namespaces, you’ll be able to choose the one you want from the



    Label

    The easiest way to display static text on your page is simply to add the text to the body of the page without enclosing it in a tag. However, if you want to modify the text displayed on a page using ASP.NET code, you can display your text within a Label control. Here’s a typical example:

    <asp:Label id="messageLabel" Text="" runat="server" />

The following code sets the Text property of the Label control to display the text “Hello World”:
Visual Basic

Public Sub Page_Load() messageLabel.Text = "Hello World" End Sub
C#
public void Page_Load() { messageLabel.Text = "Hello World"; }

Reading this Page_Load handler code, we can see that when the page first loads, the Text property of the Label control with the id of message will be set to “Hello World.”

Literal
This is perhaps the simplest control in ASP.NET. If you set Literal’s Text property, it will simply insert that text into the output HTML code without altering it. Unlike Label, which has similar functionality, Literal doesn’t wrap the text in tags that would allow the setting of style information.
TextBox
The TextBox control is used to create a box in which the user can type or read standard text. You can use the TextModeproperty to set this control to display text in a single line, acrossmultiple lines, or to hide the text being entered (for instance, inHTML password fields). The following code shows how we might use it ina simple login page:

<p> Username: <asp:TextBox id="userTextBox" TextMode="SingleLine" Columns="30" runat="server" /> </p> <p> Password: <asp:TextBox id="passwordTextBox" TextMode="Password" Columns="30" runat="server" /> </p> <p> Comments: <asp:TextBox id="commentsTextBox" TextMode="MultiLine" Columns="30" Rows="10" runat="server" /> </p>

In each of the instances above, the TextMode attribute dictates the kind of text box that’s to be rendered.
HiddenField
HiddenField is a simple control that renders an input element whose type attribute is set to hidden. We can set its only important property, Value.
Button
By default, the Button control renders an input element whose type attribute is set to submit. When a button is clicked, the form containing the button is submitted to the server for processing, and both the ClickCommand events are raised. and

The following markup displays a Button control and a Label:

<asp:Button id="submitButton" Text="Submit" runat="server" OnClick="WriteText" /> <asp:Label id="messageLabel" runat="server" />

Notice the OnClick attribute on the control. When the button is clicked, the Click event is raised, and the WriteText subroutine is called. The WriteText subroutine will contain the code that performs the intended function for this button, such as displaying a message to the user:
Visual Basic

Public Sub WriteText(s As Object, e As EventArgs) messageLabel.Text = "Hello World" End Sub

public void WriteText(Object s, EventArgs e) { messageLabel.Text = "Hello World"; }

It’simportant to realize that events are associated with most web servercontrols, and the basic techniques involved in using them, are the sameevents and techniques we used with the Click event of the ButtonWebControl base class. control. All controls implement a standard set of events because they all inherit from the
ImageButton
An ImageButton control is similar to a Button control, but it uses an image that we supply in place of the typical system button graphic. Take a look at this example:

<asp:ImageButton id="myImgButton" ImageUrl="myButton.gif" runat="server" OnClick="WriteText" /> <asp:Label id="messageLabel" runat="server" />

The Click event of the ImageButton receives the coordinates of the point at which the image was clicked:
Visual Basic

Public Sub WriteText(s As Object, e As ImageClickEventArgs) messageLabel.Text = "Coordinate: " & e.X & "," & e.Y End Sub

public void WriteText(Object s, ImageClickEventArgs e) { messageLabel.Text = "Coordinate: " + e.X + "," + e.Y; }

LinkButton
A LinkButton control renders a hyperlink that fires the Click event when it’s clicked. From the point of view of ASP.NET code, LinkButtons can be treated in much the same way as buttons, hence the name. Here’s LinkButton in action:

<asp:LinkButton id="myLinkButon" Text="Click Here"   
   runat="server" />

HyperLink
The HyperLink control creates on your page a hyperlink that links to the URL in the NavigateUrlLinkButton control, which offers features such as Click events and validation, HyperLinks are meant to be used to navigate from one page to the next: property. Unlike the

<asp:HyperLink id="myLink" NavigateUrl="http://www.sitepoint.com/" 
   ImageUrl="splogo.gif" runat="server">SitePoint</asp:HyperLink>

If it’s specified, the ImageUrlattribute causes the control to display the specified image, in whichcase the text is demoted to acting as the image’s alternate text.
CheckBox
You can use a CheckBox control to represent a choice that can have only two possible states—checked or unchecked:

<asp:CheckBox id="questionCheck" Text="Yep, ASP.NET is cool!" 
   Checked="True" runat="server" />

The main event associated with a CheckBox is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The Checked property is True if the checkbox is checked, and False otherwise.
RadioButton
A RadioButton is a lot like a CheckBox, except that RadioButtons can be grouped to represent a set of options from which only one can be selected. Radio buttons are grouped together using the GroupName property, like so:

<asp:RadioButton id="sanDiego" GroupName="City" Text="San Diego" runat="server" /><br /><asp:RadioButton id="boston" GroupName="City" Text="Boston" runat="server" /><br /><asp:RadioButton id="phoenix" GroupName="City" Text="Phoenix" runat="server" /><br /><asp:RadioButton id="seattle" GroupName="City" Text="Seattle" runat="server" />

Like the CheckBox control, the main event associated with RadioButtons is the CheckChanged event, which can be handled with the OnCheckChanged attribute. The other control we can use to display radio buttons is RadioButtonList, which we’ll also meet in this chapter.
Image
An Image control creates an image that can be accessed dynamically from code; it equates to the tag in HTML. Here’s an example:

<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server" 
   AlternateText="description" />

    ImageMap

    The ImageMap control generates HTML to display images that have certain clickable regions called hot spots. Each hot spot reacts in a specific way when it’s clicked by the user.

    These areas can be defined using three controls, which generate hot spots of different shapes: CircleHotSpot, RectangleHotSpot, and PolygonHotSpot. Here’s an example that defines an image map with two circular hot spots:

<asp:ImageMap ID="myImageMap" runat="server" ImageUrl="image.jpg"> <asp:CircleHotSpot AlternateText="Button1" Radius="20" X="50" Y="50" /> <asp:CircleHotSpot AlternateText="Button2" Radius="20" X="100" Y="50" /> </asp:ImageMap>

    Table 2. Possible values of HotSpotMode

`HotSpotMode` value	Behavior when hot spot is clicked
`Inactive`	none
`Navigate`	The user is navigated to the specified URL.
`NotSet`	When this value is set for a `HotSpot`, the behavior is inherited from the parent `ImageMap`; if the parent `ImageMap` doesn’t specify a `defaultvalue`, `Navigate` is set.
`NotSet`	When it’s set for an `ImageMap`, this value is effectively equivalent to `Navigate`.
`PostBack`	The hot spot raises the `Clickevent` that can be handled on the server side to respond to the user action.

    To configure the action that results when a hot spot is clicked by the user, we set the HotSpotModeImageMap control, or the HotSpotMode property of the individual hot spot objects, or both, using the values shown in Table 2. If the HotSpotMode property is set for the ImageMap control as well as for an individual hot spot, the latter property will override that set for the more general ImageMap control. property of the

    The Microsoft .NET Framework SDK Documentation for the ImageMap class and HotSpotMode enumeration contains detailed examples of the usage of these values.

    PlaceHolder

    The PlaceHolder control lets us add elements at a particular place on a page at any time, dynamically, through our code. Here’s what it looks like:

    <asp:PlaceHolder id="myPlaceHolder" runat="server" />

    The following code dynamically adds a new HtmlButton control within the placeholder:



    Visual Basic

Public Sub Page_Load() Dim myButton As HtmlButton = New HtmlButton() myButton.InnerText = "My New Button" myPlaceHolder.Controls.Add(myButton) End Sub

public void Page_Load() { HtmlButton myButton = new HtmlButton(); myButton.InnerText = "My New Button"; myPlaceHolder.Controls.Add(myButton); }

Panel

The Panel control functions similarly to the div element in HTML, in that it allows the set of items that resides within the tag to be manipulated as a group. For instance, the Panel could be made visible or hidden by a Button’s Click event:

<asp:Panel id="myPanel" runat="server"> <p>Username: <asp:TextBox id="usernameTextBox" Columns="30" runat="server" /></p> <p>Password: <asp:TextBox id="passwordTextBox" TextMode="Password" Columns="30" runat="server" /></p> </asp:Panel> <asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel" runat="server" />

The code above places two TextBox controls within a Panel control. The Button control is outside of the panel. The HidePanel subroutine would then control the Panel’s visibility by setting its VisibleFalse: property to

Visual Basic

Public Sub HidePanel(s As Object, e As EventArgs) myPanel.Visible = False End Sub

public void HidePanel(Object s, EventArgs e)   

    {   

     myPanel.Visible = false;   

    }

    In this case, when the user clicks the button, the Click event is raised and the HidePanel subroutine is called, which sets the Visible property of the Panel control to False.

    List Controls



    Here, we’ll meet the ASP.NET controls that display simple lists of elements: ListBox, DropDownList, CheckBoxList, RadioButtonList, and BulletedList.

    DropDownList

    A DropDownList control is similar to the HTML select element. The DropDownList control allows you to select one item from a list using a drop-down menu. Here’s an example of the control’s code:

<asp:DropDownList id="ddlFavColor" runat="server">   

     <asp:ListItem Text="Red" value="red" />   

     <asp:ListItem Text="Blue" value="blue" />   

     <asp:ListItem Text="Green" value="green" />   

    </asp:DropDownList>

    The most useful event that this control provides is SelectedIndexChanged. This event is also exposed by other list controls, such as the CheckBoxList and RadioButtonList controls, allowing for easy programmatic interaction with the control you’re using. These controls can also be bound to a database and used to extract dynamic content into a drop-down menu.

    ListBox

    A ListBox control equates to the HTML select element with either the multiple or size attribute set (size would need to be set to a value of 2 or more). If you set the SelectionMode attribute to Multiple, the user will be able to select more than one item from the list, as in this example:

<asp:ListBox id="listTechnologies" runat="server" SelectionMode="Multiple"> <asp:ListItem Text="ASP.NET" Value="aspnet" /> <asp:ListItem Text="JSP" Value="jsp" /> <asp:ListItem Text="PHP" Value="php" /> <asp:ListItem Text="CGI" Value="cgi" /> <asp:ListItem Text="ColdFusion" Value="cf" /> </asp:ListBox>

RadioButtonList

Like the RadioButton control, the RadioButtonList control represents radio buttons. However, the RadioButtonList control represents a list of radio buttons and uses more compact syntax. Here’s an example:

<asp:RadioButtonList id="favoriteColor" runat="server"> <asp:ListItem Text="Red" Value="red" /> <asp:ListItem Text="Blue" Value="blue" /> <asp:ListItem Text="Green" Value="green" /> </asp:RadioButtonList>

CheckBoxList

As you may have guessed, the CheckBoxList control represents a group of check boxes; it’s equivalent to using several CheckBox controls in a row:

<asp:CheckBoxList id="favoriteFood" runat="server"> <asp:ListItem Text="Pizza" Value="pizza" /> <asp:ListItem Text="Tacos" Value="tacos" /> <asp:ListItem Text="Pasta" Value="pasta" /> </asp:CheckBoxList>

    BulletedList

    The BulletedList control displays bulleted or numbered lists, using <ul> (unordered list) or <ol> (ordered list) tags. Unlike the other list controls, the BulletedList doesn’t allow the selection of items, so the SelectedIndexChanged event isn’t supported.



    The first property you’ll want to set is DisplayMode, which can be Text(the default), or HyperLink, which will render the list items as links. When DisplayMode is set to HyperLink, you can use the Click event to respond to a user’s click on one of the items.

    The other important property is BulletStyle, which determines the style of the bullets. The accepted values are:

Numbered (1, 2, 3, …)

LowerAlpha (a, b, c, …)

UpperAlpha (A, B, C, …)

LowerRoman (i, ii, iii, …)

UpperRoman (I, II, III, …)

Circle

Disc

Square

CustomImage

    If the style is set to CustomImage, you’ll also need to set the BulletStyleImageUrl to specify the image to be used for the bullets. If the style is one of the numbered lists, you can also set the FirstBulletNumber property to specify the first number or letter that’s to be generated.

    Advanced Controls

    These controls are advanced in terms of their usage, the HTML code they generate, and the background work they do for you. Some of these controls aren’t available to older versions of ASP.NET.



    Calendar

    The Calendar is a great example of the reusable nature of ASP.NET controls. The Calendar control generates markup that displays an intuitive calendar in which the user can click to select, or move between, days, weeks, months, and so on.

    The Calendar control requires very little customization. In Visual Web Developer, select Website > Add New Item…, and make the changes indicated:

    Visual Basic LearningASP\VB\Calendar_01.aspx

    <%@ Page Language="VB" %>



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    <script runat="server">



    </script>



    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title>Calendar Test/title>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:Calendar ID="myCalendar" runat="server" />

    </div>

    </form>

    </body>

    </html>

    Again, the C# version is the same, except for the Page declaration:



    C# LearningASP\CS\01_Calendar.aspx (excerpt)

<%@ Page Language="C#" %>

    …

    If you save this page in your working folder and load it, you’ll see the output shown in Figure 4.



    The Calendar control contains a wide range of properties, methods, and events, including those listed in Table 3.

    Table 3. Some of the Calendar control’s properties

Property	Description
`DayNameFormat`	This property sets the format of the day names. Its possible values are FirstLetter, FirstTwoLetters, Full, and Short. The default is Short, which displays the three-letter abbreviation.
`FirstDayOfWeek`	This property sets the day that begins each week in the calendar. By default, the value of this property is determined by your server’s region settings, but you can set this to Sundayor Monday if you want to control it.
`NextPrevFormat`	Set to CustomText by default, this property can be set to ShortMonth or FullMonth to control the format of the next and previous month links.
`SelectedDate`	This property contains a DateTime value that specifies the highlighted day. You’ll use this property often, to determine which date the user has selected.
`SelectionMode`	This property determines whether days, weeks, or months can be selected; its possible values are Day, DayWeek, DayWeekMonth, and None, and the default is Day. When Dayis selected, a user can only select a day; when DayWeek is selected, a user can select a day or an entire week; and so on.
`SelectMonthText`	This property controls the text of the link that’s displayed to allow users to select an entire month from the calendar.
`SelectWeekText`	This property controls the text of the link that’s displayed to allow users to select an entire week from the calendar.
`ShowDayHeader`	If True, this property displays the names of the days of the week. The default is True.
`ShowGridLines`	If True, this property renders the calendar with grid lines. The default is True.
`ShowNextPrevMonth`	If True, this property displays next month and previous month links. The default is True.
`ShowTitle`	If True, this property displays the calendar’s title. The default is False
`TitleFormat`	This property determines how the month name appears in the title bar. Possible values are Monthand MonthYear. The default is MonthYear.
`TodaysDate`	This DateTime value sets the calendar’s current date. By default, this value is not highlighted within the Calendar control.
`VisibleDate`	This DateTime value controls which month is displayed.

    Let’s take a look at an example that uses some of these properties, events, and methods to create a Calendar control which allows users to select days, weeks, and months. Modify the calendar in Calendar.aspx (both the VB and C# versions), and add a label to it, as follows:

    LearningASP\VB\Calendar_02.aspx (excerpt)

…

    <form id="form1" runat="server">

    <div>

    <h1>Pick your dates:</h1>

    <asp:Calendar ID="myCalendar" runat="server"

    DayNameFormat="Short" FirstDayOfWeek="Sunday"

    NextPrevFormat="FullMonth" SelectionMode="DayWeekMonth"

    SelectWeekText="Select Week"

    SelectMonthText="Select Month" TitleFormat="Month"

    OnSelectionChanged="SelectionChanged" />

    <h1>You selected these dates:</h1>

    <asp:Label ID="myLabel" runat="server" />

    </div>

    </form>

…

    Now edit the <script runat="server"> tag to include the SelectionChanged event handler referenced by your calendar:

    Visual Basic LearningASP\VB\Calendar_02.aspx (excerpt)

<script runat="server"> Sub SelectionChanged(ByVal s As Object, ByVal e As EventArgs) myLabel.Text = "" For Each d As DateTime In myCalendar.SelectedDates myLabel.Text &= d.ToString("D") & "<br />" Next End Sub </script>

C# LearningASP\CS\Calendar_02.aspx (excerpt)

<script runat="server"> void SelectionChanged(Object s, EventArgs e) { myLabel.Text = ""; foreach (DateTime d in myCalendar.SelectedDates) { myLabel.Text += d.ToString("D") + "<br />"; } } </script>

    Save your work and test it in a browser. Try selecting a day, week, or month. The selection will be highlighted in a similar way to the display shown in Figure 5.



    In SelectionChanged, we loop through each of the dates that the user has selected, and append each to the Label we added to the page.

    AdRotator

    The AdRotator control allows you to display a list of banner advertisements at random within your web application. However, it’s more than a mere substitute for creating a randomization script from scratch. Since the AdRotator control gets its content from an XML file, the administration and updating of banner advertisement files and their properties is a snap. Also, the XML file allows you to control the banner’s image, link, link target, and frequency of appearance in relation to other banner ads.

    The benefits of using this control don’t stop there, though. Most of the AdRotator control’s properties reside within an XML file; if you wanted to, you could share that XML file on the Web, allowing value added resellers (VARS), or possibly your companies’ partners, to use your banner advertisements on their web sites.

    NOTE: What Is XML?

    In essence, XML is simply a text-based format for the transfer or storage of data; it contains no details about how that data should be presented. XML is very easy to start with because of its close resemblance to your old friend HTML: both are largely comprised of tags inside angle brackets (< and >), and any tag may contain attributes that are specific to that tag. The biggest difference between XML and HTML is that, rather than providing a fixed set of tags as HTML does, XML allows us to create our own tags to describe the data we wish to represent.

    Take a look at the following HTML element:

    <h1>Star Wars Episode I: The Phantom Menace</h1>

    This example describes the content between the tags as a level one heading. This is fine if all we want to do is display the heading “Star Wars Episode I: The Phantom Menace” on a web page. But what if we want to access those words as data?

    Like HTML, XML’s purpose is to describe the content of a document. But where HTML is a very generic markup language for documents—headings, paragraphs and lists, for example—XML can, very specifically, describe what the content is. Using XML, the web author can mark up the contents of a document, describing that content in terms of its relevance as data.



    We can use XML to mark up the words “Star Wars Episode I: The Phantom Menace” in a way that better reflects this content’s significance as data:

<film>   

     <title>Star Wars Episode I: The Phantom Menace</title>   

    </film>

Here, the XML tag names we’ve chosen best describe the contents of the element. We also define our own attribute names as necessary. For instance, in the example above, you may decide that you want to differentiate between the VHS version and the DVD version of the film, or record the name of the movie’s director. This can be achieved by adding attributes and elements, as shown below:

<film format="DVD">   

     <title>Star Wars Episode I: The Phantom Menace</title>   

     <director>George Lucas</director>   

    </film>

If you want to test this control out, create a file called ads.xml in your LearningASP\VB or /#c#/LearningASP\CS folder (or both), and insert the content presented below. Feel free to create your own banners, or to use those provided in the code archive for this book:

LearningASP\VB\Ads.xml

<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>workatdorknozzle.gif</ImageUrl> <NavigateUrl>http://www.example.com</NavigateUrl> <TargetUrl>_blank</TargetUrl> <AlternateText>Work at Dorknozzle!</AlternateText> <Keyword>HR Sites</Keyword> <Impressions>2</Impressions> </Ad> <Ad> <ImageUrl>getthenewsletter.gif</ImageUrl> <NavigateUrl>http://www.example.com</NavigateUrl> <TargetUrl>_blank</TargetUrl> <AlternateText>Get the Nozzle Newsletter!</AlternateText> <Keyword>Marketing Sites</Keyword> <Impressions>1</Impressions> </Ad> </Advertisements>

    As you can see, the Advertisements element is the root node, and in accordance with the XML specification, it appears only once. For each individual advertisement, we simply add an Ad child element. For instance, the above advertisement file contains details for two banner advertisements.

    As you’ve probably noticed by now, the .xml file enables you to specify properties for each banner advertisement by inserting appropriate elements inside each of the Ad elements. These elements include:

    ImageURL

    the URL of the image to display for the banner ad

    NavigateURL

    the web page to which your users will navigate when they click the banner ad

    AlternateText

    the alternative text to display for browsers that don’t support images

    Keyword

    the keyword to use to categorize your banner ad

    (If you use the KeywordFilter property of the AdRotator control, you can specify the categories of banner ads to display.)

    Impressions

    the relative frequency with which a particular banner ad should be shown in relation to other banner advertisements

    (The higher this number, the more frequently that specific banner will display in the browser. The number provided for this element can be as low as one, but cannot exceed 2,048,000,000; if it does, the page throws an exception.)

    Except for ImageURL, all these elements are optional. Also, if you specify an Ad without a NavigateURL, the banner ad will display without a hyperlink.

    To make use of this Ads.xml file, create a new ASP.NET page called AdRotator.aspx, and add the following code to it:

    Visual Basic LearningASP\VB\AdRotator.aspx

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using the AdRotator Control</title> </head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="adRotator" runat="server" AdvertisementFile="Ads.xml" /> </div> </form> </body> </html>

    As with most of our examples, the C# version of this code is the same except for the Page declaration. You’ll also need to copy the workatdorknozzle.gif and getthenewsletter.gif image files from the code archive and place them in your working folder in order to see these ad images. Save your work and test it in the browser; the display should look something like Figure 6.



    Refresh the page a few times, and you’ll notice that the first banner appears more often than the second. This occurs because the Impression value for the first Ad is double the value set for the second banner, so it will appear twice as often.

Encapsulation and Inheritence

2010-09-05T23:07:00.000-07:00

Introduction

In this article i would like to describe the people what are the basic concepts of Object Oriented Programming
The OOP stands on the following three pillars.

Object &Class (Encapsulation)
Inheritance
Polymorphism

1 Object & Class (Encapsulation):

Object:

TheObject is an Instance in programming language which is made byinspiring from the real world which contains some properties andmethods.

Lets take an example of a person(object) from the real world.

A person is an object, as i told you before that an object could have methodes(behaviour)& properties so here person(object) could have some properties like his black hair,fair color,tall,and so on..Simillarly it could have the methodes like Eat,Run,Play,Sleep and so on..All these properties & methodes are kept stored in a seperate class.

Class:

A class is basically a container where object lies..In programming we define all the properties&methodes in a seperate class while we make object of that class in main class... It means we generate the objects from main class, lets have a look..

class cat

{

   public void eat()

         {

           console.writeline("cat eats mouse");

          }

    public void walk()

          {

            console.writeline("It walks slowly...");

          }

}

Here we have defined a class and in 'class cat' " public void eat() "and " public void walk() " are methods.now we make an object in mainclass and call these methods...

static void main ()

{

   cat mycat = new cat();

    mycat.eat();

    mycat.walk();

    console.readline();

}

This is the main class in which we make an object named mycat of the classs cat.. after making the cat's class object we can call its methods&properties by writting "mycat." when we put dot after the object it calls all the methodes & properties from the related class...

Encapsulation in OOP?

Encapsulationis the word which came from the word "CAPSULE" which to put some thingin a kind of shell. In OOP we are capsuling our code not in a shell butin "Objects" & "Classes". So it means to hide the information intoobjects and classes is called Encapsulation.

2 Inheritance:

The Inheritance is one of the main concepts of oop.Inheritance is just to adobe the functionality (methods & properties) of one class to another. This simple term is known as Inheritance.
Lets have a look of code

public class cat
{
   public void eat()
   {
      console.writeline("cat can eat");
    }
   public void walk()
   {
    console.writeline("cat can walk");
   }

}

now we make another class of another cat and we inherit the methodsof the first class to the new class.Do remember in programming weinherit one class to another by coding " : " colon between the parentand child class.
Lets have a look..

public class EgyptianCat : cat
{
  public void jump()
  {
     console.writeline("Egyptian cat can jump"); 
  }

 public void bite()
  {
    console.writeline("Egyptian cat can not bite"); 
   }
}

static void main()

{

 cat mycat=new cat();

 mycat.eat();

 mycat.walk();

 EgyptianCat yourcat=new EgyptianCat();

 yourcat.eat();

 yourcat.walk();

 yourcat.jump();

 yourcat.bite();

 console.readline();

}

this is the code in main class in which we are inheriting the class EgyptianCat to the class cat, so that the new class becomes the child class of the first class which is now called the parent class.

Basic Concepts of OOP

2010-08-31T23:10:00.000-07:00

Theseare the basic concepts of Object Oriented Programming. I wrote it forthose who don't have basic concepts of oop, and for those who feelsprogramming a big monster. I tried to make them understand as mucheasiest as i could in my blog.. Best of Luck

Introduction

In this article i would like to describe the people what are the basic concepts of Object Oriented Programming
The OOP stands on the following three pillars.

Object &Class (Encapsulation)
Inheritance
Polymorphism

1 Object & Class:

Object:

TheObject is an Instance in programming language which is made byinspiring from the real world which contains some properties andmethods.

Lets take an example of a person(object) from the real world.

Class:

class cat

{

   public void eat()

         {

           console.writeline("cat eats mouse");

          }

    public void walk()

          {

            console.writeline("It walks slowly...");

          }

}

Here we have defined a class and in 'class cat' " public void eat() "and " public void walk() " are methods.now we make an object in mainclass and call these methods...

static void main ()

{
   cat mycat = new cat();
    mycat.eat();
    mycat.walk();
    console.readline();
}

Encapsulation in OOP?

Encapsulationis the word which came from the word "CAPSULE" which to put some thingin a kind of shell. In OOP we are capsuling our code not in a shell butin "Objects" & "Classes". So it means to hide the information intoobjects and classes is called Encapsulation.

2 Inheritance:

public class cat
{
   public void eat()
   {
      console.writeline("cat can eat");
    }
   public void walk()
   {
    console.writeline("cat can walk");
   }

}

public class EgyptianCat : cat
{
  public void jump()
  {
     console.writeline("Egyptian cat can jump"); 
  }

 public void bite()
  {
    console.writeline("Egyptian cat can not bite"); 
   }
}

static void main()

{

 cat mycat=new cat();

 mycat.eat();

 mycat.walk();

 EgyptianCat yourcat=new EgyptianCat();

 yourcat.eat();

 yourcat.walk();

 yourcat.jump();

 yourcat.bite();

 console.readline();

}

his is the code in main class in which we are inheriting the class EgyptianCat to the class cat, so that the new class becomes the child class of the first class which is now called the parent class.

In the next article, I shall describe about Polymorphism.

Dump That Free Hit Counter And Start Tracking

2010-08-26T19:19:00.000-07:00

Dump That Free Hit Counter And Start Tracking

It seems that every other web site we visit has some sort of hitcounter on the main page, supposedly telling us how many people havebeen there before us. This week we're going to address this populartrend, explain why you don't need one, and what you should be doinginstead.
Most Internet marketers will normally implement a hit counter ontheir site for one or both of two reasons -- to give them a roughestimate of the number of visitors, and/or to give visitors theimpression that their site is popular and thus worthy of a good look.
Let's consider the first reason. There is nothing wrong with wantingto know how many people have visited your web site, in fact it'ssomething that you really do need to know. But putting a visible hitcounter on your home page is not the answer, especially not one ofthose free services.
For one thing, the free services require you to in some way promotetheir site. For another, they are normally slow and increase the timeit takes for your pages to load. But most importantly, a hit counterdoesn't provide you with all of the information you need.
Just look at any of the top web sites on the Internet. We promisethat you will not find a visible hit counter on any of them! That aloneshould tell you that the common hit counter is worthless. If a visiblecounter was worthwhile, don't you think Yahoo or Infoseek would haveone?
You just can't win with a visible hit counter. If your site does notget many visitors, all it's going to do is make sure that the visitorsyou do get know that they are not visiting a popular site. If anything,all this will do is discourage them from exploring your web site indetail.
On the other hand, maybe your site gets 50,000 visitors a day andyou think that letting people know this via a hit counter is a goodidea. Not really. If your web site gets lots of traffic it is becauseyou are doing something right, and having a hit counter isn't going toaffect this.
Unfortunately, what normally happens is that the misguided Internetmarketer will set up a visible hit counter on their home page and thenartificially inflate their visitor count. This is done in the hopesthat it will impress people, but it's a terribly bad idea and does notwork.
In the early days of the web it was "cool" to have a hit counter onyour home page, but they are so commonplace these days that no one paysthem any attention anyway. No matter what your reason for using avisible hit counter, we say dump it and start tracking!

Tracking Visitors' Footsteps

While Yahoo and Infoseek don't have visible counters on their pages,rest assured that they know your every move. No other advertisingmedium allows you to do the things the Internet does, and it amazes usthat more marketers do not take advantage of serious site tracking.
Part of the problem seems to be that many Internet marketers areonly concerned with promoting their web site and getting more people tovisit. More visitors equals more sales right? Well yes that is true,but only if your web site leads visitors through the sales process.

Before you even begin promoting a web site, you should have in yourmind the path that you want visitors to take through your site. Salesis a process. One step leads to the next, until finally the end resultis hopefully that what was once just a prospect is now a customer.
Tracking your visitor's footsteps throughout your web site is thebest way to determine why they didn't take the action that you wantedthem to take. Who knows, maybe 80% of your visitors aren't even makingit past your introductory page? You'll never know unless you track them.
Consider this another Internet marketing rule that is written instone. If you're not tracking your entire web site and tweaking it on aregular basis, you're throwing money down the proverbial drain. From aprofit standpoint, it is critical that you know the answers toquestions like:

How do visitors find your site in the first place?
How many of them make it past the main page?
Which page of your site is the most popular?
How long does the average visitor stick around?
What is the average number of pages viewed?
What path do visitors take through your site?
What links do they use to leave your site?

If you don't know the answers to these simple questions, here's aneasy way to increase your profits starting immediately. And the goodnews is that it may not cost you anything other than some time. We'regoing to show you how to use free CGI scripts to ultimately increasesales!
While you don't really need to learn anything technical to use thescripts we're going to suggest, you do need to be able to run CGIscripts on your web server. If you have no idea what CGI scripts are,ask your ISP. If they say no, we strongly suggest that you find a newISP.
If you haven't realized it by now, we are a big fan of CGI scriptsbecause they are what allows you to add interactivity to your web site.But CGI scripts can also help you do many other things, like track yourvisitors' footsteps.

Go to http://www.cgi-resources.com
Click on "Programs and Scripts"
Click on "Perl"
Click on "Logging Accesses and Statistics"

You'll be presented with no less than 30 CGI script packages whichwill help you gather valuable information about your visitors, andbelieve it or not, most of them are free! We looked at all of them, sowe'll save you the time and suggest the two we like best to help youget started.
One of the first scripts we tried, and still one of our favorites,is AXS by Fluid Dynamics. It's one of the first scripts listed and youcan't miss it. You can download it for free, and with a minimal amountof effort you could be tracking your entire web site within the nextfew hours.

The direct URL to the AXS site is http://www.xav.com/scripts/axsRather than going into detail about it here, we'll let you discover itfor yourself. It's a great system and the only thing we don't likeabout it is that it creates it's own log files, and they get huge ifyour site is busy.
The alternative is to use something like Darryl Burgdorf's WebLog. The direct URL to this great script is http://awsd.com/scripts/weblog.It does everything AXS does, but it runs off of your existing serverlogs which makes it easier to set up for most. It's also more efficient.
Both AXS and WebLog will give you all of the information you couldever want about your visitors, and both display this information in away that is easy for you to interpret using graphs, etc. We encourageyou to download and set up one of these scripts to track your web site.

My Site Is Being Tracked, What Next?

The point of tracking your site is to act on the information yougather and use it to improve your web site's effectiveness. If youdiscover that 80% of your visitors aren't making it past your homepage, or that the average person leaves within 2 minutes, you now haveyour work cut out for you.
The real value of tracking your visitor's footsteps is that it willhelp you determine why they did not take the action that you wantedthem to take. Once you see how most people navigate your web site, youcan then make changes until the path they take is the one you want.
Spend some time implementing a good tracking system on your site,because if you can increase your visitor-to-sales ratio even just a fewpercentage points it will be more than worth your time. Remember, itdoesn't matter how many hits you get if your site doesn't do its job.

4-Tier Architecture in ASP.NET with C#

2010-08-24T19:19:00.000-07:00

Well, the architecture I am going to demonstrate here is justenhancement of 3-Tier archicture. In this architecture; you no need ofwriting long function parameters throughout the layers (as intraditionally 3-Tier archicture has to) and the actual objects of theapplication will be in a separate tier so that in future you canseparately use these objects for enhancements. Change in the objectdefinition can be done without touching the entire Business AccessLayers ............
Let me explain you step-wise process of creatioin of 4-Tier architecture application.
In this application, I am going to take example of a Person thatwill have 3 properties: FirstName, LastName, Age. We will create aseparate pages to insert these records (default.aspx) into database andlist,update,delete records (list.aspx) from database.

In this application we will have following 4-Tiers
1. Business Object [BO]
2. Business Access Layer [BAL]
3. Data Access Layer [DAL]
4. UI (4-Tier) folder [UI]
Picture - 1 (Solution Explorer)

For simplicity reason, I have created separate folders for first3-tiers into App_Code folder. You can create a separate projects forthese tiers and add into forth tier (UI) solution.
Lets create above tiers one by one.
Business Object [BO - Person.cs]
Create a separate folder by right-clicking App_Code folder and nameit as BO. Right click this folder and create a new .cs (Class) filenamed Person.cs. Write following code inside it.

int m_PersonID = 0;
    string m_FirstName = string.Empty;
    string m_LastName = string.Empty;
    int m_Age = 0;
    #region Propertiers
    public int PersonID
    {
        get { return m_PersonID; }
        set { m_PersonID = value; }
    }
   

    public string FirstName

    {
        get { return m_FirstName; }
        set { m_FirstName = value; }
    }

    

    public string LastName
    {
        get { return m_LastName; }
        set { m_LastName = value; }
    }

  
    public int Age
    {
        get { return m_Age; }
        set { m_Age = value; }
    }

    #endregion Properties

Here, we are first declaring 4 variables for corresponding properitesand defining properties for them.This is your Business Object with allits properties/attributes to work with. Next step is to create DataAccess Layer.
Data Access Layer [DAL - PersonDAL.cs]
The way you created BO folder inside App_Code folder, createanother folder named DAL. Create a .cs file inside it and name it asPersonDAL.cs
Write following code inside it (You can copy-paste).

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient; /// <summary>
/// Summary description for PersonDAL
/// </summary>
public class PersonDAL
{
    string connStr = ConfigurationManager.ConnectionStrings["TutTestConn"].ToString();

   public PersonDAL()
   {

   }

    /// <summary>
    /// Used to insert records into database
    /// </summary>
    /// <param name="p"></param>
    /// <returns></returns>
    public int Insert(Person person)
    {
        SqlConnection conn = new SqlConnection(connStr);
        conn.Open();
        SqlCommand dCmd = new SqlCommand("InsertData", conn);
        dCmd.CommandType = CommandType.StoredProcedure;
        try
        {
            dCmd.Parameters.AddWithValue("@firstName", person.FirstName);
            dCmd.Parameters.AddWithValue("@lastName", person.LastName);
            dCmd.Parameters.AddWithValue("@age", person.Age);
            return dCmd.ExecuteNonQuery();
        }
        catch
        {
            throw;
        }
        finally
        {
            dCmd.Dispose();
            conn.Close();
            conn.Dispose();
        }
    }
    /// <summary>
   /// Update record into database
    /// </summary>
    /// <param name="p"></param>
    /// <returns></returns>
    public int Update(Person person)
    {
        SqlConnection conn = new SqlConnection(connStr);
        conn.Open();
        SqlCommand dCmd = new SqlCommand("UpdateData", conn);
        dCmd.CommandType = CommandType.StoredProcedure;
        try
        {
            dCmd.Parameters.AddWithValue("@firstName", person.FirstName);
            dCmd.Parameters.AddWithValue("@lastName", person.LastName);
            dCmd.Parameters.AddWithValue("@age", person.Age);
            dCmd.Parameters.AddWithValue("@personID", person.PersonID);
            return dCmd.ExecuteNonQuery();
        }
       catch
        {
            throw;
        }
        finally
        {
            dCmd.Dispose();
            conn.Close();
            conn.Dispose();
        }
    }
    /// <summary>
    /// Load all records from database
    /// </summary>
    /// <returns></returns>
    public DataTable Load()
    {
        SqlConnection conn = new SqlConnection(connStr);
        SqlDataAdapter dAd = new SqlDataAdapter("LoadAll", conn);
       dAd.SelectCommand.CommandType = CommandType.StoredProcedure;
        DataSet dSet = new DataSet();
        try
        {
            dAd.Fill(dSet, "PersonTable");
            return dSet.Tables["PersonTable"];
        }
        catch
        {
            throw;
        }
        finally
        {
            dSet.Dispose();
            dAd.Dispose();
            conn.Close();
            conn.Dispose();
        }
    }
    /// <summary>
    /// Delete record from database
    /// </summary>
    /// <param name="person"></param>
    /// <returns></returns>
    public int Delete(Person person)
    {
        SqlConnection conn = new SqlConnection(connStr);
        conn.Open();
        SqlCommand dCmd = new SqlCommand("DeleteData", conn);
        dCmd.CommandType = CommandType.StoredProcedure;
        try
        {
            dCmd.Parameters.AddWithValue("@personID", person.PersonID);
            return dCmd.ExecuteNonQuery();
        }
        catch
        {
            throw;
        }
        finally
        {
            dCmd.Dispose();
           conn.Close();
            conn.Dispose();
        }
    }
}

In this class file, we have Insert, Update, Delete, Load methods. Inthis class file, first I am getting the connection string from theweb.config file in a class level variable called connStr and using the same string in all my methods to open the connection.
For simplicity reason, I have not shown the code for StoredProcedure, however you can get the complete database and code bydownloading the Source Code files. This was your Data AccessLayer. Till now you have your Business Object and Data Access Layerready. Now lets go to the third layer and create Business Access Layer.
Business Access Layer [BAL - PersonBAL.cs]
Again, right click App_Code folder and add a new folder named BAL.Create a new class file inside it and name it as PersonBAL.cs. Writefollowing code inside it.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/// <summary>
/// Summary description for PersonBAL
/// </summary>
public class PersonBAL
{
   public PersonBAL()
   {

   }
    /// <summary>
    /// insert records into database
    /// </summary>
    /// <param name="person"></param>
    /// <returns></returns>
    public int Insert(Person person)
    {
        PersonDAL pDAL = new PersonDAL();
        try
        {
            return pDAL.Insert(person);
        }
       catch
        {
            throw;
        }
        finally
        {
            pDAL = null;
        }
    }
    /// <summary>
    /// Update records into database
    /// </summary>
    /// <param name="person"></param>
    /// <returns></returns>
    public int Update(Person person)
    {
        PersonDAL pDAL = new PersonDAL();
        try
        {
            return pDAL.Update(person);
        }
        catch
        {
            throw;
        }
        finally
       {
            pDAL = null;
        }
    }
    /// <summary>
    /// Load records from database
    /// </summary>
    /// <returns></returns>
    public DataTable Load()
    {
        PersonDAL pDAL = new PersonDAL();
        try
        {
            return pDAL.Load();
        }
        catch
        {
            throw;
        }
        finally
        {
            pDAL = null;
        }
    }
    /// <summary>
    /// Delete record from database
    /// </summary>
    /// <param name="person"></param>
    /// <returns></returns>
    public int Delete(Person person)
    {
        PersonDAL pDAL = new PersonDAL();
        try
        {
            return pDAL.Delete(person);
       }
        catch
        {
            throw;
        }
        finally
        {
            pDAL = null;
        }
    }
}

Here, we are creating separate methods each for respective PersonDAL.csmethods here. As in our case we don't have any business logic, so weare just instantiating the Data Access Layer objects, using its methodsand and returning to UI (fourth layer, described later on).
You must have noticed here that in the try catch block, I amjust writing throw; statement. This is because when any error willoccur it will be send to the calling layers (in our case UI) and therewe will handle it.
Till now, we have BO, BAL and DAL ready. Now we are left with ourapplication face, I mean UI. Lets first create default.aspx file thatwill contain one form and textboxs that will be used to enter records.
User Interface - [UI]-Default.aspx
Create a separate folder in your UI solution named 4-Tier and addone .aspx page called Default.aspx (Picture - 2). In this page, we willwrite ASP.NET code to render textboxes and buttons. OnClick event ofthe button we will calll AddRecords method that will ultimately insert the records into database. Below is the code to render the asp.net form.

<form id="form1" runat="server">
    <div>
        <p><a href="List.aspx">List Records</a></p>
        <asp:Label ID="lblMessage" runat="Server" ForeColor="red"
EnableViewState="False"></asp:Label>
        <table style="border:2px solid #cccccc;">
            <tr style="background-color:#ECF3AB;">
                <th colspan="3">Add Records</th>
            </tr>
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <asp:TextBox ID="txtFirstName" runat="Server"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="req1" runat="Server" Text="*"
ControlToValidate="txtFirstName" Display="dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
               <td>
                    Last Name:
                </td>
                <td>
                    <asp:TextBox ID="txtLastName" runat="Server"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="req2" runat="Server" Text="*"
ControlToValidate="txtLastName" Display="dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Age:
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="Server" Columns="4"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="req3" runat="Server" Text="*" ControlToValidate="txtAge"
Display="dynamic"></asp:RequiredFieldValidator>
                    <asp:CompareValidator ID="Comp1" runat="Server" Text="Only integer"
ControlToValidate="txtAge" Operator="DataTypeCheck" Type="Integer"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="AddRecords" />
                </td>
            </tr>
        </table>
    </div>
    </form>

Picture - 2 (Default.aspx)

AddRecords method

protected void AddRecords(object sender, EventArgs e)

    {

       //Lets validate the page first

        if (!Page.IsValid)

            return;

        int intResult = 0;

        // Page is valid, lets go ahead and insert records

        // Instantiate BAL object

        PersonBAL pBAL = new PersonBAL();

     // Instantiate the object we have to deal with

        Person person = new Person();

        // set the properties of the object

        person.FirstName = txtFirstName.Text;

        person.LastName = txtLastName.Text;

        person.Age = Int32.Parse(txtAge.Text);

        try
      {

            intResult = pBAL.Insert(person);

            if (intResult > 0)

                lblMessage.Text = "New record inserted successfully.";

            else

                lblMessage.Text = "FirstName ["+ txtFirstName.Text +"] alredy exists, try another 
name";
        }
        catch (Exception ee)
        {
            lblMessage.Text = ee.Message.ToString();
        }
        finally
        {
            person = null;
            pBAL = null;
        }        

    }

In the above method, I am doing following things mainly:
1. Instantiating BAL object
2. Instantiating BO object
3. Settinng properties of BO object by the textbox values
4. Calling Insert method of the BAL object and passing BO object as parameter [pBAL.Insert(person)] in try block
5. Checking for number of records affected, If the number is morethan zero, I am writing Success message otherwise Duplicate recordsfound.
6. If any layer will throw any error, I am catching it and displaying to the user in throw block.
7. Whatever objects I had instantiated, I am specifying theirvalues to null to let the GC know that I am no more going to use them.

User Interface - [UI]-List.aspx
In this page, I am going to use a GridView to List, Modify, Sortand Delete records from the database. Create an .aspx page in the same4-Tier folder named List.aspx (Picture - 3). Following is the code forthe GridView that will do data manipulation for us.

<form id="form1" runat="server">
    <div>
        <p><a href="Default.aspx">Add Record</a></p>
        <asp:Label ID="lblMessage" runat="Server" ForeColor="red" EnableViewState="False"></asp:Label>
        <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
         DataKeyNames="PersonID" AutoGenerateEditButton="True" AutoGenerateColumns="False"
          OnRowEditing="EditRecord" OnRowUpdating="UpdateRecord" OnRowCancelingEdit="CancelRecord"
           OnRowDeleting="DeleteRecord" AllowPaging="True" AllowSorting="true" PageSize="5"
           OnPageIndexChanging="ChangePage" OnSorting="SortRecords">
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <EditRowStyle BackColor="#2ff1BF" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="PersonID" HeaderText="Person ID" ReadOnly="True" SortExpression="PersonID" />
                <asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
                    <ItemTemplate>
                        <%# Eval("FirstName") %>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtFName" runat="Server" Text='<%# Eval("FirstName") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
                    <ItemTemplate>
                        <%# Eval("LastName") %>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtLName" runat="Server" Text='<%# Eval("LastName") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Age" SortExpression="Age">
                    <ItemTemplate>
                        <%# Eval("Age") %>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtAge" runat="Server" Text='<%# Eval("Age") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Delete?">
                    <ItemTemplate>
                        <span onclick="return confirm('Are you sure to Delete?')">
                            <asp:LinkButton ID="lnBD" runat="server" Text="Delete" CommandName="Delete"></asp:LinkButton>
                        </span>
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
    </div>
    </form>

Picture - 3 (List.aspx)

On the OnRowEditing, OnRowUpdating, OnRowCancelEdit, OnSorting andOnRowDeleting events we are calling respective methods to do datamanipulation. Following are codes to bind the GridView and methods thatwill fire on GridView events.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            BindGrid();
    }

    /// <summary>
    /// Fired when Cancel button is clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void CancelRecord(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        BindGrid();
    }

    /// <summary>
    /// Fires when Edit button is clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void EditRecord(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        BindGrid();
    }

    /// <summary>
    /// Fires when Update button is clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void UpdateRecord(object sender, GridViewUpdateEventArgs e)
    {
        int personID = Int32.Parse(GridView1.DataKeys[e.RowIndex].Value.ToString());
        int intResult = 0;
        GridViewRow row = GridView1.Rows[e.RowIndex];

        TextBox tFN = (TextBox) row.FindControl("txtFName");
        TextBox tLN = (TextBox)row.FindControl("txtLName");
        TextBox tAge = (TextBox)row.FindControl("txtAge");

        // instantiate BAL
        PersonBAL pBAL = new PersonBAL();
        Person person = new Person();
        try
        {
            person.PersonID = personID;
            person.FirstName = tFN.Text;
            person.LastName = tLN.Text;
            person.Age = Int32.Parse(tAge.Text);
            intResult = pBAL.Update(person);
            if (intResult > 0)
                lblMessage.Text = "Record Updated Successfully.";
            else
                lblMessage.Text = "Record couldn't updated";
        }
        catch (Exception ee)
        {
            lblMessage.Text = ee.Message.ToString();
        }
        finally
        {
            person = null;
            pBAL = null;
        }

        GridView1.EditIndex = -1;
        // Refresh the list
        BindGrid();
    }

    /// <summary>
    /// fires when Delete button is clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void DeleteRecord(object sender, GridViewDeleteEventArgs e)
    {
        int personID = Int32.Parse(GridView1.DataKeys[e.RowIndex].Value.ToString());


        // instantiate BAL
        PersonBAL pBAL = new PersonBAL();
        Person person = new Person();
        try
        {
            person.PersonID = personID;
            pBAL.Delete(person);

            lblMessage.Text = "Record Deleted Successfully.";
        }
        catch (Exception ee)
        {
            lblMessage.Text = ee.Message.ToString();
        }
        finally
        {
            person = null;
            pBAL = null;
        }

        GridView1.EditIndex = -1;
        // Refresh the list
        BindGrid();
    }

    /// <summary>
    /// Fires when page links are clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void ChangePage(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        // Refresh the list
        BindGrid();
    }

    /// <summary>
    /// Fires when Columns heading are clicked
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void SortRecords(object sender, GridViewSortEventArgs e)
    {
        DataTable dataTable = GridDataSource();

        if (dataTable != null)
        {
            DataView dataView = new DataView(dataTable);

            dataView.Sort = GetSortExpression(e);

            GridView1.DataSource = dataView;
            GridView1.DataBind();
        }
    }

    #region Private Methods

    /// <summary>
    /// Bind the gridview
    /// </summary>
    private void BindGrid()
    {
        GridView1.DataSource = GridDataSource();
        GridView1.DataBind();
    }

    /// <summary>
    /// Get GridView DataSource
    /// </summary>
    private DataTable GridDataSource()
    {
        PersonBAL p = new PersonBAL();
        DataTable dTable = new DataTable();
        try
        {
            dTable = p.Load();
        }
        catch (Exception ee)
        {
            lblMessage.Text = ee.Message.ToString();
        }
        finally
        {
            p = null;
        }

        return dTable;
    }

    /// <summary>
    /// Get sort expression for the gridview
    /// </summary>
    /// <param name="e"></param>
    /// <returns></returns>
    private string GetSortExpression(GridViewSortEventArgs e)
    {
        string sortDirection = string.Empty;
         // if clicked on the same column twice then let it toggle the sort order, else reset to ascending
        if (ViewState["SortExpression"] != null)
        {
            if (!ViewState["SortExpression"].ToString().Equals(e.SortExpression.ToLower()))
            {
                ViewState["SortDirection"] = null;
            }
        }

        if (ViewState["SortDirection"] != null)
        {
            if (ViewState["SortDirection"].ToString().Equals("ASC"))
            {
                sortDirection = "DESC";
                ViewState["SortDirection"] = "DESC";
            }
            else
            {
                sortDirection = "ASC";
                ViewState["SortDirection"] = "ASC";
            }
        }
        else
        {
            ViewState["SortDirection"] = "ASC";
        }
        ViewState["SortExpression"] = e.SortExpression.ToLower();
        return e.SortExpression + " " + sortDirection;
    }
    #endregion Private Methods

Thats it!!!
Now we have done all our home work, Its time to enjoy now. Justbuild the application by pressing Ctrl+Shift+B, once it shows BuildSucceeded in the status bar at the bottom, you are ready to enjoy your4-Tier architecture application.
Browse it as http://localhost/4-Tier (Provided you have created"4-Tier" virtual directory in your IIS or you can choose your ownvirtual directory name), you should see your screens as shown above(default.aspx and list.aspx pages).
Try manipulating data and see how effectively its happening. Thiswas a simple application, based on this architecture, you can createlarger application by adding separate objects and their correspondingtiers.
In order to use namespace in different tiers, you should defineyour namespace in respective tiers objects and use those namespace byusing statement whereever you need.
I have also attached a ready to use sample code of this example, Download it and use it!!!

Download

Download source code for 4-Tier Architecture in ASP.NET with C#
Thanks & Happy Coding.

Passwords Security in Your Database

2010-08-23T22:40:00.000-07:00

When ASP.NET developers think of Web security andauthentication, three options typically come to mind: Windowsauthentication, forms authentication, and passport authentication.
If you're building an Intranet application within your organization,for instance, you might choose to use Windows authentication.Configuring Windows authentication within IIS is fairly straightforward and involves only two steps.
First, we make sure that Integrated Windows Authentication ischecked and Anonymous Access is unchecked for a Web application byfollowing the steps outlined below:

Right-click on the Web app directory within IIS and select Properties.

Select the Directory Security tab from the application's Properties dialog.

Select the Edit… button within the Anonymous Access and Authentication control panel.

Uncheck Anonymous Access and make sure that Integrated Windows Authentication is checked similar to the figure below.

Second, we need only to modify the mode attribute within theauthentication tag in the application's Web.config file so that it'sset to Windows (which is set by default) as follows:

<authentication mode="Windows" />

That's all there is to it. Whenever users request a page, they'll beasked to supply their Windows username and password. Once logged in,users can be tracked by accessing the user.identity property for the page.
In many scenarios, however, development is focused around formsauthentication. Why? Because you wouldn't want manually to createusernames and passwords for the thousands of potential users that wouldaccess your site. Assuming you're building a large-scale forumapplication that is accessible by many users over the Internet, formsauthentication would be your best bet because it allows you to storeusernames and password within your data store (usually a databasetable) of choice, then validate your users based on a Web accessiblelogin page similar to this:

In this scenario, users enter their usernames and passwords and click a Login button. The Login button raises a Clickevent, some sort of validation method is called, and code is executedto compare the values users entered into the text boxes with valuescontained in a database. Typically, the database is structured with aUsers table containing UserID, Username, and Password fields similar tothe design shown here.

Now, I've read dozens of articles and a few dozen chapters in booksthat discuss working with forms authentication and most seem tostructure their database table around the simple design shown above. Soyou're probably asking yourself, "What's the problem?" Well, passwordinformation is stored as clear text, so any developer with access tothe database has access to the username and password information forall users that subscribe to the application. While it's not a big dealfor forum applications, it becomes an issue when you start dealing withonline banking applications or even day-trading applications likeE*Trade, TD Waterhouse, etc.
One solution to this problem could see us use simplistic hashing and store our passwords within a message digest.

Message Digest and Simplistic Hashing

A message digest is the representation of text in the form of asingle string of digits created using a formula called a one-way hashfunction. A one-way hash function takes an input string (such as apassword) and performs some math on it to produce a string ofgobbledygook (a digest string). Let's take the password "zak", forinstance. I could "hash" that password and the resulting digest wouldbe: D52987198EA2730FD22A38E7976344D843A7FFA0. Doesn't look at all like"zak", does it?
A good hash function makes it extremely difficult to guess an inputstring that will produce a given digest string. What if you convertedyour users' passwords into digest strings, and stored those digeststrings in the database instead of the actual passwords? Whenever auser logs in, your authentication script could perform the same one-wayhash function on the password he or she enters and compare it with thedigest string stored in the database. A match means the user enteredthe right password, and should be granted access to the site.
The big advantage here is that someone who can read your userdatabase (say, a database administrator), can see only the digeststrings—not the original passwords! And, because it's practicallyimpossible to find the password to produce a particular message digest,they can't use that information to gain access to your application!
To really appreciate how hashing works, let's create a simple application that uses forms authentication.
Note that all the code included in this article is contained in this downloadable code archive.
Setting up a site to use forms authentication is just as easy asWindows authentication. First, we need only to modify the modeattribute within the authentication tag in the application's Web.configfile so that it's set to Forms as follows:

<authentication mode="Forms" />

Second, we can set the users attribute of the deny tag within the authorization section handler to "?" as follows:

<authorization>
<deny users="?" />
</authorization>

Essentially, we'd be denying all anonymous users. Next, we create a registration page (registration.aspx) complete with three TextBox controls and a Button control to handle the user registration. The code should resemble the following:

<form runat="server">
<strong>User Registration</strong><br /><br />
Username:<br />
<asp:TextBox id="txtUsername" runat="server" /><br />
Password:<br />
<asp:TextBox id="txtPassword" runat="server" TextMode="Password" /><br />
Email:<br />
<asp:TextBox id="txtEmail" runat="server" /><br /><br />
<asp:Button id="btnAddCredentials" runat="server" Text="Add Credentials" />
</form>

When viewed in the browser, your page should resemble the image below.

Now that you've seen the UI output of our markup, let's add the OnClick attribute that will call our AddCredentials_Click() method, which we'll build in a minute:

Now that we have our user interface ironed out, let's create a newdatabase and database table to store the username, password, and email(in case a user happens to forget the password and must reset it, wecan send out the instructions to the user's email). For this example, Icreate a simple Access database called Customers.mdb with a singletable called Users. The design for the Users table is outlined below:

When complete, the Datasheet will resemble that shown below.

We can now write the code to store our user's username, hashedpassword, and email within our database. We start by adding thenecessary directives to the top of the page as follows:

<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Web.Security" %>

Because we'll be interacting with an Access database, we import the System.Data.OleDb namespace. Similarly, because we'll need to work with the FormsAuthentication classes, we import the System.Web.Security namespace. Next, we can add a code declaration block within the <head> tag of our document, complete with variable declarations and our AddCredentials_Click() method, as follows:

<script runat="server">
Dim objConn As New OleDbConnection("Provider=Microsoft.Jet.OleDb.4.0;Data
Source=C:InetpubwwwrootPasswordHashingDatabaseCustomers.mdb")
Dim objCmd As OleDbCommand
Dim sqlCmd As String

Sub AddCredentials_Click(s As Object, e As EventArgs)
sqlCmd = "INSERT INTO Users (Username, Pass, Email)
       VALUES (@Username, @Pass, @Email)"
objCmd = New OleDbCommand(sqlCmd, objConn)
objCmd.Parameters.Add("@Username", txtUsername.Text)
objCmd.Parameters.Add("@Pass",
             FormsAuthentication.HashPasswordForStoringInConfigFile(txtPassword.Text,
   "SHA1"))
objCmd.Parameters.Add("@Email", txtEmail.Text)

objConn.Open()
objCmd.ExecuteNonQuery()
objConn.Close()
End Sub
</script>

For the sake of brevity, I'll assume that you have experienceinteracting with databases using ASP.NET. At first glance, everythingseems fairly straight forward in the code above, except for the use ofthe HashPasswordForStoringInConfigFile() method of the FormsAuthenticationclass. This method exists as a way to hash and store a password withinthe Web.config file. We can use this method for our own purposes, thatis, to store hashed passwords into a database.
As you can see, the method accepts two parameters. The first isobviously the text value to use. Since we're retrieving this value fromthe password text box, we use txtPassword.Text. The second is thedigest algorithm to use. In this example, I've use SHA1, which producesa 160 bit digest. You could also use MD5, in which case the resultwould be a 128 bit digest. Generally speaking, the more bits in adigest string, the harder it is to guess an input string that willproduce it.
Now, when I add a new user, the password is hashed and the digest isstored within the Pass field in the Users table, as shown below.

See how simple that is? To validate a user, we simply create a login form (login.aspx) complete with two TextBox controls and a Button control to handle the validation. The markup would resemble the following:

<form runat="server">
<strong>Authenticate:</strong><br /><br />
Username:<br />
<asp:TextBox id="txtUsername" runat="server" /><br />
Password:<br />
<asp:TextBox id="txtPassword" runat="server" TextMode="Password" /><br /><br />
<asp:Button id="btnCheck" runat="server" Text="Check Credentials" /><br /><br />
<asp:Label id="lblCheck" runat="server" />
</form>

As a result of this markup, our Login page should look like this:

Once you've got the interface looking the way you want it to, add the OnClick="CheckCredentials_Click" attribute to the Button control as follows:

<asp:Button id="btnCheck" runat="server" Text="Check Credentials" OnClick="CheckCredentials_Click" />

Finally, we create a code declaration block within the <head> tag of our document and add the code to validate our users as follows:

<script runat="server">
Dim objConn As New OleDbConnection("Provider=Microsoft.Jet.OleDb.4.0;Data
Source=C:InetpubwwwrootPasswordHashingDatabaseCustomers.mdb")
Dim objCmd As OleDbCommand
Dim objDR As OleDbDataReader

Function CheckCredentials(Username As String, Password As String) As Boolean
objConn.Open()
objCmd = New OleDbCommand("SELECT Username, Pass FROM Users WHERE
   Username=@givenUsername", objConn)
objCmd.Parameters.Add("@givenUsername", Username)

objDR = objCmd.ExecuteReader()
If Not objDR.Read() Then
   Return False
Else
   Dim storedHashedPassword As String = objDR("Pass")
   Dim givenHashedPassword As String =
     FormsAuthentication.HashPasswordForStoringInConfigFile(Password,
     "SHA1")
   Return storedHashedPassword = givenHashedPassword
End If
End Function

Sub CheckCredentials_Click(s As Object, e As EventArgs)
If (CheckCredentials(txtUsername.Text, txtPassword.Text) = True) Then
   lblCheck.Text = "You entered the right credentials!"
Else
   lblCheck.Text = "You entered the wrong credentials!"
End If
End Sub
</script>

Again, don't forget to add the following directives to the top of the page:

<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Web.Security" %>

Now, launch login.aspx within the browser and enter ausername and password. As you can see from the figure below, when I login with the right credentials, the Label control displays the message "You entered the right credentials".

Right away you can see the benefits to simplistic hashing. It's farmore secure than storing clear text because of the fact that it wouldbe extremely difficult for someone to guess the original password thatproduced a hashed message digest. Notice I said "extremely difficult".Because we've only performed simplistic hashing, it wouldn't beimpossible for a hacker to perform what's called a dictionary attackand exploit vulnerabilities. Again, there is a solution to this problemas well.

Salting a Hash

So far, we've managed to solve the problem of storing clear textpasswords in our database in a relatively secure fashion.Unfortunately, this solution is secure enough only to prevent wanderingdatabase administrator eyes from seeing usernames and passwords in ourdatabase. A hacker can still perform what's called a dictionary attack.Malicious parties may make a dictionary attack by taking, for instance,100,000 passwords that they know people use frequently (e.g. citynames, sports teams, etc.), hash them, and then compare each entry inthe dictionary against each row in the database table. If the hackersfind a match, bingo! They have your password. To solve this problem,however, we need only salt the hash.
To salt a hash, we simply come up with a random-looking string oftext, concatenate it with the password supplied by the user, then hashboth the randomly generated string and password together as one value.We then save both the hash and the salt as separate fields within theUsers table.
In this scenario, not only would a hacker need to guess thepassword, they'd have to guess the salt as well. Adding salt to theclear text improves security: now, if a hacker tries a dictionaryattack, he must hash his 100,000 entries with the salt of every userrow. Although it's still possible, the chances of hacking successdiminish radically.
To implement this functionality, we start by adding a new field, called Salt, to our Users database table. The modified design will resemble the below.

When complete, the Datasheet will appear similar to the figure shown below.

Now, we can modify the code within registration.aspx slightly to accommodate the salt. I bolded the code additions to make them easier to distinguish:

<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Web.Security" %>
<%@ Import Namespace="System.Security.Cryptography" %>

<html>
<head>
<title>Password Hashing</title>
<script runat="server">
Dim objConn As New OleDbConnection("Provider=Microsoft.Jet.OleDb.4.0;Data
Source=C:InetpubwwwrootPasswordHashingDatabaseCustomers.mdb")
Dim objCmd As OleDbCommand
Dim sqlCmd As String
Dim objRng As New RNGCryptoServiceProvider
Dim intSaltSize As Integer = 16

Sub AddCredentials_Click(s As Object, e As EventArgs)
sqlCmd = "INSERT INTO Users (Username, Salt, Pass, Email) VALUES
                          (@Username, @Salt, @Pass, @Email)"
objCmd = New OleDbCommand(sqlCmd, objConn)
objCmd.Parameters.Add("@Username", txtUsername.Text)
Dim objByte() As Byte = New Byte(intSaltSize) {}
objRng.GetBytes(objByte)
Dim strSalt As String = Convert.ToBase64String(objByte)
objCmd.Parameters.Add("@Salt", strSalt)
objCmd.Parameters.Add("@Pass",
                         FormsAuthentication.HashPasswordForStoringInConfigFile(strSalt +
                         txtPassword.Text, "SHA1"))
objCmd.Parameters.Add("@Email", txtEmail.Text)

objConn.Open()
objCmd.ExecuteNonQuery()
objConn.Close()
End Sub
</script>
</head>
<body>

<form runat="server">
<strong>User Registration</strong><br /><br />
Username:<br />
<asp:TextBox id="txtUsername" runat="server" /><br />
Password:<br />
<asp:TextBox id="txtPassword" runat="server" TextMode="Password" /><br />
Email:<br />
<asp:TextBox id="txtEmail" runat="server" /><br /><br />
<asp:Button id="btnAddCredentials" runat="server" Text="Add Credentials"
onClick="AddCredentials_Click " />
</form>
</body>
</html>

Notice the use of the RNGCryptoServiceProvider class. This class is used to create the salt. The GetBytes() method of the RNGCryptoServiceProvider class creates an array of random bytes for cryptographic purposes. Although we could have used the Random class, the RNGCryptoServiceProviderRandom class. class provides a result that is much more random than that of the
This time, when I add a new username (zak) and password (zak), theresult is written similarly to our first example. The difference hereis that, when I add a second user (fred) with the same password (zak),the digest for both the password and salt are completely differentacross the board. This point is illustrated below.

To validate a user now, we simply modify the CheckCredentials_Click() function within login.aspx as follows:

Function CheckCredentials(Username As String, Password As String) As Boolean objConn.Open() objCmd = New OleDbCommand("SELECT Salt, Pass FROM Users WHERE Username=@givenUsername", objConn) objCmd.Parameters.Add("@givenUsername", Username) objDR = objCmd.ExecuteReader() If Not objDR.Read() Then Return False Else Dim strSalt As String = objDR("Salt") Dim strStoredPassword As String = objDR("Pass") Dim strGivenPassword As String = FormsAuthentication.HashPasswordForStoringInConfigFile(strSalt & Password, "SHA1") Return strStoredPassword = strGivenPassword End If End Function

This time, when the user logs in, the hashed password is compared tothe value of the salt and password combined. As you can see from theimage below, I've entered the correct username and password.

Conclusion

Now that you know that the .NET Framework provides excellent supportfor storing passwords securely, you shouldn't ever have to store cleartext passwords within your database ever again!

The Total Newbie’s Guide to jQuery: Select Elements and Manipulate CSS with jQuery

2010-08-18T07:20:00.000-07:00

This article, as well as a follow-up article coming next week, are excerpts from Chapter 2 of the new SitePoint book, jQuery: Novice to Ninja, by Earle Castledine and Craig Sharkie. You can grab the entirety of Chapter 2, as well as Chapters 1 and 7 and the complete code archive for the entire book for free here. Together, these two articles constitute an introduction to jQuery for designers who’ve only ever worked with CSS and HTML.

If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.

The Scenario

“In phase two, we are going to want to harness the social and enable Web 2.0 community-based, crowd-sourced, Ajax, um, interactions,” says our new client. “But for now we just need some basic stuff changed on our site.
Our client is launching a startup called StarTrackr! It uses GPS and RFID technology to track popular celebrities’ exact physical location—then sells that information to fans. It’s been going great guns operating out of a friend’s local store, but now they’re taking the venture online.
“Can you do it? Here’s a list that needs to be live by Friday, close of business.”
You survey the list. By amazing coincidence you notice that all of the requests can be implemented using jQuery. You look at your calendar. It’s Friday morning. Let’s get started!
The first task on the list is to add a simple JavaScript alert when the existing site loads. This is to let visitors know that StarTrackr! is not currently being sued for invasion of privacy (which was recently implied in a local newspaper).
Sure, we could use plain old JavaScript to do it, but we know that using jQuery will make our lives a lot easier—plus we can learn a new technology as we go along! We already saw the anatomy of a jQuery statement in Chapter 1; now let’s look at the steps required to put jQuery into action: we wait until the page is ready, select our target, and then change it.
You may have probably guessed that jQuery can be more complicated than this—but only a little! Even advanced effects will rely on this basic formula, with multiple iterations of the last two steps, and perhaps a bit of JavaScript know-how. For now, let’s start nice and easy.

Making Sure the Page Is Ready

Before we can interact with HTML elements on a page, those elements need to have been loaded: we can only change them once they’re already there. In the old days of JavaScript, the only reliable way to do this was to wait for the entire page (including images) to finish loading before we ran any scripts.
Fortunately for us, jQuery has a very cool built-in event that executes our magic as soon as possible. Because of this, our pages and applications appear to load much faster to the end user:

Example 1. chapter_02/01_document_ready/script.js

$(document).ready(function() {
  alert('Welcome to StarTrackr! Now no longer under police …');
});

The important bits here (highlighted in bold) say, “When our document is ready, run our function.” This is one of the most common snippets of jQuery you’re likely to see. It’s usually a good idea to do a simple alert test like this to ensure you’ve properly included the jQuery library—and that nothing funny is going on.

important: You’ll Be Seeing $(document).ready() a Lot!

Almost everything you do in jQuery will need to be done after the document is ready—so we’ll be using this action a lot. It will be referred to as the document-ready event from now on. Every example that follows in this book, unless otherwise stated, needs to be run from inside the document-ready event. You should only need to declare it once per page though.

The document-ready idiom is so common, in fact, that there’s a shortcut version of it:

$(function() { alert('Ready to do your bidding!'); });

If you’d like to use the shortcut method, go ahead! The expanded version is arguably a better example of self-documenting code; it’s much easier to see at a glance exactly what’s going on—especially if it’s buried in a page of another developer’s JavaScript!
At a cursory glance, the document-ready event looks much removed from the structure we encountered back in our jQuery anatomy class, but on closer inspection we can see that the requisite parts are all accounted for: the selector is document; the action is ready; and the parameter is a function that runs some code (our alert).

Selecting: The Core of jQuery

Time is ticking, and deadlines wait for no one. The client has noted that people have been having quoting incorrect celebrity IDs from the web site. This is because the celebrities’ names are all laid out in one big table and it’s difficult for users to line up a celebrity with the correct reference ID. Our client tells us that he wants every other row to be a light gray color so the users can easily find their favorite celebrity.
We have jQuery ready to do our bidding—it just needs us to choose a target for it. Selecting the elements you want to modify on the page is really the art of jQuery. One of the biggest differences between being a novice and ninja is the amount of time it takes you to grab the elements you want to play with!
You might remember from our jQuery anatomy class that all of our selectors are wrapped in the jQuery function:

jQuery()

Or the alias:

$()

We’ll be using the shortcut alias for the remainder of the book—it’s much more convenient. As we mentioned earlier, there’s no real reason to use the full jQuery name unless you’re having conflict issues with other libraries (see ???).

Simple Selecting

Our task is to select alternate table rows on the celebrity table. How do we do this? When selecting with jQuery, your goal should be to be only as specific as required: you want to find out the most concise selector that returns exactly what you want to change. Let’s start by taking a look at the markup of the Celebrities table, shown in Figure 1, “class and id attributes in the HTML page”.

Figure 1. class and id attributes in the HTML page

We could start by selecting every table row element on the entire page. To select by element type, you simply pass the element’s HTML name as a string parameter to the $ function. To select all table row elements (which are marked up with the tag), you would simply write:

$('tr')

important: Nothing Happens!

If you run this command, nothing will happen on the page. This is expected—after all, we’re just selecting elements. But there’s no need to worry; soon enough we’ll be modifying our selections in all sorts of weird and wonderful ways.

Similarly, if we wanted to select every paragraph, div element, h1 heading, or input box on the page, we would use these selectors accordingly:

$('p')
$('div')
$('h1')
$('input')

But we don’t want to change every table row on the celebrity page: just the rows in the table that have the celebrity data. We need to be a bit more specific, and select first the containing element that holds the list of celebrities. If you have a look at the HTML and at Figure 1, “class and id attributes in the HTML page”, you can see that the div that contains our celebrity table has an id of celebs, while the table itself has a class of data. We could use either of these to select the table.
jQuery borrows the conventions from CSS for referring to id and class names. To select by id, use the hash symbol (#) followed by the element’s id, and pass this as a string to the jQuery function:

$('#celebs')

You should note that the string we pass to the jQuery function is exactly the same format as a CSS idids should be unique, we expect this to only return one element. jQuery now holds a reference to this element. selector. Because
Similarly, we can use a CSS class selector to select by class. We pass a string consisting of a period (.) followed by the element’s class name to the jQuery function:

$('.data')

Both of these statements will select the table but, as mentioned earlier when we talked about the DOM, a class can be shared by multiple elements—and jQuery will happily select as many elements as we point it to. If there were multiple tables (or any other elements for that matter) that also had the class data, they’d all be selected. For that reason, we’ll stick to using the id for this one!

tip: Can You Be More Specific?

Just like with CSS, we can select either $('.data') or the more specific $('table.data'). By specifying an element type in addition to the class, the selector will only return table elements with the class data—rather than all elements with the class data. Also, like CSS, you can add parent container selectors to narrow your selection even further.

Narrowing Down Our Selection

We’ve selected the table successfully, though the table itself is of no interest to us—we want every other rowinside the containing table. To do this, we put a space between the ancestor and the descendant: inside it. We’ve selected the containing element, and from that containing element we want to pick out all the descendants that are table rows: that is, we want to specify all table rows

$('#celebs tr')

You can use this construct to drill down to the elements that you’re looking for, but for clarity’s sake try to keep your selectors as succinct as possible.
Let’s take this idea a step further. Say we wanted to select all span elements inside of p elements, which are themselves inside div elements—but only if those divs happen to have a class of fancy. We would use the selector:

$('div.fancy p span')

If you can follow this, you’re ready to select just about anything!

Testing Our Selection

Right, back to our task at hand. It feels like we’re getting closer, but so far we’ve just been selecting blindly with no way of knowing if we’re on the right path. We need a way of confirming that we’re selecting the correct elements. A simple way to achieve this is to take advantage of the length property. length returns the number of elements currently matched by the selector. We can combine this with the good ol’ trusty alert statement to ensure that our elements have been selected:

Example 2. chapter_02/02_selecting/script.js

$(document).ready(function() {
  alert($('#celebs tr').length + ' elements!');
});

This will alert the length of the selection—7 elements—for the celebrity table. This result might be different from what you’d expect, as there are only six celebrities in the table! If you have a look at the HTML, you’ll see where our problem lies: the table header is also a tr, so there are seven rows in total. A quick fix involves narrowing down our selector to find only table rows that lie inside the tbody element:

Example 3. chapter_02/03_narrowing_selection/script.js

$(document).ready(function() {
  alert($('#celebs tbody tr').length + ' elements!');
});

This will alert the correct length of 6 elements—the jQuery object is now holding our six celebrity table row elements.
If the alert shows 0, you’ll know there’s a mistake in your selector. A good way to troubleshoot this sort of issue is to reduce your selector to the smallest, simplest one possible.
In our example, we could simply write $('#celebs'), which would select just the table element and alert a length of 1. From here you can make your selectors more specific, and check that you’re selecting the correct number of elements as you go.

Filters

With the knowledge that we’ve successfully selected all of the table rows, narrowing our selection down to every other row is simple—because jQuery has a filter to do it. A filter removes certain items, and keeps only the ones we want. You’ll acquire a feel for what can be filtered as we work through some more examples, but for now we’ll just jump straight to the filter we need for our zebra stripes:

Example 4. chapter_02/04_filters/script.js

$(document).ready(function() {
  alert($('#celebs tbody tr:even').length + ' elements!');
});

Filters are attached to the item you want to filter (in this case, the table rows) and are defined by a colon, followed by the filter name. The :even filter used here keeps every even-indexed element in the selection and removes the rest, which is what we want. When we alert the selection length now, we see 3, as expected. All of our odd-numbered rows have been filtered out of the selection. There is a wide array of jQuery selector filters available to us: :odd (as you might expect), :first, :last, :eq() (for selecting, for example, the third element), and more. We’ll look at each of these in more detail as we need them throughout the book.

Selecting Multiple Elements

One last trick for basic selecting is the ability to select multiple elements in a single statement. This is very useful, as we’ll often want to apply the same action to several elements in unrelated parts of the page. Separating the selector strings with commas allows you to do this. For example, if we wanted to select every paragraph, div element, h1 heading, and input box on the page, we’d use this selector:

$('p,div,h1,input')

Learning how to use all these different selectors together to access exactly the page elements you want is a big part of mastering jQuery. It’s also one of the most satisfying parts of using jQuery, since you can pack some fairly complex selection logic into a single short line of code!

Becoming a Good Selector

Selecting may seem quite easy and, up to a point, it is. But what we’ve covered so far has only just scratched the surface of selecting. In most cases the basics are all you’ll need: if you’re simply trying to target an element or a bunch of related elements, the element name, id, and class are the most efficient and easiest ways to achieve this.
When moving around the DOM from a given element, the situation becomes a little trickier. jQuery provides a myriad of selectors and actions for traversing the DOM. Traversing means traveling up and down the page hierarchy, through parent and child elements. You can add and remove elements as you go, applying different actions at each step—which lets you perform some mind-bogglingly complex actions in a single jQuery statement!
If you’re a wiz at CSS, you’ll already be familiar with a lot of the statements; they’re mostly borrowed directly from the CSS specification. But there are probably a few that you’re unfamiliar with, especially if you’ve yet to spend much time learning CSS3 selectors. Of course, we’ll be covering and learning advanced selection techniques as we implement them in our examples and demos. For this reason, any time you want to find out more about all the jQuery selectors available, you can just head over to the online documentation and browse away!

Decorating: CSS with jQuery

Selecting elements in jQuery is the hard part. Everything else is both easy and fun. After we have selected our targets, we are able to manipulate them to build effects or interfaces. In this section we will cover a series of jQuery actions relating to CSS: adding and removing styles, classes, and more. The actions we execute will be applied individually to every element we’ve selected, letting us bend the page to our will!

Reading CSS Properties

Before we try changing CSS properties, let’s look first into how we can simply access them. jQuery lets us do this with the css function. Try this:

Example 5. chapter_02/05_reading_css_properties/script.js

$(document).ready(function() {
  var fontSize = $('#celebs tbody tr:first').css('font-size');
  alert(fontSize);
});

This code will alert the font size of the first element matched by the selector (as you’ve likely guessed, the :first filter will return the first element among those matched by the selector).

tip: CSS Properties of Multiple Elements

You can ask for a CSS property after selecting multiple elements, but this is almost always a bad idea: a function can only return a single result, so you’ll still only obtain the property for the first matched element.

The nifty aspect about retrieving CSS properties with this method is that jQuery gives you the element’s calculated style. This means that you’ll receive the value that’s been rendered in the user’s browser, rather than the value entered in the CSS definition. So, if you gave a div a height of, say, 200 pixels in the CSS file, but the content inside it pushed the height over 200 pixels, jQuery would provide you with the actual height of the element, rather than the 200 pixels you’d specified.
We’ll see why that’s really important when we come to implement some funky tricks a bit later.

Setting CSS Properties

So far we’ve yet to see jQuery actually do anything, and it’s high time to remedy that. We know the page is ready (since we popped up an alert), and we’re fairly sure we’ve selected the elements we’re interested in. Let’s check that we really have:

Example 6. chapter_02/06_zebra_striping/script.js

$(document).ready(function() {
  $('#celebs tbody tr:even').css('background-color','#dddddd');
});

You probably saw that coming! This is the same css function we used to read a CSS property, but now it’s being passed an extra parameter: the value we wish to set for that property. We’ve used the action to set the background-color to the value #dddddd (a light gray). Open the file from the code archive in your browser and test that it’s working correctly. You can see the result in Figure 2, “Zebra striping implemented with jQuery”.

Figure 2. Zebra striping implemented with jQuery

important: Were You Ready?

As mentioned previously, this command must be issued from within our document-ready function. If we run the command before the DOM is ready, the selector will go looking for the #celebs element, but will find nothing that matches. At this point it will give up; it won’t even look for the tr elements, let alone change the background style.
This is true for all of the examples that follow, so remember to wrap your code in the document-ready function.

It’s looking good! But perhaps we should add a little extra to it—after all, more is more! What about a shade lighter font color to really define our stripes? There are a few ways we could add a second CSS property. The simplest way is to repeat the entire jQuery statement with our new values:

Example 7. chapter_02/07_multiple_properties_1/script.js (excerpt)

$('#celebs tbody tr:even').css('background-color','#dddddd');
$('#celebs tbody tr:even').css('color', '#666666');

These lines are executed one after the other. Though the end result is correct, it will become quite messy and inefficient if we have to change a whole slew of properties. Thankfully, jQuery provides us with a nice way to set multiple properties at the same time, using an object literal. Object literals are a JavaScript concept beyond the scope of this book, but for our purposes, all you need to know is that they provide an easy way of grouping together key/value pairs. For CSS, object literals allow us to match up our CSS properties (the keys) with the matching CSS values (the values) in a neat package:

Example 8. chapter_02/08_multiple_properties_2/script.js (excerpt)

$('#celebs tbody tr:even').css( 
  {'background-color': '#dddddd', 'color': '#666666'}
);

The object literal is wrapped in curly braces, with each key separated from its corresponding value by a colon, and each key/value pair separated by a comma. It’s passed as a single parameter to the css function. Using this method you can specify as many key/value pairs as you like—just separate them with commas. It’s a good idea to lay out your key/value pairs in a readable manner so you can easily see what’s going on when you come back to your code later. This is especially helpful if you need to set a larger number of properties. As an example:

Example 9. chapter_02/09_multiple_properties_3/script.js (excerpt)

$('#celebs tbody tr:even').css({
  'background-color': '#dddddd', 
  'color': '#666666',
  'font-size': '11pt',
  'line-height': '2.5em' 
});

note: To Quote or Not to Quote

In general, when dealing with JavaScript objects, it’s unnecessary for the keys to be in quotes. However, for jQuery to work properly, any key that contains a hyphen (as our background-color and font-size examples do) must be placed in quotes, or written in camel case (like backgroundColor).
Additionally, any key that’s already a keyword in the JavaScript language (such as float and class) must also be written in quotes.
It can be confusing trying to remember which keys need to be quoted and which don’t, so it’s to be recommended that you just put all object keys in quotes each time.

Classes

Excellent! We’ve already struck two tasks off the client’s list, and we have some funky jQuery happening. But if you stop and have a look at our last solution, you might notice something a little fishy. If you were to inspect the zebra-striped rows in a development tool such as Firebug, you’d notice that the CSS properties have been added to the paragraphs inline, as illustrated in Figure 3, “Inline styles viewed with Firebug”.

Figure 3. Inline styles viewed with Firebug

tip: Firebug

Firebug is a particularly useful tool for examining the DOM in your browser, as well as monitoring and editing CSS, HTML, and JavaScript (including jQuery). A debugger’s Swiss Army knife for the Web, it will save you hours by helping you see exactly what your browser thinks is going on. It’s available as a Mozilla Firefox extension, or as a stand-alone JavaScript file that you can include in your projects if you develop using another browser.

Inline styles are a big no-no in HTML/CSS best practice, right? That’s quite true, and this also applies in jQuery: to keep your code clear and maintainable, it makes more sense for all the styling information to be in the same place, in your CSS files. Then, as we’ll soon see, you can simply toggle those styles by attaching or removing class attributes to your HTML tags.
There are times when it is a good idea to use the css jQuery method in the way we’ve just seen. The most common application is when quickly debugging code: if you just want to outline an element in red to make sure you’ve selected it correctly, switching to your CSS file to add a new rule seems like a waste of time.

Adding and Removing Classes

If we need to remove the CSS from inline style rules, where should we put it? In a separate style sheet, of course! We can put the styles we want in a rule in our CSS that’s targeted to a given class, and use jQuery to add or remove that class from targeted elements in the HTML. Perhaps unsurprisingly, jQuery provides some handy methods for manipulating the class attributes of DOM elements. We’ll use the most common of these, addClass, to move our zebra stripe styles into the CSS file where they belong.
The addClass function accepts a string containing a class name as a parameter. You can also add multiple classes at the same time by separating the class names with a space, just as you do when writing HTML:

$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');

We only want to add one class name, though, which we’ll call zebra. First, we’ll add the rule to a new CSS file (including it with a link tag in our HTML page):

Example 10. chapter_02/10_adding_classes/zebra.css

.zebra { 
  background-color: #dddddd;
  color: #666666;
}

Then, back in our JavaScript file, we’ll modify the selector to use jQuery’s addClass method rather than css:

Example 11. chapter_02/10_adding_classes/script.js

$('#celebs tr:even').addClass('zebra');

The result is exactly the same, but now when we inspect the table in Firebug, we’ll see that the inline styles are gone—replaced by our new class definition. This is shown in Figure 4, “Adding classes to table rows”.

Figure 4. Adding classes to table rows

That’s much better. Now, if we want to change the appearance of the zebra stripes in the future, we can simply modify the CSS file; this will save us hunting through our jQuery code (potentially in multiple locations) to change the values.
There’ll also be times when we want to remove class names from elements (we’ll see an example of when this is necessary very soon). The action to remove a class is conveniently known as removeClass. This function is used in exactly the same way as addClass; we just pass the (un)desired class name as a parameter:

$('#celebs tr.zebra').removeClass('zebra');

It’s also possible to manipulate the id attribute, or any other attribute for that matter, using jQuery’s attr method. We’ll cover this method in more detail later in the book.

What’s Next?

Next week we’ll bring you another introductory jQuery article. We’ll be looking at modifying the DOM itself using jQuery: adding, removing, and changing elements. We’ll also learn some of the basics of jQuery animation and the theory behind the concept of progressive enhancement.
If you can’t wait till next week, you can read the full contents of both articles, as well as over 100 more pages of jQuery content, by downloading the sample PDF of jQuery: Novice to Ninja. It also includes the full code archive for the entire book.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 6)

2010-08-18T07:08:00.000-07:00

Lack of Indexes
The ability to index data is one of the key benefits of storinginformation in a database. Imagine for a moment that you need to lookup a name in a telephone book. You take advantage of the fact that thelast names are sorted in alphabetic order -- it would take forever tofind a name if the entries were listed in random order. Databases takeadvantage of the way your information is sorted for the same reason.The default sort order in a table is called a clustered index.
Of course, you may want to search for your information in severaldifferent ways. To continue with the phone book example, you may wantto look up businesses by zip code, business type, or name. The commonapproach to implementing this capability in a database is to order thedata based on the most common search order, then place additionalindexes to facilitate other search criteria. The data is sorted by theclustered index, but the database stores additional information to helpit look up rows using other criteria. This additional lookupinformation is called a non-clustered index.
One of the most common reasons for slow queries is that the databaseis performing a table scan, which occurs when the database lacks anappropriate index to use to look up data. Asking your database toperform a table scan is equivalent to asking someone to look up aperson in a phone book that lists entries in random order. Tosummarize, proper indexes are a necessity for database performance.
Incorrect Indexes
If indexes are good, more indexes are great, right?
Actually, no. There's a cost incurred when you add indexes to adatabase. Each time a row is added or updated, all the indexes need tobe updated, and too many indexes can slow your database down. It'simportant to select a limited number of indexes that'll give you quicklookups without slowing down your updates. We'll be talking about sometools to help you with this task later in this chapter.
Poorly Written Queries
It's easy to land yourself in trouble if you don't really understandSQL. SQL is not just another programming language -- it's adeclarative, set-based query language. A lot of your standardprogramming tricks don't apply here.
We'll talk about troubleshooting query plans and poorly writtenqueries in the section called "How can I troubleshoot a slow query?"later in this chapter.
Deadlocks
Databases use locks to prevent your data from being messed up by conflicting updates.
For example, we can't apply a 10% discount to all of our productprices and delete all products that are priced over $100 at the sametime -- we need to process one product at a time. Locks allow us to dothis. The SQL Server engine is reasonably clever about how it usesdatabase locks -- it'll often lock portions of a table (called pages)and, sometimes, individual rows.
Yet there's always the potential for two transactions to arrive at astate where both are waiting for the freeing of a lock that'ssimultaneously held by the other transaction. This situation is calleda deadlock.
For example, consider two queries that use the Products and Orders tables. The first query, which we'll call ProductsThenOrders, uses the Products table first; the second query, OrdersThenProducts, uses the Orders table first.
ProductsThenOrders locks the Products table and begins to make updates. Meanwhile, OrdersThenProducts locks the Orders table and performs its updates. No problems so far.
Now ProductsThenOrders is ready to update the Orders table, but it can't -- the other query has it locked. Likewise, OrdersThenProducts wants to update the Products table, but is also blocked for the same reason. We're deadlocked!
When SQL Server eventually detects a deadlock, it will pick onequery as the "deadlock victim" and kill it, while the survivors arereleased. The result of this conflict resolution process is that one ofthe queries will return with an error that it was unable to complete --not the most efficient use of resources.
Deadlocks don't happen too frequently -- unless your applicationexecutes a lot of transactions. It's important to be aware of them andto fix deadlock conditions quickly. Deadlocks can be avoided by:

minimizing transaction length
accessing tables in the same order in competing queries

In the above example, accessing the Products table first in both queries would have prevented the deadlock.
The NOLOCK Query Optimizer Hint
Even if you're not encountering deadlocks, locks have a definiteperformance impact. Locks restrict access to your data in such a waythat only one query can use it at any time -- an approach that's safebut slow.
In some cases, you mightn't need to lock your rows. You mightquery historical data that isn't subject to change, or it mightn't becrucial that the data returned in the query is perfectly up to date --comments on a weblog might fall into this category.
In these cases, you can use the NOLOCK hint to tellSQL Server you want to read directly from the table without honoringany locks. Note that this only makes sense for SELECTstatements -- any data modification will always require a lock. Bestpractices avoid using table hints -- parameters that override thedefault behavior of a query -- when possible. However, this one isrelatively innocuous as long as you understand that you may be viewinguncommitted changes. Just don't use it when displaying criticalinformation, such as financial data.
Here's how you'd use it:
SELECT COUNT(1) FROM Orders WITH (NOLOCK)
Since this statement places no locks on the data that it'sreading, other queries won't be forced to wait for the query tocomplete before they can use the Orders table.
You can read more about deadlocks in the MSDN article, "Analyzing Deadlocks with SQL Server Profiler."
Hardware Issues
As with any software application, SQL Server performs at its optimum when it's running on sufficiently powerful hardware.
If upgrading your server is an option, the first thing you shouldlook at is memory, as SQL Server makes heavy use of available memory tocache frequently used data. And the cost of new memory is relativelycheap -- often cheaper than the time required to tune an underpowereddatabase server. Adding memory can compensate for slow CPU or driveaccess, since caching can significantly reduce the work that SQL Serverneeds to complete.
After you've exhausted your memory upgrade options, the next mostcommon hardware issue is a disk read/write bottleneck. Databasehardware configuration is a large topic and falls well beyond the scopeof an ASP.NET book, but a great first step is to put your log files ona drive that's as fast possible, and is separate from the operatingsystem and database files.
Using a production database server for other tasks -- especially IIS-- is a bad idea. It's often necessary in a development environment,but it will have a performance impact in production.

How can I troubleshoot a slow query?

Optimizing database performance is a complex topic that's thesubject of numerous very thick books, so I'm not going to pretend thatwe can make you an expert in query optimization in a few short pages.Instead, I'll focus on some of my favorite "developer to developer"tips to point you in the right direction.
Solution
Before you begin to look for a solution, it's important to verifythe problem at hand. You can then begin the process of elimination.
Verifying the Problem
First, verify that the SQL you think is being executed is actuallybeing executed. The best way to confirm this is to duplicate theproblem: run the query in SQL Server Management Studio (SSMS).
If you have any doubt about which SQL commands are being executed,run the SQL Profiler for confirmation (see the section called "How do Ispeed up my database queries?" earlier in this chapter for details onusing the SQL Profiler). This tool is especially helpful when used withapplications that make use of declarative data binding, or withframeworks that handle data access for you.
Clearing the SQL Cache when Testing in SSMS
SQL Server uses an intelligent caching system to enhanceperformance. If you run frequent queries against a certain table, SQLServer will recognize that fact and store the source (and result data)of those queries in its internal cache. By doing so, future matchingqueries won't need to look up this data until the next time it changes.
This functionality, while useful, can be confusing if youconduct your tests by running your queries from SSMS -- some of yourquery information may be cached, so your queries will run faster thesecond time you execute them.
To ensure that you make valid comparisons that don't returncached information, clear your cache each time you run the query. Thefollowing script does just this -- first it drops caches, then it callsa CHECKPOINT to flush pending changes from memory to disk, and finally it clears any data that has been stored in memory:

DBCC FREESESSIONCACHE DBCC FREEPROCCACHE DBCC FREESYSTEMCACHE('ALL') CHECKPOINT DBCC DROPCLEANBUFFERS GO -- Your query goes here

Once you're able to duplicate the problem in SSMS, you can dig into the query itself.
Checking for Large Result Sets
If your query returns more rows than you expected it to, there are two main problems to look at -- cross joins and incomplete WHERE clauses.
A cross join occurs when you fail to specify a join correctly. Here's an example:
SELECT * FROM Customers, Orders, [Order Details], Products
In the above query, we haven't specified how the tables should bejoined, so the SQL interpreter will attempt to return every possiblecombination. That means that our result set will include every Ordercombined with every Customer (not just the Orders that each Customermade). So this query returns about 12.5 billion rows (91 Customers ×830 Orders × 2155 Order Details × 77 Products) -- that's roughly 7.5GBof data.
That return is obviously way out of line, considering there are only830 orders in the system. Of course, this is a slightly exaggeratedexample for demonstration purposes, but it's easy to see how a singlecross join can waste a lot of database resources (CPU and memory) anddelay network traffic between the database and web server.
An incomplete WHERE clause isn't quite as bad, but can still return more rows than you need. The following query returns 2155 rows:

SELECT * FROM [Order Details]

This one, on the other hand, returns three rows:

SELECT * FROM [Order Details] WHERE OrderID = 10252

ADO.NET makes it really easy to filter your data on the server, butunfortunately this feature is a double-edged sword -- it can maskproblems with a large result set. That's why it's important to verifythe problem with real, systematic measurement rather than just assumethat a Gridview displaying only a handful of rows couldn't possibly be the source of the problem.
Checking the Query Plan
If your query is indeed returning the correct number of rows, butstill takes too long, the next step is to look at the query plan, whichis a visual representation of the steps that your query takes to returnits result set.
You can view the estimated query execution plan in SSMS if you firstselect the query, then select Display Estimated Execution Plan from theQuery menu (tor use the toolbar button or the keyboard shortcut --Ctrl-L). You'll also have the option to include the actual queryexecution plan (also available from the Query menu, the toolbar, andvia the keyboard shortcut Ctrl-M). The actual plan is a little moreaccurate than the estimated one, but requires that you actually executethe query and wait for it to complete.
Let's look at the actual execution plan for the uspGetBillOfMaterialsstored procedure in the AdventureWorks sample database that comes withSQL Server. Enter the following text in the SSMS query window, thenturn on the Include Actual Execution Plan option and execute the query:
EXEC dbo.uspGetBillOfMaterials 800, '2001-01-09'
Figure 15.16 shows the result.

Figure 15.17 shows a close-up of the bottom right-hand corner of our plan.

You'll need to look for a few important things when you're analyzing an execution plan:

Thick lines in the execution planindicate large amounts of data being passed between steps. I was oncetroubleshooting an extremely slow summary report query that returnedonly a dozen rows. When I looked at the execution plan, I saw that someof the lines between steps were an inch thick -- this indicatedbillions of rows being passed between those steps, which were thenfiltered down to the final dozen rows displayed in the browser. Thesolution was to modify the query to ensure that the data was filteredas early as possible.
Large percentage numbers indicate the most expensive operations -- the value of 44% in Figure 15.17 is one example of this.
If one of the steps on your plan contains the word "scan"(or, in particular, "Table Scan"), this is an indication that the SQLengine had to step through every row in a table to find the data thatit was after. This is usually associated with a high Cost value. Thereare occasions when a table scan is acceptable -- such as when you'reperforming a lookup against a very small table -- but in generalthey're best avoided.

If you see a problem, you can troubleshoot it in SSMS: modify thequery and view the effect of your change on the execution plan.
If it looks as though your issue may be the result of an indexingproblem, the best solution is to right-click the query and selectAnalyze Query in Database Engine Tuning Advisor. The DTA will launchwith all the necessary options preselected, so all you need to do isclick the Start Analysis button. Figure 15.18 shows the results of onesuch analysis.

As you can see, the DTA has recommended two index changes and onestatistical change that should improve this query's performance by 31%.Of course, you'll need to consider the effect that these additionalindexes will have on updates to the affected tables. In this case,since the tables in this particular example are probably updated ratherinfrequently, I think that these new indexes make sense. You can applyor save these changes via the Actions menu.
Eliminating Cursors
You'll want to look for and eliminate any unnecessary cursors -- pointers for traversing records in the database.
Cursors let you write in a procedural style, applying logic to asingle table row at a time. While it can be tempting to drop back tothose skills that are most familiar to you in sticky situations,cursor-based queries will prevent the database engine from takingadvantage of the index optimizations and set-based operations for whichit was designed.
Resist the urge and get rid of your cursors!
I've written a lot of SQL in ten years of professional programming,and I've yet to encounter a case where cursors were required. Irecently rewrote someone else's complex query from using cursors tostandard SQL, and the time for the resulting operation dropped fromeight hours to just over one minute.
Think about how to describe the problem as a bulk operation. Forexample, suppose your mode of thinking about a query was something likethis:
"I'll loop through the orders table, get the product ID, then grab the price, and compare it to ..."
Instead, consider rephrasing it to something like this:
"I want to find all orders for products that have prices greater than a certain amount ..."
Remember that you can use common table expressions (CTEs), tablevariables, and temporary tables if you're stuck. While these fallbackoptions aren't as efficient as performing a bulk operation, they atleast allow the query engine to make use of indexes.
The Problem with SELECT *
Most developers will tell you that SELECT * queries are bad, but for the wrong reason.
The commonly understood reason is that SELECT * iswasteful because it returns columns that you don't need. While this istrue, most normalized tables don't contain that many columns, so theseextra rows usually won't have a noticeable impact on your site'sperformance unless they number in the millions.
Often, the bigger problem with SELECT * is the effectit will have on the execution plan. While SQL Server primarily usesindexes to look up your data, if the index happens to contain all ofthe columns you request, it won't even need to look in the table. Thisconcept is known as index coverage.
Compare the following two queries (against the sample AdventureWorks database):

SELECT * FROM Production.TransactionHistoryArchive WHERE ReferenceOrderID < 100 SELECT ReferenceOrderLineID FROM Production.TransactionHistoryArchive WHERE ReferenceOrderID < 100

In both cases, we're returning the same number of rows, and theSELECT * query only returns 15KB more data than the second query.However, take a look at the execution plans shown in Figure 15.19.

You'll notice that the first query took 99% of the relative work forboth queries. The second query was able to look up the values in theindex via an index seek -- a search that touches on only those rowsthat qualify. The first query, however, had to scan all the rows in thetable. In this case, the fact that the requested columns were allcontained in the search index resulted in a performance difference ofnearly one hundred-fold.
It's important to include commonly queried data in your indexes -- something that's simply not feasible if you're using SELECT *. If you just query the rows you need, the DTA will be able to recommend indexes to cover them.
Accessing More Information
There's a plethora of resources to which you can turn when you'restuck on a really difficult SQL database issue. Here are just a few ofthem:

The Microsoft TechNet article on troubleshooting performance problems in SQL Server 2005
SQLTeam.com -- one of many SQL Server community forums
The SitePoint Databases Forum

Summary

Performance optimization is an iterative process -- be prepared tofollow the repetitive steps of analyzing your site's performance,tuning your application, analyzing the performance again, then tuningsome more, until your site performs the way you want it to. Prematureoptimization -- tuning without understanding what's causing theslowdown -- is likely to cause more problems than it solves.
ASP.NET and SQL Server 2005 power some of the most popular and powerful sites upon the planet, including MySpace,which serves billions of page views per day. You've got all the toolsyou need to get the maximum possible use out of your web server -- Ihope the tips in this chapter will help you to put them to work.
That's it for this chpater of The ASP.NET 2.0 Anthology, 101 Essential Tips, Tricks & Hacks. Feel free to download this chapter -- along with three others -- for offline reference.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 5)

2010-08-18T06:52:00.000-07:00

How can I gain more control over the ASP.NET cache?

As we've seen, declarative caching provides a great return oninvestment -- it's very easy to enable, and will give you someimmediate performance benefits. However, you can gain even more benefitfrom the ASP.NET cache with only a little more work.

Solution

If you'd like to really take advantage of caching in ASP.NET, it'stime you met the Cache API. Declarative caching might be easy to setup, but it can only take you so far. Unlike declarative caching, whichstores and reuses rendered HTML, the Cache API allows you to store dataefficiently in your application logic or code-behind code.

The simplest way to think of the ASP.NET cache is to compare it tothe Application object. They're similar in that you can use both tostore objects or values by a string key:

Cache["States"] = new string[] {"Alabama","Arkansas","Alaska"}; Cache["ProductData"] = GetProductDataset();

So what's the difference between the Application object and thecache for the storage of information? ASP.NET can remove items from thecache whenever it needs to free up memory. The cache has a limitedamount of memory to work with, so when new content is added to thecache, the cache usually has to delete some older, cached data.

Different classes of information can be stored in your cache:

Expensive data is information thatyou want to keep in the cache whenever possible. The term "expensive"refers to the fact that the generation of this class of data involvesvaluable resources (database or processing power).
Inexpensive datarefers to all of the other types of information that you'd like to putin the cache if there happens to be room, but is not particularlyresource-intensive to generate.

The challenge is to prevent the inexpensive data from pushing the expensive data out of the cache.

The Cache object comes with some features that give yousome control over which items are placed in the cache, and how longthey stay there. Using the Cache object, you can applycustom cache dependencies, explicitly set cache expiration policies,and define callback events that fire when an item is removed from thecache (so you can decide whether you'd like to add it to the cacheagain).

One of my favorite features is the sliding expiration, which is asetting that lets you specify that an item should stay in the cache --as long as it has been used within a certain period of time:

Cache.Insert("ProductData", GetProducts(), null,     
    System.Web.Caching.Cache.NoAbsoluteExpiration,     
    TimeSpan.FromMinutes(10));

The above code tells the cache that we'd like it to keep ourProducts data set, as long as it has been used in the past ten minutes.The benefit of this approach is that frequently used data will staycached, and infrequently used data will expire and stop taking upvaluable space.

We can customize the settings for our cache, for example, setting alonger sliding expiration timeframe on data that's more expensive (suchas that which results from a web service call). We could even add acache dependency on the results of a GetLastUpdateTimestampweb service call to keep the data current if needed. Remember, though,that any data can still be removed from the cache at any time -- oursliding expiration time setting is really just a suggestion to thecache system.

Discussion

Once you've begun to cache your data, you'll begin to see thebenefit of what are some tried and true cache access patterns. StevenSmith wrote about the cache data reference pattern in his excellent MSDN article. Here's some code that implements this pattern:

public DataTable GetCustomers(bool BypassCache) { string cacheKey = "CustomersDataTable"; object cacheItem = Cache[cacheKey] as DataTable; if((BypassCache) || (cacheItem == null)) { cacheItem = GetCustomersFromDataSource(); Cache.Insert(cacheKey, cacheItem, null, DateTime.Now.AddSeconds(GetCacheSecondsFromConfig(cacheKey), TimeSpan.Zero); } return (DataTable)cacheItem; }

Smith's article explains the technique in more detail, but the mostimportant point to note is the possibility that the object may not bein cache, or could potentially be removed at any time. The above codeis safe because it loads the cached object, checks whether the objectis null, and, if so, loads the object data and adds it back to thecache.

Another of my favorite cache patterns is one that Gavin Joyce uses on his DotNetKicks site -- the reluctant cache pattern, which relies on his ReluctantCacheHelper class. This pattern prevents an application from adding to the cache information that's unlikely to be used.

For example, when Google indexes your site, it will load every pagethat it can find. If your site implements a cache that is used by alarge number of pages, your server will perform a lot of unnecessarywork adding data to the cache, only for that data to be immediatelydropped from the cache as other pages are added. Similar to the slidingexpiration pattern, but in reverse, this pattern only adds data to thecache if it's been used a lot recently. Here's an example thatimplements this pattern:

public static List GetCustomers() { string cacheKey = "Customers"; int cacheDurationInSeconds = 5; // low number for demo purposes object customers = HttpRuntime.Cache[cacheKey] as List; if (customers == null) { customers = CustomerDao.GetCustomers(); if (new ReluctantCacheHelper(cacheKey, cacheDurationInSeconds, 2).ThresholdHasBeenReached) { HttpRuntime.Cache.Insert(cacheKey, customers, null, DateTime.Now.AddSeconds(cacheDurationInSeconds), System.Web.Caching.Cache.NoSlidingExpiration); } } return (List)customers; }

How do I speed up my database queries?

We've looked at a few ways to optimize your ASP.NET code, but ifyour queries are slow, you'll still have a site that drags its heels.You can hide the problem to some degree if you cache your data or addservers to your web farm, but eventually you will need to deal withyour slow queries.

Of course, the best bet is to work with a good DatabaseAdministrator (DBA). We're ASP.NET developers, and while we can't helpbut learn about databases as we work with them, database administrationis not our full-time job. A good DBA is by far the best solution to adatabase problem, but sometimes, it's just not an option. If you workon a team without a DBA, or you have limited access to your DBA, youneed to do your best to solve problems when you can.

Slow Query or Slow Database?

It's important to decide whether you're dealing with one slow queryor a whole slow database. Is one particular page slow, or is the wholesite groaning? This solution will focus on the former; if you cannarrow your database performance problems down to individual queries,refer to the section called "How can I troubleshoot a slow query?"later in this chapter.

Solution

Use the SQL Profiler and Database Tuning Advisor, located in the SQL Server Performance Tools folder.

Tuning a database server is hard. Initially, it can be difficult tofind out what's responsible for slowing things down. Even then, fixingone problem (for example, applying indexes to a table to improve thespeed of SELECT statements) can introduce new problems (such as slower INSERTs and UPDATEs).

Fortunately, the existence of the SQL Performance Tools means you don't have to bother with guesswork.

The SQL Profiler captures what's going on in your database,including which SQL statements are being executed, who's executingthem, and how long they're taking. The profiler is the first step todetermining what's actually happening on your server.

Note that the profiler captures both ad hoc and dynamic SQL. Thismeans that the profiler is especially useful when control, library, orframework code is making a call in your database -- you may not haveaccess to the ASP.NET code, but the profiler will reveal exactly whichqueries are being executed, and how long they are taking.

It's best if you can run a profiler trace on your actual productionsystem, but this may not always be possible -- profiling a server slowsthe server down, and the site's regular users may not appreciate theextra delays. If you can't run on the production system, you can stillgain a reasonable idea of server activity on a local or developmentserver by simulating the way real users would using your site on thelive server.

Running the profiler can be a bit daunting the first time -- thereare numerous advanced settings to monitor and tweak. It's best to startout with a predefined template like the one I've chosen in Figure 15.9.The two most useful templates for general performance diagnostics arethe TSQL_Duration and Tuning templates.

The TSQL_Duration template is useful for giving you a quick snapshotof the queries and stored procedures that take the longest time toexecute. Figure 15.10 shows some sample queries running against theNorthwind example database. The slowest query -- the query with thegreatest duration value -- is highlighted at the bottom of the list.

In a simple case like the one above, you may be able to deduceenough information from the TSQL_Duration trace to begin tuning aspecific query. If you're at all in doubt, however, it's best to runthe profiler with the Tuning template and analyze the results in theDatabase Tuning Advisor (also referred to as the DTA), a tool foranalyzing database performance and suggesting which tables should beindexed.

To do this, first save your trace file from the profiler, as shown in Figure 15.11.

Now, we'll use the DTA to open the trace file that we just saved, asI've done in Figure 15.12, and click the Start Analysis button.

For my sample queries, DTA recommended that I apply a few indexes,to produce an estimated performance improvement of 5%, as shown inFigure 15.13. (The Northwind database is already more or less indexed;your estimated improvement should be a lot higher, with any luck.)

If you scroll to the right, so that the Description column isvisible, you'll see exactly which indexes and statistical changes theDTA recommends. Click on a recommendation to see a preview of thescript that will add the proposed index, as shown in Figure 15.14.

To implement these changes, I suggest you save the recommendations(Actions > Save Recommendations...), review them in SQL ServerManagement Studio (SSMS), and apply them if you feel comfortable withthem. Once you've done this, repeat your original profiling test andverify that the changes have improved your database performance.

Running the DTA with a SQL Workload Script File

Our walkthrough of the DTA used a SQL Server Trace file for theworkload, but you can also use the DTA against a SQL script. Here's anabbreviated copy of the script I used for this walkthrough:

Example 15.10. SampleSqlWorkload.sql (excerpt) USE [Northwind] GO SELECT * FROM [Order Details] od INNER JOIN Orders o on o.OrderID = od.OrderID GO SELECT * FROM [Category Sales for 1997] GO SELECT * FROM Invoices GO SELECT COUNT(OrderID) OrderCount, ShipPostalCode FROM Orders GROUP BY ShipPostalCode ORDER BY COUNT(OrderID) DESC GO EXEC [Ten Most Expensive Products] GO SELECT COUNT(OrderID) OrderCount, c.CustomerID, c.ContactName FROM Orders o INNER JOIN Customers c ON o.CustomerID = c.CustomerID GROUP BY c.CustomerID, c.ContactName sORDER BY COUNT(OrderID) DESC GO SELECT LEN(ContactName), ContactName FROM Customers ORDER BY LEN(ContactName) DESC GO

The important point to note is that there are GO separatorsbetween statements, which ensures that they're executed independently.You'll want your SQL workload script file to simulate actual usage,which means that you should include repeated calls to the most commonlyused queries.

Using the Performance Dashboard

SQL Server includes Dynamic Management Views (DMVs) -- databaseviews that contain lots of useful management and troubleshootinginformation about your database. All the DMV views begin with theprefix sys.dm_; for example: sys.dm_index_usage_stats.

SSMS includes some built-in reports that leverage SQL ServerReporting Services as well as the DMVs. You can view these reports inSSMS if you right-click a database and select Reports > StandardReports....

SQL Server SP2 includes the ability to include custom reports, and one of the first to be released is the Performance Dashboard.Once it's installed, the Performance Dashboard gives you a graphicalsnapshot that's visible in your browser, without you having to run atrace. Figure 15.15 shows the dashboard in action.

Discussion

One important aspect of troubleshooting a slow database is tounderstand what's making it run slowly. There are many potential causesof slow performance, but some common problems head the list. Let's lookat a few of them.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 4)

2010-08-18T03:37:00.000-07:00

How can I improve the speed of my site?

Most ASP.NET web servers perform a lot of unnecessarily repetitive work.
For example, suppose you have a page with a DataGrid bound to atable called Products. Every time a user requests the Products page,ASP.NET has to:

Look up the products data in the database.

Process the page.

Databind the product data.

Render the results to HTML.

Output the results to the browser.

If we assume the products list changes infrequently in comparison tohow often it is requested by a user, most of that work is unnecessary.Instead of doing all that work to send the same HTML to all users, whynot just store the HTML and reuse it until the Products table changes?
Solution
The ASP.NET cache provides the key to efficient storage and reuse of our HTML.
There are several ways to use the cache; we'll focus on the easiesttricks to get you started, then point you toward some resources thatwill help you tackle more advanced ways to utilize the cache.
The simplest solution is to use the OutputCachedirective on your pages or user controls. For example, the followingpage will be cached for one hour (3600 seconds). You can refresh thepage all you like, but the value of DateTime. Now won't change until the page is cleared from the cache. Here's the code that retrieves the current time:

Example 15.7. OutputCacheSimple.aspx (excerpt) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OutputCacheSimple.aspx.cs" Inherits="chapter_15_performance.Performance.OutputCacheSimple" %> <%@ OutputCache Duration="3600" VaryByParam="none" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Output Cache Example</title> </head> <body> <form id="form1" runat="server"> <h1>Output Cache Example</h1> <div> <%= DateTime.Now.ToLongTimeString() %> </div> </form> </body> </html>

Figure 15.5 represents our page at 11:01:41 p.m.

Figure 15.6 shows what it looks like at 11:23:01 p.m.

Notice that the time didn't change, as the page wasn't re-rendered.
Now let's look at a slightly more complex caching example:

Example 15.8. OutputCache.aspx (excerpt) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OutputCache.aspx.cs" Inherits="chapter_15_performance.Performance.OutputCache" %> <%@ OutputCache Duration="30" VaryByParam="none" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Output Cache Example</title> <script type="text/javascript"> var d = new Date(); </script> </head> <body> <form id="form1" runat="server">  <% System.Threading.Thread.Sleep(5000); %> <h1>Output Cache Example</h1> <div> Time written by ASP.NET: <%= DateTime.Now.ToLongTimeString() %> </div> <div> Time written by Javascript: <script type="text/javascript"> document.write(d.toLocaleTimeString()) </script> </div> <div id="divCached" style="margin-top:25px;width=300px;"> <script type="text/javascript"> var aspTime = new Date(); aspTime.setSeconds(<%= DateTime.Now.Second %>); // If there are more than two seconds difference // between the ASP.NET render and the javascript // evaluation, the page is almost certainly cached. if(Math.abs(d - aspTime) > 2000) { document.write('Probably Cached'); document.getElementById("divCached").style.backgroundColor = "Coral"; } else { document.write('Not Cached'); document.getElementById("divCached").style.backgroundColor = "Aqua"; } </script> </div> </form> </body> </html>

The above page writes out the current time according to both ASP.NET(server side, cached) and JavaScript (client side, not cached).Additionally, if the JavaScript time is more than two seconds after theASP.NET time, the page will report that it has probably been cached.
The first time this page is viewed, there's a five-second delay (dueto the call to Thread.Sleep), then the page shown in Figure 15.7 isdisplayed.

But if you refresh the page within 30 seconds, you'll notice twodifferences. First, the page will return immediately. Second, it lookslike Figure 15.8.

Using VaryByParam to Cache Parameterized Pages
When you start to consider which pages in your application could becached, you'll probably discover that many of them contain contentthat's 90% static. The remaining 10% of these pages is likely tocontain one or two tiny portions that vary frequently. For example,consider a page in the example Northwind database that displays cataloginformation, including products filtered by category. The category isset by a parameter in the query string, so the following two URLs willyield different results:
http://www.contoso.com/Northwind/Products.aspx?Category=Seafood
http://www.contoso.com/Northwind/Products.aspx?Category=Produce
The novice programmer might apply the following code to cache these pages:
<%@ OutputCache Duration="30" %>
However, if you were to apply this code you'd quickly discover aproblem -- the category filter would stop working. The first version ofthe page that was displayed would be cached, so the filtering logicwould be ignored on subsequent page views.
That's the exact function for which the VaryByParam attribute is used. In this case, we'd change the OutputCache directive to the following:

<%@ OutputCache Duration="30" VaryByParam="Category" %>

The VaryByParam attribute tells the cache system tostore a different version of the page every time it sees a new valuefor Category in the URL. Once this attribute is in place, our userswill be able to access a cached copy of the page for both the Seafoodand Produce categories.
Keep in mind that storing different versions of the page foreach parameter value isn't always the best idea -- in cases where youhave many different parameter values, you can quickly use a largeamount of memory to hold all possible variations of the page. Use VaryByParam when your pages utilizes a limited number of parameter values.
Note that the number of seconds displayed in theJavaScript-generated time has updated to 59 seconds, while the ASP.NETtime still shows 39. What this discrepancy suggests is that the serveris sending the same HTML to the client for each request. Suppose thatinstead of just displaying the current time, we'd bound several GridViews to the results of several expensive database queries. With caching applied to such a page, the savings would be considerable.
You don't have to cache a page for long to see significantperformance increases -- a cache of one minute or less can improve yoursite's performance dramatically. For example, adding a cache to asimple page that just binds a GridView to the Productstable in the example Northwind database will increase the performanceof that page by about 500%, and for a page that performs a complexdatabase query or processor-intensive calculation, this saving islikely to be amplified even further.
Using Post-cache Substitution
While the OutputCache directive allows you to specifythat the cache should vary with a specific parameter, it's not reallyefficient to cache a multitude of copies of one page that are nearlyall identical.
Post-cache substitution, using the Substitutioncontrol, allows you to inject dynamic content into a cached page. Theresult is that you can cache some pages that you probably thought wereunable to be cached. Read more on this subject in Scott Guthrie's article on the topic.
One of the problems you might notice with this approach, however, islatency -- the time delay between the point at which your data isupdated and the moment when that same updated data reaches a user'sbrowser. In the examples we've looked at in this solution, we displayedthe same timestamp for 30 seconds after the page was rendered -- thisis great for performance, but might be a problem if your users requirethe data to always be up to date.
Fortunately, ASP.NET 2.0 has a solution to this problem, which we'll look at next.

How do I refresh my cache when the data changes?

As we saw in the previous tip, judicious use of output caching canprovide dramatic improvements in your site's performance. Outputcaching works by saving the generated HTML for a rendered ASP.NET page.As long as the cache is valid, future requests for that page will justreturn that stored HTML, rather than processing the page again, whichmeans no page parsing, hits to the database, data binding -- any ofthose tasks that require precious bandwidth or processor cycles. Usedcorrectly, caching can improve your requests-per-second on ahigh-traffic page by a factor of 100 or more.
For example, suppose you had a page that contained a DataGrid boundto a table called Products. Without caching, every page request wouldrequire ASP.NET to look up the product data in the database, processthe page, data bind the product data, render the results to HTML, andoutput the results to the browser.
If the page was cached, only the first request for this page wouldrequire all that work; after that, ASP.NET would just skip all the hardwork and serve up the HTML until the cache expired. The end resultwould be the same whether or not a cache was used: the same HTML wouldbe sent to the browser. However, since a lot less work and networktraffic is required to display cached HTML, the server can serve thecached page much faster and to more people.
One problem with cached pages is that they don't pick up data thathas changed right away. To continue with the example above: if we wereto add a new product to the Products table, it wouldn't show up on thepage until the cache expired. Fortunately, ASP.NET 2.0 provides a goodmechanism to refresh your cache automatically when the underlying datachanges.
Solution
The SQL Cache Dependency was created to solve this problem. A fewsteps are required to set it up, but once it's up and running, you canuse it throughout your whole application.
Using SQL Cache Dependencies with Older Versions of SQL Server
In this book I'll only cover the steps for configuring SQL ServerCache Dependencies on SQL Server 2005; there's a wealth of informationon MSDN about how to set it up on SQL Server 2000:

First, you'll need to make sure you've enabled SQL Server ServiceBroker for your database. You can confirm that with the following query:
ALTER DATABASE Northwind SET ENABLE_BROKER;
Next, you'll need to start the SQL Dependency event listener. Therecommended place to make the change that triggers this listener is inthe Application_Start method of Global.asax:

Example 15.9. Global.asax (excerpt) void Application_Start(object sender, EventArgs e) { string northwindConnection = WebConfigurationManager.ConnectionStr ➥ings["NorthwindConnectionString1"].ConnectionString; SqlDependency.Start(northwindConnection); }

Once the above code has been added to the Global.asax file, our connection can employ an SQL Cache Dependency.
To illustrate how an SQL Dependency is utilized, let's look at an example -- a simple GridViewthat's bound to a table. We'll drag the good old Northwind Productstable onto a new page, then set the following two attributes in the SqlDataSource control:

EnableCaching = "True" SqlCacheDependency = "NorthwindConnectionString1:Products"

With this simple line of code in place, the GridViewwon't read the Products table again until it changes. As soon as theProducts table changes, though, SQL Server will notify ASP.NET to dumpthe cache, and the subsequent page request will reload the page fromthe database. The end result is that our application gains all of theperformance benefits that come with caching, but our users will neversee stale data.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 3)

2010-08-17T21:25:00.000-07:00

How can I decrease the bandwidth that my site uses?

ASP.NET abstracts a lot of traditional web development details fromthe developer. Just drag and drop a few controls on a form, set someproperties, write a little bit of code, and -- bam! -- you've got afunctioning web site.

However, that doesn't mean the resulting HTML markup willnecessarily be efficient or small. It's not unusual to see ASP.NETpages that contain more than 100 kilobytes of markup. I recommend thatyou keep a close eye on the HTML markup that results from your ASP.NETweb pages -- to keep these file sizes in check can sometimes requireadditional effort, which is one reason we covered the topic of webstandards in Chapter 9, ASP.NET and Web Standards.

Solutions

The first rule of ASP.NET bandwidth control is to know how largeyour pages are. In Internet Explorer, the File > Properties dialogwill tell you how many kilobytes of HTML markup the current page hasproduced, as Figure 15.2 shows. Firefox has a similar dialog, picturedin Figure 15.3, which can be accessed by selecting Tools > Page Info.

However, note that the Size field in Firefox reports a much smallernumber than does IE 7 -- 13,976 bytes versus 49,774 bytes. That'sbecause Firefox shows the actual number of bytes that came down overthe wire, whereas IE 7 shows the size of the page after it has beenreceived by the browser.

How is such a discrepancy possible? Well, the ASP.NET web site usesHTTP compression to decrease the page size before sending the page.HTTP compression is a W3C standard that allows the server to provide aGZIP-compressed version of the HTML content to the client, at the costof a very minor increase in CPU time. The client receives thecompressed content, then decompresses it on the fly before renderingthe page. Right off the bat, you can see that this is just one easy wayto reduce the amount of bandwidth you use by an impressive 72% --simply flip the switch to enable HTTP compression for your web site.

You can enable HTTP compression in two ways. The first takes placeat the web server level; the second is implemented via a custom HTTPmodule at the ASP.NET application level.

Enabling HTTP Compression Support in IIS 6

Use the IIS Service Manager to enable HTTP Compression in IIS 6.Right-click the node for your web site and select Properties. TheService tab contains the settings relevant to compression, as Figure15.4 shows.

Manual Configuration is Only Necessary in IIS 6
That's right: it's only necessary to configure IIS to enable HTTPcompression in IIS 6 and earlier, as IIS 7 enables static compressionby default. Windows Server 2008 (which had yet to be released at thetime of this writing) may offer a user interface to configure dynamicHTTP compression, but Vista's IIS Manager doesn't.

The compression setting available in the GUI works; however, it onlyaffects static content, such as HTML pages and CSS files. This settingwon't do anything to compress dynamic content in ASPX pages. We mustresort to editing the metabase -- the IIS database for configurationand metadata storage -- to deploy dynamic content compression:

Open the metabase in Notepad. For IIS 6, this is located at C:\WINDOWS\system32\inetsrv\MetaBase.xml. For IIS 5, the file is a binary file, so you'll need to download the Meta-data Edit tool instead.
Search for the tag. There should be two entries: one for deflate and one for GZIP -- the two methods ofcompression that IIS supports. By default, IIS uses GZIP; deflate israrely used.
Search for the HcScriptFileExtensionssection. Add to the list aspx, asmx, php, cgi, and any other fileextensions that you want dynamically compressed. Follow the existingformat carefully -- it's return-delimited, and any extra spaces willprevent the file extensions from working. Make the same changes in bothdeflate and GZIP.
Set HcDynamicCompressionLevelto level 9 (it has a default value of 0, which means "no compression").I recommend level 9, based on several reports that I've read on the Websuggesting that level 10 requires much more CPU time, while offeringonly a minimal reduction in file size over level 9. Make this changefor both deflate and GZIP.

Note that this is a global compression rule that will affect all websites. This setting is usually what you'll want, since HTTP compressionis so effective and the cost is nominal. However, some poorly codedASP.NET web sites may be incompatible with compression. In thosecircumstances, you may want to enable or disable compression on aper-site or per-folder basis -- a setting that's also supported by IIS.The easiest way to configure this setting is to use the command line adsutil.vbs utility:

C:\Inetpub\AdminScripts\>adsutil.vbs set w3svc/ (site#) /root/DoStat ➥icCompression False C:\Inetpub\AdminScripts\>adsutil.vbs set w3svc/ (site#) /root/DoDyna ➥micCompression False

The (site#) number can be obtained from the log properties dialog in the IIS server properties, and usually takes the form W3SVCn, where n is an arbitrary site number.

Enabling HTTP Compression Support in an ASP.NET Application

Perhaps you don't have control over the IIS settings on your server.Or maybe you'd just like a way to enable compression for your specificASP.NET application. That's possible too.

The open source HttpCompress library is very easy to incorporate into an ASP.NET web site. First, download the latest version of HttpCompress from the official web site.

Place the blowery.Web.HttpCompress.dll binary somewhere logical, and add a reference to it.

Next, add the following compression-specific configuration section to your site's Web.config:

Example 15.5. Web.config (excerpt) <configSections> <sectionGroup name="blowery.web"> <section name="httpCompress" type="blowery.Web.HttpCompress.SectionHandler, blowery.Web.HttpCompress"/> </sectionGroup> </configSections> <blowery.web> <httpCompress preferredAlgorithm="gzip" compressionLevel="high"> <excludedMimeTypes> <add type="image/png" /> <add type="image/jpeg" /> <add type="image/gif" /> </excludedMimeTypes> </httpCompress> </blowery.web>

Finally, bring the actual compression HTTP module into the pipeline:

Example 15.6. Web.config (excerpt) <system.web> <httpModules> <add name="CompressionModule" type="blowery.Web.HttpCompress.HttpModule, blowery.web.HttpCompress"/> </httpModules> </system.web>

Once this is in place, you should see compressed ASPX content beingreturned to the browser. To verify that this is the case, use Port80Software's convenient Real-Time Compression Checker.

One limitation of the HttpCompress module approach is that only ASPXcontent that forms part of your application will be compressed; the CSSand JavaScript aren't served through the ASP.NET ISAPI handler, andwill therefore remain uncompressed. As such, I recommend that youenable compression at the web server level whenever possible, so thatthese files also gain the benefits of compression.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 2)

2010-08-17T21:19:00.000-07:00

How can I decrease the size of the view state?

One convenience of ASP.NET controls is that they can preserve stateacross postbacks -- a topic we've covered in depth in Chapter 6,Maintaining State. This, of course, is a feature that comes at a price-- to implement it, we add a hidden field to the page to store thecontrol settings for transmission between the client and server, butdepending on the controls the page uses, the view state can sometimesbecome quite large.

One obvious way to reduce the size of view state is to turn it offif you don't need it. This adjustment can be performed either at thepage level, or at the control level. If, for whatever reason, you can'tdisable the view state (for example, your page uses controls that aredependent upon the view state), there are a few other steps you cantake to at least reduce its impact on your page size.

Solutions

You have two options for reducing the impact that view state has onyour page size -- either compress the view state, or store it on theserver.

Compressing the View State

The following simple CompressedViewStatePage class implements basic GZIP compression on the page's view state. It reduced the size of the ViewStateobject on my sample page from 20,442 bytes to 6,056 bytes -- animpressive 70% reduction in size! Here's the class in all its glory:

Example 15.3. CompressedViewStatePage.cs (excerpt) using System; using System.IO.Compression; using System.IO; using System.Web.UI; public class CompressedViewStatePage : System.Web.UI.Page { static public byte[] Compress(byte[] b) { MemoryStream ms = new MemoryStream(); GZipStream zs = new GZipStream(ms, CompressionMode.Compress); zs.Write(b, 0, b.Length); return ms.ToArray(); } static public byte[] Decompress(byte[] b) { MemoryStream ms = new MemoryStream(b.Length); ms.Write(b, 0, b.Length); // last 4 bytes of GZipStream = length of decompressed data ms.Seek(-4, SeekOrigin.Current); byte[] lb = new byte[4]; ms.Read(lb, 0, 4); int len = BitConverter.ToInt32(lb, 0); ms.Seek(0, SeekOrigin.Begin); byte[] ob = new byte[len]; GZipStream zs = new GZipStream(ms, CompressionMode.Decompress); zs.Read(ob, 0, len); return ob; } protected override object LoadPageStateFromPersistenceMedium() { byte[] b = Convert.FromBase64String(Request.Form["__VSTATE"]); LosFormatter lf = new LosFormatter(); return lf.Deserialize(Convert.ToBase64String(Decompress(b))); } protected override void SavePageStateToPersistenceMedium( object state ) { LosFormatter lf = new LosFormatter(); StringWriter sw = new StringWriter(); lf.Serialize(sw, state); byte[] b = Convert.FromBase64String(sw.ToString()); ClientScript.RegisterHiddenField("__VSTATE", Convert.ToBase64String(Compress(b))); } }

To use GZIP compression, simply inherit a specific page from the class, like this:

public partial class MyPage : CompressedViewStatePage

If you're worried about the performance implications of compressingyour view state, don't be. It's far more likely that bandwidth is agreater bottleneck than CPU time on any given web server. Althoughthere are exceptions to this rule, the GZIP algorithm is blazingly faston the CPUs of today. Besides, if your server's CPU operates at 100%all the time, you have far graver problems to worry about than the sizeof a handful of pages.

This compression algorithm could also be implemented as an HTTPmodule, which could then be applied to an entire site with a simpleWeb.config modification. I suggest you try implementing this module asan exercise, if you're keen. The MSDN article on building an HTTP module is a good place to start.

Storing View State on the Server

The second option for reducing view state's impact on page size isto prevent view state data from being sent to the client altogether,and instead store the data on the server.

The following ServerViewStatePage class allows us to use the Session object to store the view state:

Example 15.4. ServerViewStatePage.cs (excerpt) using System; using System.Web.UI; using System.Configuration; using System.IO; public class ServerViewStatePage : System.Web.UI.Page { private const string _configKey = "ServerViewStateMode"; private const string _formField = "__SERVERVIEWSTATEKEY"; private string ViewStateData { get { return Request.Form[_formField]; } set { ClientScript.RegisterHiddenField(_formField, value); } } private string PersistenceType { get { return (ConfigurationManager.AppSettings[_configKey] ?? "").ToLower(); } } private object ToObject(string viewstate) { byte[] b = Convert.FromBase64String(viewstate); LosFormatter lf = new LosFormatter(); return lf.Deserialize(Convert.ToBase64String(b)); } private string ToBase64String(object state) { LosFormatter lf = new LosFormatter(); StringWriter sw = new StringWriter(); lf.Serialize(sw, state); byte[] b = Convert.FromBase64String(sw.ToString()); return Convert.ToBase64String(b); } private string ToSession(string value) { string key = Guid.NewGuid().ToString(); Session.Add(key, value); return key; } private string FromSession(string key) { string value = Convert.ToString(Session[key]); Session.Remove(key); return value; } protected override object LoadPageStateFromPersistenceMedium() { switch (PersistenceType) { case "session": return ToObject(FromSession(ViewStateData)); default: return base.LoadPageStateFromPersistenceMedium(); } } protected override void SavePageStateToPersistenceMedium( object ViewStateObject ) { switch (PersistenceType) { case "session": ViewStateData = ToSession(ToBase64String(ViewStateObject)); break; default: base.SavePageStateToPersistenceMedium(ViewStateObject); break; } } }

To use ServerViewStatePage, simply inherit a specific page from this class, like this:

public partial class MyPage : ServerViewStatePage

This class is configured via a single setting in Web.config: ServerViewStateMode. Once you've configured this setting, you'll notice that the ViewStateobject disappears from the page -- in its place is a simple ID that'sused to look up the contents of the page's view state on the server, inthe Session object. If you feel uncomfortable storing view state in Session,this class could easily be extended to store view state wherever youlike -- in the file system, in the ASP.NET cache, or in a database.

As usual, there's no free lunch here. The decision to push viewstate to the server and store it in Session has its own drawbacks. Forexample, the Session object could be lost if the IIS worker processrecycles (a loss that does occur every so often in IIS, unless you'vedisabled this default behavior). Furthermore, any change to theunderlying application files (such as editing Web.config,or adding new binaries to the bin folder of your application) will alsocause the web application to recycle and Session data to be lost. Andif you use more than one web server (such as in a web farm environment)you'll need to manage any shared session state that's stored in adatabase.

Speed Up Your Site! 8 ASP.NET Performance Tips (part 1)

2010-08-17T21:11:00.000-07:00

Now that you've added the finishing touches to your web siteand unleashed it onto the world, fame, fortune, and success will surelyfollow -- won't it?

Unfortunately, your web application's success can lead to somethingless desirable -- performance and scaling problems. On a traditionaldesktop application, one thousand users translate to one thousandclient computers chugging away, sharing the load of running yourapplication. The application is effectively spread among all the users'machines. When it comes to a web application, though, those samethousand users are usually serviced by a single machine -- your webserver.

Success can come at a cost for web applications: a cost in bandwidthand server hardware. However, there are a few clever ways you canreduce -- and sometimes eliminate -- these problems. We'll take a lookat some of the different approaches to improving the performance of anASP.NET site in this chapter, which has been extracted from The ASP.NET 2.0 Anthology, 101 Essential Tips, Tricks & Hacks. Feel free to download this chapter -- along with three others -- for offline reference.

How do I determine what to optimize?

You want your web application to be the best, right? Like all of us,by "best" you mean "fastest." And what better way to create a blazinglyfast application than to optimize everything? Optimize, optimize,optimize -- right? Wrong.

Premature optimization refers to the fixing of a performance problembefore you understand the problem, or before there even is a problem,and it's a bad idea.

That's not to say that you should write sloppy, inefficient code. Mypoint is that you should trust the ASP.NET Framework, and make use ofthe features that make it such a terrific environment in which todevelop, until you hit a problem. Once you hit a problem, you shouldtake the time to understand what that problem is, and only then shouldyou start to look at how best to address it. Dr. Joseph M. Newcomer's essay, "Optimization: Your Worst Enemy," gives a fascinating overview of the perils of optimizing in the dark.

The tips in this chapter propose fairly lightweight solutions forsome common performance issues. I've steered away from dramaticchanges, because I don't want you to end up doubling your developmentor maintenance time in order to shave a meagre 2% off your page loadtime. While it is possible to bypass the in-built ASP.NET Pagemechanism completely (by using Response.Write, or building anASHX-based sites), I'm not a fan of these approaches. The ASP.NETsystem as a whole has been tuned and improved for more than half adecade, and it's reasonably fast straight out of the box. There's agood chance that trying to improve on it will result in a slower andless maintainable web site.

So, with all that out of the way, let's assume that some of your pages are running slowly. How do you figure out what to fix?

Solution

Isolate the bottleneck in your site by measuring the actual speed ofthe site. This exercise can be performed using logs, databaseprofiling, and tracing.

We've discussed the task of logging using log4net in Chapter 13,Handling Errors. If you suspect that the database is the cause of theslowdown (for example, you know that your application makes use of somelarge queries), you can either step through the page in debug mode tosee whether the database calls are taking a long time to return, or youcan use the SQL Server Profiler discussed in the section called "How doI speed up my database queries?" later in this chapter. For a verybasic analysis of what's going on in your pages, you can use theASP.NET trace; while it's not nearly as good as a full-featured loggingsystem, it's easy to implement and will provide you with plenty oftiming information.

The first step in using the trace is to get into the habit of addingtrace statements. Write to the trace whenever you think there'ssomething you might want to see when you debug future problems. Tracingdoesn't have any real performance impact on your site until it'senabled in the Web.config, and when you need to troubleshoot a problem, you'll be glad it's there.

There's more information on tracing in Chapter 13, Handling Errors,but the general idea is that you can write to the Trace object likethis:

Trace.Write("Here's a trace message.");

Tracing is disabled by default; when you want your Trace.Write statements to actually do something, you'll need to turn tracing on in the Web.config file, as follows:

Example 15.1. Web.config (excerpt)

<?xml version="1.0"?>
<configuration>
<system.web>
   <trace enabled="true"
       mostRecent="true"
       localOnly="true"/>
</system.web>
</configuration>

In this solution, we'll look at a sample page that performs a fewdifferent actions -- it makes a call to a web service, retrieves somedata from a database, and throws an exception. Each function that we'lluse writes a trace message when it begins and ends, via astraightforward utility method called writeTrace.However, it has one slightly complex aspect -- it uses theSystem.Diagnostics object to figure out the method name, so we don'thave to pass it in. The code for our sample page is as follows:

Example 15.2. Trace.aspx.cs (excerpt)

using System;
using System.Web;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
   hitAWebservice();
   getSomeData();
   doSomeProcessing();
   breakSomething();
   displayTheResults();
}
private void getSomeData()
{
   writeTrace(true);
   simulateWaiting(8000);
   writeTrace(false);
}
private void hitAWebservice()
{
   writeTrace(true);
   Trace.Write("A message to demonstrate tracing.");
   simulateWaiting(2000);
   writeTrace(false);
}
private void doSomeProcessing()
{
   writeTrace(true);
   simulateWaiting(1000);
   writeTrace(false);
}
private void displayTheResults()
{
   writeTrace(true);
   simulateWaiting(500);
   writeTrace(false);
}
private void breakSomething()
{
   writeTrace(true);
   try
   {
     int superBig = int.MaxValue;
     superBig += 1;
   }
   catch (Exception ex)
   {
     Trace.Warn("Exception", "Oops", ex);
   }
}
private void writeTrace(bool enteringFunction)
{
   if (!Trace.IsEnabled)
   return;
   string callingFunctionName = "Undetermined method";
   string action = enteringFunction ? "Entering" : "Exiting";
   try
   {
     //Determine the name of the calling function.
     System.Diagnostics.StackTrace stackTrace =
     new System.Diagnostics.StackTrace();
     callingFunctionName =
     stackTrace.GetFrame(1).GetMethod().Name;
   }
   catch { }
   Trace.Write(action, callingFunctionName);
}
/// <summary>
/// Wait a bit.
/// </summary>
/// <param name="waitTime">Time in milliseconds to wait.</param>
private void simulateWaiting(int waitTime)
{
   System.Threading.Thread.Sleep(waitTime);
}
}

Right, we've got our trace statements in place. Now, let's assumethat this page is taking abnormally long to load, and we'd like to getto the bottom of the problem. With tracing enabled, we can simply loadthe page, then browse to Trace.axd within our web site; it's at http://localhost:1209/MySite/Trace.axd.

Figure 15.1 shows the first part of the Trace.axd output that was returned from the previous code.

Table 15.1 shows the relevant portion of the trace output.

Right away, we can see which aspect of our page load is taking the majority of time -- getSomeDatatakes eight seconds to execute. Without this information, we might haveassumed the web service call was at fault and spent valuable timesolving the wrong problem. This example shows how, armed with some realinformation, we can begin to fix the right problem.