Working with C Building Blocks

Working with C# Building Blocks

One way to learn the concepts in this chapter is to put them into practice. For that reason I will start a sample project at the beginning of each chapter. Some of the topics in the chapter show code from the sample project and tell you where to add the particular portion of code. Other sections show code that doesn't come from one of the examples. Whenever there is code that you need to add to the example to make it work, I will point that out in the tips for that particular section. At the end of the chapter you should have a small project that you can use later as a reference.

The purpose of the example program for this chapter is to maintain a list of tasks a to-do listand to display the list to the user as requested . The program has two Web pages. The first page enables you to add items to the to-do list. An item consists of a short name and a description. The second page displays a grid (a table) of all the items that have been added to the to-do list.

Building the project isn't necessary for learning the concepts in this chapter, but it is helpful.

To create a test project for this chapter:

Launch Visual Studio .NET. (Start > All Programs > Microsoft Visual Studio .NET > Microsoft Visual Studio .NET).
Select File > New > Project from the top menu bar to bring up the New Project dialog.
Under project types on the left side of the New Project window click the Visual C# projects folder.
Select the ASP.NET Web Application icon and change the name of the application to classesandmembers ( Figure 2.1 ).

Figure 2.1. The New Project dialog lets you select among various project types. Most projects you will write in this book will be ASP.NETWeb Applications. The dialog also remembers the last project type you selected.
Visual Studio will create a new project and open WebForm1.aspx.
Change the form's name to entertask.aspx. Do so by choosing View > Solution Explorer from the top menu bar.
Right-click on WebForm1.aspx and choose properties. In the property grid below change the FileName property from WebForm1.aspx to entertask.aspx ( Figure 2.2 ).

Figure 2.2. Changing the filename through the property browser also renames the physical file.

Create a form that looks like the form in Figure 2.4 . Obviously this is a lot of work to do by hand if you aren't familiar with how to draw controls onto a Web Form (see sidebar on page 25). Instead you can enter the HTML directly into the editor. Figure 2.3 ( next page) shows the HTML necessary to create the form. To enter the HTML directly click the HTML button under the editor's window. The window will then look like the window in Figure 2.5 . If books supported copy-and-paste , this option would work really well, but they don't. As an alternative you could download the skeleton file for this project (see Tips below).

Figure 2.3 The Visual Studio .NET lets you draw each control graphically, or manipulate the HTML script directly. If you add the HTML script shown here the editor will display the controls for the project.

 <%@ Page language="c#"     Codebehind="entertask.aspx.cs"     AutoEventWireup="false"     Inherits="classesandmembers.WebForm1"     %> <HTML>    <HEAD>      <title>WebForm1</title>    </HEAD>    <body MS_POSITIONING="GridLayout">      <form id="Form1" method="post"      runat="server">         <  asp:hyperlink  id="hypViewList"           style="Z-INDEX: 107; LEFT:           41px;           POSITION: absolute;           TOP: 287px"           runat="server"           NavigateUrl="viewlist.aspx">  View List  </asp:hyperlink>      <  asp:textbox  id="txtItem"         style="Z-INDEX: 101;         LEFT: 138px;         POSITION: absolute;         TOP: 66px" runat="server"         Width="184px">         </asp:textbox>      <  asp:label  id="lblToDo"         style="Z-INDEX: 102;         LEFT: 39px;         POSITION: absolute;         TOP: 22px" runat="server"         Font-Size="X-Large">  To Do:  </asp:label>      <  asp:textbox  id="txtDescription"         style="Z-INDEX: 103;         LEFT: 138px; POSITION: absolute;         TOP: 105px" runat="server"         Width="184"         TextMode="MultiLine"         Height="112px">         </asp:textbox>      <  asp:label  id="lblItem" style="Z-INDEX: 104;         LEFT: 41px;         POSITION: absolute;         TOP: 66px" runat="server"         Width="82px"         Height="15px">  Item:  </asp:label>      <  asp:label  id="lblDescription"         style="Z-INDEX: 105;         LEFT: 41px;         POSITION: absolute;         TOP: 100px" runat="server"         Width="80px">  Description:  </asp:label>      <  asp:button  id="btnTask"         style="Z-INDEX: 106;         LEFT: 138px;         POSITION: absolute;         TOP: 229px" runat="server"         Width="184px"         Text=  "Add Task"  >         </asp:button>     </form>    </body> </HTML>

Figure 2.4. The purpose of this form is to add tasks to a ToDo list. A user assigns a name to the task and enters a description, then clicks the Add Task button. To view the list, the user clicks the View List link.

graphics/02fig04.gif

Figure 2.5. Notice how easy it is to toggle between HTML and Design view in the VS.NET editor. VS.NET keeps both the graphical representation and the HTML synchronized; changes to either one automatically get reflected on the other.

graphics/02fig05.gif

Tip

Skeletons for each project can be downloaded from Peachpit's Web site, http://www.peachpit.com/vqs/csharp.

Adding Controls to a Web Form

You can add controls to a Web Form by drawing the controls on the form. To do that, choose View > Toolbox from the top menu bar. Then select a control from the toolbox ( Figure 2.6 ). Once the control is selected you can move the cross cursor to the form, left click and hold, move the mouse again and let go of the button when you're done drawing the control. Alternatively, you could drag-and-drop the control from the toolbox onto the form, or simply double-click on the toolbox control.

Figure 2.6. The toolbox contains a list of the Web controls you can add to your Web form.

graphics/02fig06.gif

After you've added the control you can right-click on the control and choose properties. That will display a property grid like the one you saw in Figure 2.2 .