Working with Arrays and Collections

It this chapter we're going to do something a little different. You're going to create your own Web controla class that can be added to a Web form. In all of the previous examples you used the Web controls that Microsoft shipped with VS.NET. They're the tools that appear in the toolbox, like the label control, the button control, the grid control, etc. Well, you're now going to write your own.

The Web control you're going to write will be a grid control. Of course, there's no way we can do a full-featured grid control in this section. However, basic grid controls are great for demonstrating how to declare arrays and other collection types.

Your grid control will have a two-dimensional array of cells . You will add a Cell class with a few properties. One of the properties will be a Text property that will store the contents of the cell . Web controls are classes that derive from System.Web.UI.WebControls.WebControl . Any public property of a standard type (int, long, string, etc.) becomes a property you can set through the VS.NET property grid. Web controls also have a Render method. Your job in the Render method is to represent your grid in an HTML form that can be displayed in a browser. You'll see that this isn't very difficult to do. One other feature you're going to add to the grid is the ability to name each cell. You'll be able to add a key to a cell, that you can use later to retrieve the contents of the cell.

To create a test project for this chapter:

1. Launch Visual Studio .NET. (Start > All Programs > Microsoft Visual Studio .NET > Microsoft Visual Studio .NET).

2. Select File > New > Project to bring up the New Project dialog.

3. Under project types on the left side of the New Project window, click the Visual C# projects folder.

4. Select the Web Control Library icon and change the name of the application to CodeControls ( Figure 9.1 ).

   Figure 9.1. For this chapter you're creating an ASP.NET Web Control rather than an application. It doesn't create a virtual directory on your Web server, as the Web projects did.

   

5. Visual Studio will create a new project with a single class called WebCustomControl1. Change the name of the class to CodeGridWeb. The changes you need to make are in ( Figure 9.2 ). There's no way to do this through the property sheet, only through the editor.

   Figure 9.2 Above the CodeGridWeb class declaration there are some attributes in square brackets. The ToolboxData attribute tells the VS.NET designer what to call instances of your control when a developer puts it on a Web page.

    [ToolboxData( "<{0}:  CodeGridWeb  runat=server> </{0}:  CodeGridWeb  >")] public class  CodeGridWeb  : System.Web.UI.WebControls.WebControl 

6. Delete the code that declares a Text property. The wizard adds this property as an example of how to add properties, but we don't need it. Figure 9.3 shows you what code to delete.

   Figure 9.3 We don't need the text property in the control, so we can delete all the code in this figure.

    private string text; [Bindable(true), Category("Appearance"), DefaultValue("")] public string Text {    get    {       return text;    }    set    {       text = value;    } } 

7. Next, add the definition for the Cell class. Remember that the grid control stores a two-dimensional array of cells. Later, you'll learn about declaring arrays. For now, let's just add the definition for the class itself. The code for the class is in Figure 9.4 . Add the code inside the definition of the CodeGridWeb class (so that it becomes a nested class).

   Figure 9.4 The grid is basically an array of Cell objects. The Cell class has a constructor that takes in the row and column numbers for the cell as well as a pointer to the parent. The Cell will use the pointer to the parent to be able to call methods in the parent class later on.

    public class Cell {    private string _text;    CodeGridWeb _parent;    private int _row, _col;    public Cell(CodeGridWeb parent,    int row, int col)    {       _parent = parent;       _row = row;       _col = col;    }    public string Text    {       get       {          return _text;       }       set       {          _text = value;       }    }    public int Row    {       get       {          return _row;       }    }    public int Column    {       get       {          return _col;       }    } } 

8. Declare two integers inside the CodeGridWeb to store the number of rows and the number of columns ( Figure 9.5 ).

   Figure 9.5 _rows and _cols store the number of rows and columns in the grid. Their starting values are 10 and 5, respectively.

    private int _rows=10; private int _cols=5; 

9. Add two public properties to get and set the number of rows and columns in the grid ( Figure 9.6 ).

   Figure 9.6 Above the property declarations for Rows and Columns there are a couple of attributes. These are read by VS.NET when the developer adds the control to a Web form. Category has to do with how the property sheet groups properties; this one will be in the appearance group . DefaultValue tells the designer that it doesn't have to write code to set this value if the value is the default.

    [Category("Appearance"), DefaultValue(10)] public int Rows {    get    {       return _rows;    }    set    {       _rows = value;    } } [Category("Appearance"), DefaultValue(5)] public int Columns {    get    {       return _cols;    }    set    {       _cols = value;    } } 

Tips

• The Cell class is a nested classa class that is a member of another class. I decided to make it a nested class because the class will need to make a call to a private function in the grid class. You'll add the private function later.

• Remember that like in any other project in this book, building the project isn't necessary for learning the concepts in this chapter.

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