More data to display means more columns to add to your grid and more controls to add for creating a new product. In this exercise you’ll also work with new types of grid columns:
CheckBoxField and ImageField.
Exercise: Implementing ProductsAdmin.ascx
1. Create a new Web User Control named ProductsAdmin.ascx in the UserControls folder. Make sure the Create code in a separate file option is checked and that the language is Visual C#.
2. Switch to Design View and add two Label controls, a LinkButton and a GridView, as shown in Figure 8-28.
Figure 8-28. ProductsAdmin.ascx in Design View 3. Change the properties of the controls to the values in Table 8-5.
4. Change the DataKeyNames property of the GridView to ProductID, the Width property to 100%, and the AutoGenerateColumns property to False. Right now, the control should look like Figure 8-29 when viewed in Design View. Remember that the CSS styles don’t apply when designing the form, only when it is executed.
Table 8-5. Setting the Properties of the Controls in ProductsAdmin.ascx
Control Type ID Property Text Property CssClass Property
Label statusLabel Products Loaded AdminPageText
Label locationLabel Displaying products for category...
AdminPageText
LinkButton goBackLink (go back to categories) AdminPageText GridView grid
Figure 8-29. ProductsAdmin.ascx in Design View
5. Create the columns described in Table 8-6 by clicking the GridView’s Smart Link and then clicking Add New Column.
■ Note You didn’t add a Delete button to the GridView because you’ll implement this functionality later, in the product details page.
Table 8-6. GridView Field Properties
Column Type Header Text Data Field Other Properties
ImageField Product Image Image1FileName Read Only; URL format string: ../
ProductImages/{0}
BoundField Product Name Name BoundField Product
Description
Description
BoundField Price Price
BoundField Image1 File Image1FileName BoundField Image2 File Image2FileName CheckBoxField Dept. prom. OnDepartmentPromotion CheckBoxField Cat. prom. OnCatalogPromotion TemplateField
CommandField Select Edit/Update
and Show Cancel Button check boxes
8213592a117456a340854d18cee57603
6. In the next few steps, you’ll transform all editable columns into template columns, to change the way they look when being edited (otherwise, they won’t fit nicely on the screen). Moreover, you’ll want to make other usability improvements such as enlarging the description text box to be multiline, or changing the format of product prices. Start with updating the product name by transforming the product name column into a template column and modifying its EditItemTemplate as shown:
<EditItemTemplate>
<asp:TextBox ID="nameTextBox" runat="server" Width="97%"
CssClass="GridEditingRow" Text='<%# Bind("Name") %>'>
</asp:TextBox>
</EditItemTemplate>
7. Transform the product description field into a template field and then edit its EditItemTemplate in Source View:
<EditItemTemplate>
<asp:TextBox ID="descriptionTextBox" runat="server"
Text='<%# Bind("Description") %>' Height="100px" Width="97%"
CssClass="GridEditingRow" TextMode="MultiLine" />
</EditItemTemplate>
8. Transform the product price field into a template field and edit its templates to format the price to be displayed with two decimal digits (as 19.99), instead of the default of four decimal digits (19.9900). In this case, you can also make its editing text box shorter to make better use of the space on the screen when entering edit mode:
<asp:TemplateField HeaderText="Price" SortExpression="Price">
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# String.Format("{0:0.00}", Eval("Price")) %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="priceTextBox" runat="server" Width="45px"
Text='<%# String.Format("{0:0.00}", Eval("Price")) %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
9. Transform the first image field into a template field to shrink its edit text box a little bit, as highlighted in the following code:
<EditItemTemplate>
<asp:TextBox ID="image1TextBox" Width="80px" runat="server"
Text='<%# Bind("Image1FileName") %>'></asp:TextBox>
</EditItemTemplate>
10. Transform the second image field into a template field and set its editing TextBox’s width to 80px and its name to image2TextBox, similar to what you did in the previous step.
11. Edit the template of the last TemplateField column to contain a link to the product details page (it must add a ProductID parameter to the query string):
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink
Runat="server" Text="Select"
NavigateUrl='<%# "../CatalogAdmin.aspx?DepartmentID=" + Request.QueryString["DepartmentID"] + "&CategoryID=" + Request.QueryString["CategoryID"] + "&ProductID=" + Eval("ProductID") %>'
ID="HyperLink1">
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
12. Now the GridView is ready. The final step for the user interface part is to create the controls for adding a new product. Feel free to add them at the bottom of the page using Design View or simply write the HTML code in Source View:
<span class="AdminPageText">
Create a new product and assign it to this category:</span>
<table class="AdminPageText" cellspacing="0">
<tr>
<td width="100" valign="top">Name:</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newName" Runat="server"
Width="400px" />
</td>
</tr>
<tr>
<td width="100" valign="top">Description:</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newDescription"
Runat="server" Width="400px" Height="70px" TextMode="MultiLine"/>
</td>
</tr>
<tr>
<td width="100" valign="top">Price:</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newPrice" Runat="server"
Width="400px">0.00</asp:TextBox>
</td>
</tr>
<tr>
<td width="100" valign="top">Image1 File:</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newImage1FileName"
Runat="server" Width="400px">Generic1.png</asp:TextBox>
</td>
</tr>
<tr>
<td width="150" valign="top">Image2 File:</td>
<td>
<asp:TextBox cssClass="AdminPageText" ID="newImage2FileName"
Runat="server" Width="400px">Generic2.png</asp:TextBox>
</td>
</tr>
<tr>
<td width="150" valign="top">Dept. Promotion:</td>
<td>
<asp:CheckBox ID="newOnDepartmentPromotion" Runat="server" />
</td>
</tr>
<tr>
<td width="150" valign="top">Catalog Promotion:</td>
<td>
<asp:CheckBox ID="newOnCatalogPromotion" Runat="server" />
</td>
</tr>
</table>
<asp:Button ID="createProduct" CssClass="AdminButtonText"
Runat="server" Text="Create Product" />
After all the changes, the user control should look Figure 8-30 when viewed in Design View:
Figure 8-30. ProductsAdmin.ascx in Design View
13. Now it’s time to write the code. Remember to use Visual Web Developer to generate the event handler signatures for you and modify their code, as shown in the following code listing:
protected void Page_Load(object sender, EventArgs e) {
// Load the grid only the first time the page is loaded if (!Page.IsPostBack)
{
// Get CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
// Obtain the category's name
CategoryDetails cd = CatalogAccess.GetCategoryDetails(categoryId);
string categoryName = cd.Name;
// Set controls' properties
statusLabel.ForeColor = System.Drawing.Color.Red;
locationLabel.Text = "Displaying products for category <b> "
+ categoryName + "</b>";
// Load the products grid BindGrid();
} }
// Populate the GridView with data private void BindGrid()
{
// Get CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
// Get a DataTable object containing the products
grid.DataSource = CatalogAccess.GetAllProductsInCategory(categoryId);
// Needed to bind the data bound controls to the data source grid.DataBind();
}
// Enter row into edit mode
protected void grid_RowEditing(object sender, GridViewEditEventArgs e) {
// Set the row for which to enable edit mode grid.EditIndex = e.NewEditIndex;
// Set status message
statusLabel.Text = "Editing row # " + e.NewEditIndex.ToString();
// Reload the grid BindGrid();
}
// Cancel edit mode
protected void grid_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
// Cancel edit mode grid.EditIndex = -1;
// Set status message
statusLabel.Text = "Editing canceled";
// Reload the grid BindGrid();
}
// Update a product
protected void grid_RowUpdating(object sender, GridViewUpdateEventArgs e) {
// Retrieve updated data
string id = grid.DataKeys[e.RowIndex].Value.ToString();
string name = ((TextBox)grid.Rows[e.RowIndex].FindControl ("nameTextBox")).Text;
string description = ((TextBox)grid.Rows[e.RowIndex].FindControl ("descriptionTextBox")).Text;
string price = ((TextBox)grid.Rows[e.RowIndex].FindControl ("priceTextBox")).Text;
string image1FileName = ((TextBox)grid.Rows[e.RowIndex].FindControl ("image1TextBox")).Text;
string image2FileName = ((TextBox)grid.Rows[e.RowIndex].FindControl ("image2TextBox")).Text;
string onDepartmentPromotion = ((CheckBox)grid.Rows[e.RowIndex].Cells[6].
Controls[0]).Checked.ToString();
string onCatalogPromotion = ((CheckBox)grid.Rows[e.RowIndex].Cells[7]
.Controls[0]).Checked.ToString();
// Execute the update command
bool success = CatalogAccess.UpdateProduct(id, name, description, price, image1FileName, image2FileName, onDepartmentPromotion, onCatalogPromotion);
// Cancel edit mode grid.EditIndex = -1;
// Display status message
statusLabel.Text = success ? "Product update successful" :
"Product update failed";
// Reload grid BindGrid();
}
// Create a new product
protected void createProduct_Click(object sender, EventArgs e) {
// Get CategoryID from the query string
string categoryId = Request.QueryString["CategoryID"];
// Execute the insert command
bool success = CatalogAccess.CreateProduct(categoryId, newName.Text, newDescription.Text, newPrice.Text, newImage1FileName.Text,
newImage2FileName.Text, newOnDepartmentPromotion.Checked.ToString(), newOnCatalogPromotion.Checked.ToString());
// Display status message
statusLabel.Text = success ? "Insert successful" : "Insert failed";
// Reload the grid BindGrid();
}
// Go back to the list of categories
protected void goBackLink_Click(object sender, EventArgs e) {
// Get DepartmentID from the query string
string departmentId = Request.QueryString["DepartmentID"];
// Redirect
Response.Redirect(Request.ApplicationPath + "
/CatalogAdmin.aspx?DepartmentID=" + departmentId);
}
How It Works: ProductsAdmin.ascx
Most methods are similar to those you wrote for the previous controls, except this time you did more work to cus- tomize their appearance, especially while in edit mode. Products can be updated or selected. The administrator can change the product’s image using the product details admin page, which shows up when a product is selected in the list. You’ll create the product details page next.
As usual, when selecting a product, you reload the form by adding its ID to the query string. ProductDetailsAdmin allows you to assign the selected product to an additional category, to move the product to another category, to upload a picture for the product, to remove the product from its category, or to remove the product from the database.