Figure 8-13 shows how the DepartmentsAdmin Web User Control will look.
Figure 8-13. The departments administration page
The control is formed from a list populated with the departments’ information, and it also has four additional controls (a label, two text boxes, and a button) used to add new departments to the list.
The list control you see in Figure 8-13 is not a DataList, but a GridView control.
■Tip The GridView object is more powerful than the DataList, but its power comes at the expense of speed. For this reason, when the GridView’s extra features are not used, you should stick with the DataList. ASP.NET also provides an even simpler and faster object, named Repeater. We don’t use the Repeater object in this book, but you should take a look at its documentation for more information.
The GridView is more powerful than DataList and has many more features; in this chapter, you’ll only use a part of GridView’s possibilities, particularly the ones that allow for easy inte- gration of Edit, Select, and Delete buttons, and database-bound column editing in Design View. You can see the mentioned controls in Figure 8-13, where the Select button is called Edit Categories.
Darie-Watson_4681C08.fm Page 249 Monday, September 19, 2005 9:55 AM
250 C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N
Everything you do here with GridView is also possible to do with DataList, but using GridView eases your work considerably because of its rich set of built-in features. You don’t have to worry about the performance penalty for using a more complex control, because the administration page won’t be accessed frequently, compared to the main web site.
You’ll implement DepartmentsAdmin.ascx in the following exercise, and then we’ll discuss the details in the “How it Works” section.
Exercise: Implementing DepartmentsAdmin.ascx
1. Create a new Web User Control named DepartmentsAdmin in the UserControls folder (be sure to check the Place code in separate file option).
2. Switch to Design View. From the toolbox, add two Label controls and a GridView control, as shown in Figure 8-14.
Figure 8-14. Adding controls to DepartmentsAdmin.ascx 3. Set the properties for the controls as shown in Table 8-1.
4. Set the DataKeyNames property of the grid to DepartmentID and set its Width property to 100%.
Table 8-1. Setting the Properties for the Controls in CategoriesAdmin.ascx
Control Type ID Property Text Property CssClass Property Label statusLabel Departments Loaded AdminPageText Label locationLabel These are your
departments:
AdminPageText
GridView grid
Darie-Watson_4681C08.fm Page 250 Monday, September 19, 2005 9:55 AM
C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N 251
■Note Setting the DataKeyNames allows you to find the DepartmentID of the selected departments.
5. Switch to Source View and add the controls that will allow new departments to be added:
<br />
<span class="AdminPageText">Create a new department:</span>
<table class="AdminPageText" cellspacing="0">
<tr>
<td valign="top" width="100">Name:
</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newName" Runat="server"
Width="400px" />
</td>
</tr>
<tr>
<td valign="top" width="100">Description:
</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newDescription"
Runat="server" Width="400px" Height="70px" TextMode="MultiLine"/>
</td>
</tr>
</table>
<asp:Button ID="createDepartment" Text="Create Department" Runat="server"
CssClass="AdminButtonText" />
6. Click GridView’s Smart Link and choose Add New Column. Use this command to add two columns with the properties shown in Table 8-2.
Your Add Field window should look like Figure 8-15 when adding the Department Name bound field.
Table 8-2. Adding Bound Fields to Your Grid
Field Type Header Text Data Field Other Properties
BoundField Department Name Name
BoundField Department Description Description Darie-Watson_4681C08.fm Page 251 Monday, September 19, 2005 9:55 AM
8213592a117456a340854d18cee57603
252 C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N
Figure 8-15. Adding a bound column
7. Add the View Categories column by adding a HyperLinkField with a text of View Categories. Set the data field to DepartmentID and the URL format string to ../CatalogAdmin.aspx?DepartmentID={0}, as shown in Figure 8-16.
8. Now add the functionality that allows the administrator to edit department details. Use the Add New Column command again to add a CommandField. Leave the header text empty, leave button type set to Link, check the Edit/Update check box, and leave the Show cancel button check box checked.
Click OK.
9. Finally, add the Delete button by clicking the Smart Link and choosing Add New Column. Choose the ButtonField field type, choose Delete for the command name, modify the text to Delete, and click OK.
10. Click GridView’s Smart Link and choose Edit Columns. In the dialog box that opens, deselect Auto- Generate Fields (because you manually specified which columns to display). If you leave this check box checked, the GridView appends all columns retrieved from the data source to the manually created ones. At the end of this exercise, you might want to experiment with checking this check box, but for now, leave it unchecked. Click OK.
Okay, you finished working on the columns, so your control should now look like Figure 8-17.
Darie-Watson_4681C08.fm Page 252 Monday, September 19, 2005 9:55 AM
C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N 253
Figure 8-16. Adding a HyperLinkField column
Figure 8-17. Designing DepartmentsAdmin.ascx
Darie-Watson_4681C08.fm Page 253 Monday, September 19, 2005 9:55 AM
254 C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N
■ Note Right now the CSS styles don’t have any effect because BalloonShop.css is part of a skin, which is loaded at runtime.
11. To make the data grid functional, you need to populate it with data in the Page_Load method of DepartmentsAdmin.ascx.cs:
protected void Page_Load(object sender, EventArgs e) {
// Load the grid only the first time the page is loaded if (!Page.IsPostBack)
{
// Load the departments grid BindGrid();
// Set control properties
statusLabel.ForeColor = System.Drawing.Color.Red;
} }
// Populate the GridView with data private void BindGrid()
{
// Get a DataTable object containing the catalog departments grid.DataSource = CatalogAccess.GetDepartments();
// Bind the data bound controls to the data source grid.DataBind();
}
12. Update CatalogAdmin.aspx.cs to load the admin user controls by adding this code to its Page_Load method:
protected void Page_Load(object sender, EventArgs e) {
// Set the title of the page
this.Title = BalloonShopConfiguration.SiteName + " : Catalog Admin";
// Get DepartmentID from the query string
string departmentId = Request.QueryString["DepartmentID"];
Darie-Watson_4681C08.fm Page 254 Monday, September 19, 2005 9:55 AM
C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N 255
// Get CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
// Get ProductID from the query string
string productId = Request.QueryString["ProductID"];
// Load the appropriate control into the place holder if (departmentId == null)
{
Control c = Page.LoadControl(Request.ApplicationPath + "/UserControls/DepartmentsAdmin.ascx");
adminPlaceHolder.Controls.Add(c);
}
else if (categoryId == null) {
Control c = Page.LoadControl(Request.ApplicationPath + "/UserControls/CategoriesAdmin.ascx");
adminPlaceHolder.Controls.Add(c);
}
else if (productId == null) {
Control c = Page.LoadControl(Request.ApplicationPath + "/UserControls/ProductsAdmin.ascx");
adminPlaceHolder.Controls.Add(c);
} else {
Control c = Page.LoadControl(Request.ApplicationPath +
"/UserControls/ProductDetailsAdmin.ascx");
adminPlaceHolder.Controls.Add(c);
} }
13. Pause here to test whether what you’ve been working on so far works. Execute the project, log in as administrator, and go to the catalog admin page. The GridView control doesn’t look like much at the moment, but you’ll take care of its looks a bit later. If everything works as expected, you should be presented with a page that looks like Figure 8-18.
Darie-Watson_4681C08.fm Page 255 Monday, September 19, 2005 9:55 AM
256 C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N
Figure 8-18. Executing CatalogAdmin.aspx
14. To change the looks of the DataGrid, you’ll use a skin, which will define the appearance of every GridView in the site. Open the App_Themes folder in Solution Explorer.
15. Right-click the BalloonShopDefault folder and choose Add New Item.
16. Select the Skin File template and change the name to BalloonShop.skin.
17. Add the following code, which represents the default skin for GridView controls, to BalloonShop.skin:
<asp:GridView runat="server" CssClass="Grid" CellPadding="4"
AutoGenerateColumns="False">
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True"
ForeColor="#F7F7F7" />
<HeaderStyle CssClass="GridHeader" />
<RowStyle CssClass="GridRow" />
<AlternatingRowStyle CssClass="GridAlternateRow" />
</asp:GridView>
18. Add the following styles to BalloonShop.css:
Darie-Watson_4681C08.fm Page 256 Monday, September 19, 2005 9:55 AM
C H A P T E R 8 ■ C A T A L O G A D M I N I S T R A T I O N 257
.Grid {
border-color: #E7E7FF;
width: 100%;
}
.GridHeader {
color: White;
background-color: Navy;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
text-align: left;
} .GridRow {
color: Navy;
background-color: #E7E7FF;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
text-align: left;
}
.GridEditingRow {
color: Navy;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
text-align: left;
}
.GridAlternateRow {
color: Navy;
background-color: #F7F7F7;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
text-align: left;
}
19. Execute your project again to make sure your new skin and styles are in effect, as shown in Figure 8-19.
Feel free to change your skin and styles files until the grid looks like you want it to.
Darie-Watson_4681C08.fm Page 257 Monday, September 19, 2005 9:55 AM