Beginning ASP.NET 2.0 With CSharp (2006) [eng]

Appendix D

Figure D-22

8.Press Ctrl+S and save the view as PlayersForSelectionList. You now have a new view that can be used in a selection list of a web page — for example, PlayerDetails.aspx, for which the data controls follow. Note that in the DataSource1 (supporting the list box), you are not reading from the Players table. Rather, you read from the PlayerSelection view. That view includes your new field FullName, which you can set as the DataTextField in ListBox1:

<asp:ListBox ID=”ListBox1” runat=”server” DataSourceID=”SqlDataSource1”

DataTextField=”FullName”

DataValueField=”PlayerID”

AutoPostBack=true>

</asp:ListBox>

<asp:SqlDataSource ID=”SqlDataSource1” runat=”server” ConnectionString=”<%$ ConnectionStrings:WroxUnitedConnectionString %>” SelectCommand=”SELECT [PlayerID], [FullName] FROM [PlayerSelection]”> </asp:SqlDataSource>

<br />

<asp:DetailsView ID=”DetailsView1” runat=”server”

688

VWD Database Explorer

DataSourceID=”SqlDataSource2”

...

</asp:DetailsView>

<asp:SqlDataSource ID=”SqlDataSource2” runat=”server” ConnectionString=”<%$ ConnectionStrings:WroxUnitedConnectionString %>” SelectCommand=”SELECT * FROM [Players] WHERE ([PlayerID] = @PlayerID)”>

<SelectParameters>

<asp:ControlParameter ControlID=”ListBox1” DefaultValue=”1”

Name=”PlayerID”

PropertyName=”SelectedValue” Type=”Int32” />

</SelectParameters>

</asp:SqlDataSource>

</asp:Content>

Examining a Stored Procedure (SPROC)

Like the other objects explored in this appendix, you can examine, edit, and create stored procedures, or SPROCs. SPROCs are a set of one or more SQL commands that, as a group, carry out a task. The Database Explorer offers a node for SPROCs, which can be expanded. A single click selects a SPROC and shows, in the Properties window, if it is encrypted. A double-click opens the SPROC, which can then be edited (assuming you have the rights to change the object).

The design of SPROCs is beyond the scope of this text, but you can take a quick look at one. For example, in the Database Explorer, you can expand the WroxUnited database and then expand Stored Procedures. Then you can double-click usp_OrderAdd to open it and view the following code. In this simple SPROC, only one actual SQL statement gets executed:

ALTER PROCEDURE dbo.usp_OrderAdd

(

@MemberName varchar(5), @Name varchar(50), @Address varchar(255), @PostCode varchar(15), @County varchar(50), @country varchar(50), @SubTotal money, @Discount money, @Total money

)

AS

INSERT INTO Orders(MemberName, OrderDate, Name, Address, County, PostCode, Country, SubTotal, Discount, Total)

VALUES (@MemberName, GETDATE(), @Name, @Address, @County, @PostCode, @Country, @SubTotal, @Discount, @Total)

RETURN SCOPE_IDENTITY()

689

Appendix D

This SPROC has three parts. The first and last lines establish the frame of the procedure and declare its name. The second section, within parentheses, names the parameters that will be used to carry out the procedure. The third part, the INSERT INTO statement following the AS command, describes the one SQL statement to actually execute.

Summar y

VWD provides the Database Explorer for the creation, modification, and examination of databases. Generally, a web site will use an existing database, so the examination features are most useful. However, when you’re testing a new site, you can go to the VWD Database Explorer to see if your pages are updating data correctly, or you can modify data to see how the pages handle the rendering. In addition to introducing the Database Explorer, this appendix discussed the following topics:

You can examine both data and metadata. The latter includes the list of fields in a table and details about how those fields are structured, including their exact spelling, data type, size, and other parameters that will be important when designing a page to use the fields.

When creating a database, table or view, or SPROC, the Database Explorer will kick off a wizard to guide you through the process. Keep in mind that when referring to your SQL Server Express install, you must use the syntax of (local)\SQLExpress.

For two reasons, use particular caution when modifying data or metadata for existing databases. First, others may be expecting the database to be in its original state for their Web Forms or Windows forms. Second, you may not be aware of the constraints and relationships that can be ruined by incorrect changes in the data or structure.

690

E

CSS and HTML

Quick Reference

This appendix provides a quick reference to CSS and HTML. It’s not meant to be an exhaustive and complete list of all HTML controls, their properties and the CSS properties, but rather to give the most common uses.

Styling Pages and Controls

You can style controls, or change their look and feel, in two ways: with properties of the control or with Cascading Style Sheets (CSS). Ultimately, both achieve the same thing, making the control look the way you want it to, but in practice, they are very different. Both Visual Web Developer and Visual Studio 2005 use properties when setting the style for controls. For example, if you drop a GridView onto your page and AutoFormat it with the Autumn format, you get the following:

<asp:GridView ID=”GridView1” runat=”server” BackColor=”White” BorderColor=”#CC9966” BorderStyle=”None” BorderWidth=”1px” CellPadding=”4”> <FooterStyle BackColor=”#FFFFCC” ForeColor=”#330099” />

<RowStyle BackColor=”White” ForeColor=”#330099” /> <PagerStyle BackColor=”#FFFFCC” ForeColor=”#330099”

HorizontalAlign=”Center” />

<SelectedRowStyle BackColor=”#FFCC66” Font-Bold=”True” ForeColor=”#663399”

/>

<HeaderStyle BackColor=”#990000” Font-Bold=”True” ForeColor=”#FFFFCC” /> </asp:GridView>

Here the BackColor sets the background color, and BorderColor sets the color of the border. The same sort of thing applies to the style for parts of the control, such as the FooterStyle and

RowStyle.

Although the approach of including the individual style attributes works fine, there are some issues:

Appendix E

It makes the code hard to read. Not only is it more text to read through, but the properties aren’t always in a logical order. For example, on FooterStyle and RowStyle, the BackColor and ForeColor are next to each other, but on the HeaderStyle, there is a Font-Bold attribute between them.

There is extra text, bulking out the page. With lots of styling applied to lots of controls, the page size can increase, which can lead to performance degradation.

It’s hard to amend if you decide to change colors. AutoFormat works fine, but if you want custom colors, you have to change each property individually.

CSS solves this problem by abstracting the actual styling away from the control, leaving the control with just a simple reference to the styles being used. This is the CssClass property for web controls or the class property for HTML controls. The GridView could now be as follows:

<asp:GridView ID=”GridView1” runat=”server” CssClass=”MyGrid”> <FooterStyle CssClass=”MyGridFooter” />

<RowStyle CssClass=”MyGridRow” /> <PagerStyle CssClass=”MyGridPager” />

<SelectedRowStyle CssClass=”MyGridSelectedRow” /> <HeaderStyle CssClass=”MyGridHeader” />

</asp:GridView>

Immediately you can see that this is easier to read. The class names can be anything you want, and it is best not to be control-specific, because CSS classes can be used across controls. For example, if the FooterStyle and RowStyle needed the same styling, you could do the following:

<FooterStyle CssClass=”MyGridStandard” />

<RowStyle CssClass=”MyGridStandard” />

Here the same style name has been used, allowing the centralization of the styling. Style names should also not contain things like color names. For example, don’t call a style TextRed just because it outputs text in red. What happens if you want to change that text from red to blue? You can simply change the style, but the class name would be misleading. Calling it TextHighlight is acceptable.

Creating Inline Styles

To create inline styles, you use the <style> element, which is usually placed within the <head> element. For example:

<head>

<title>My Styled Page</title> <style>

styling goes here </style>

</head>

When using Master pages, you have to put the styling in the Master page, because Content pages don’t allow a <head> element. Adding the style to the Master page is sensible though, because if all pages use the Master page, they automatically get the styles.

692

CSS and HTML Quick Reference

Linking Style Sheets to a Page

Another, and better, way to add styles is to use linked style sheets. In these cases, the style sheet is created as a separate file (with a .css suffix) and linked to the page like so:

<head>

<title>My Styled Page</title>

<link rel=”stylesheet” type=”text/css” href=”site.css” /> </head>

The CSS is stored in site.css and the <link> element links this style sheet into the page at runtime. Another great advantage of linked style sheets is that they can be cached by the browser, so the first time a page is requested, the style sheet is loaded and cached. Subsequent pages that use the same style sheet won’t need to reload it from the server because it’s already loaded.

CSS Inheritance

One of the core concepts of CSS is that inheritance is implicit in the styles. In many ways, the concept is the same as inheritance in classes, in which a child class can inherit features from its parent. CSS works the same way. This allows styling to be applied at the top level and inherited by contained controls. For example, say you defined the paragraph tag (<p>) to have blue text like so:

p {

color: blue;

}

Any child tags would inherit that style:

<p>Hello everyone. I’m a paragraph with a <b>bold</b> word.</p>

The paragraph would appear in blue, including the bold word, because it inherits styles from the parent. A bold tag not inside a paragraph would not be blue:

<b>this is bold</b>

<p>this is blue <b>and bold</b></p>

The first line would be bold only, whereas the second line would be blue, including the bold word. The <b> tag changes its style depending upon the context.

The technique of inherited styles reduces the amount of styling that needs to be done, and is especially useful for setting default fonts and font sizes.

CSS Styles

Whichever method you use to add CSS styles, the styles themselves are the same, and are best seen by an example. Take the example of blue text on a paragraph. The style could be as follows:

p{

color: blue;

font-weight: bold;

}

693

Appendix E

Every paragraph would now appear in bold blue because this style sets the style for the <p> element. Only the element name is used, and the angled brackets aren’t included. So p defines the element for which the style applies, and the styling is surrounded by curly braces. Styles appear as a list separated by semicolons. Styles are context independent, so they can be all on one line or on separate lines. Likewise, the curly braces can be on separate lines.

In this example, two style properties are set, and the style is separated from the value by a colon. The first, color, defines the color of the text, and its value is set to blue. The second, font-weight, defines the weight of the font — how heavy it looks — and this is set to bold.

This technique enables styles to be set for HTML elements, and is typically used for the base elements. For example, the Wrox United style sheet defines the following:

html, body { background-color: #fff; color: #000;

font: normal 90%/1.8em ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;

margin: 0;

}

h1 {

font-size: 1.8em; font-weight: bold; margin-top: 0em; margin-bottom: 0em; color: #a83930;

}

h2 {

font-size: 1.6em;

margin: 1.0em 0em 1.0em 0em; font-weight: bold;

color: #a83930;

}

h3 {

font-size: 1.2em;

margin: 1.0em 0em 1.0em 0em; font-weight: bold;

color: #a83930;

}

p{

font-size: 1.1em; line-height: 1.8em;

margin: 1.1em 0em 1.1em 0em;

text-align: left;

}

This defines the styles for the html and body elements, which due to inheritance become the default for the rest of the page. Next are the headings and then the paragraph. The colors are described in the “Colors” section later in this appendix.

694

CSS and HTML Quick Reference

CSS Sizes

One thing you may have noticed in the previous style sheet is the use of em as a size, for both fonts and margins. There are many ways of sizing things, including points, pixels, inches, and percentages or for fonts, predefined sizes. One of the problems with defining sizes is that they mean different things to different people, especially if they use different browsers or different platforms. The sizing you can use are as follows:

Points (pt), which are a unit of print rather than a unit of the screen. Different browsers render the same point size differently, giving different font sizes.

Pixels (px), which represent an individual pixel on the screen. This again depends on the platform and screen, because they define how many pixels per inch there are. The biggest drawback with pixels is that they are not user scalable. For example, in Internet Explorer, you can select Text Size from the View menu and change the size of the text being browsed, but if the page designer used pixels, you have no way to resize the text.

Physical units (in, cm, mm), which is a physical size. This again gives different results on different sized screens.

Named sizes, such as small, medium, large, x-large. These provide relative sizes, with small being smaller than medium, and so on.

Percentages (%), which define the size as a percentage of the default size (medium). So a font size of 200% is twice the size of the default size.

Ems (em), which represent the default font setting. Ems are user-resizable. 1 em represents one unit of the default font size.

In the Wrox United application, ems have been used because they provide the best flexibility, and are suitable for user resizing, which allows users with visual impairments to change the size of the text. You may read much on the pros and cons of setting sizes for fonts, but as Frog Box Design (who did the CSS and images for the Wrox United site) says:

We use relative sizes and em units because they scale better for people using larger fonts, but we do set a relative percentage size, too.

Percentages are particularly useful when defining the width of block elements. For example, a width of 100% means the element will be the full width of its parent element. This is useful for things like grids where you want them to be the full width of the screen.

Fonts

Deciding on which fonts to use can make a big difference to the readability of your site, because certain fonts are easier to read on the screen than others. You can define many different aspects of the font including the style (normal, bold, and so forth), the size, and the family. In the Wrox United style sheet, the main font is defined as follows:

font: normal 90%/1.8em ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial,

sans-serif;

695

Appendix E

This has three parts:

The style, which is normal.

The size, which is 90%/1.8em. This means a font size of 90% and a line height of 1.8em (1.8 times the normal font size), providing nice spacing between the lines. The size of the font isn’t directly related to the line height, and this declaration is a shortcut that allows both to be specified at the same time.

The family, which defines the fonts to be used, if they are available. If a font is not available on the browser, the next in line is tried. Here Lucida Grande will be tried first, Verdana next, and so on. Fonts that have spaces in their names must have quotes around them.

These three parts could also have been defined like this:

font-style: normal; font-size: 90%;

font-family: ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial, sansserif;

line-height: 1.8em;

The single-line form is just a shortcut.

Colors

Colors can be predefined or you can specify the red, green, and blue values. For example, for blue text, any of the following could be used:

color: blue; color: #0000ff;

color: rgb(0, 0, 255) color: rgb(0%, 0%, 100%);

These all produce the same result. The first uses a defined name, and the second uses a hexadecimal notation where 00 represents no color and ff represents full colors. There are two digits for the red component, two for green, and two for blue. So 0000ff means the following:

00 for red, so no red

00 for green, so no green

ff for blue, so full blue

Using rgb enables you to specify this either in decimal (0 is no color and 255 is full color), or as percentages.

You might also see a shortcut form of the hexadecimal notation consisting of only three digits. This can be used if the two digits for a color part are the same. So blue could be 00f.

CSS Selectors

Earlier, you saw how a paragraph could be styled:

696

CSS and HTML Quick Reference

p{

color: blue; font-weight: bold;

}

The p part is defined as the selector, and this can be an element, an element ID, or a class name, and the way they are defined is different. To define an element ID, you place a hash sign (#) before the selector:

#header { height: 100px;

padding: 0 10px 0 10px;

. . .

}

This would then correspond to an element with that ID:

<div id=”header”>

ID-based selectors can only be used by a single element because IDs have to be unique, so this should be reserved for things that will only appear once. In the Wrox United style sheet, this is used for items such as the header, sidebar, and so on.

To use a class name, you precede the selector with a period:

.title {

color: #a83930; text-align: center;

. . .

}

This matches a CssClass property for a web server control, or the class property for an HTML control:

<asp:Label id=”Label1” runat=”server” CssClass=”title”>My Page</asp:Label>

<div class=”title>My Page</div>

Because the class name can be used by multiple controls, you should use it for common styling across elements. The named selector can be designed to apply to all elements (as in the previous code), or just selected elements:

div.title { color: #a83930;

}

Here the selector only applies if a div element is given a class of title — any other element would not get the style. The following line will be styled:

<div class=”title”>This will be styled</div>

However, the following line will not be styled:

<span class=”title”>While this will not be styled</span>

Selector names are case-sensitive.

697