6.Run the Web application, and log in as John using the password Pa$$w9rd.

After you log in, the first eight rows of data and a set of page links are displayed on the CustomerData Web form. Page numbers 1, 2, 3, 4, and 5 are displayed, together with “>>” to move directly to the last page. Clicking the ellipsis (…) link displays the next five page numbers together with a “<<” link for moving directly back to the first page. An additional ellipsis (…) link provides access to the previous five pages.

7.Click the links at the bottom of the grid to move from page to page.

8.Close Internet Explorer, and return to Visual Studio 2008 when you have finished browsing the data.

Note The GridView control provides the AllowSorting property. This property is set to False by default. If you set this property to True, the user can sort the data by the values in

any column by clicking the column header. Whenever the user clicks a column header, the LinqDataSource control submits a SQL SELECT statement that fetches the first block of

rows in ascending order. If the user clicks the same column header again, the data for the final block is retrieved and displayed in descending order. If the user repeatedly clicks column headers, the Web form will send a SQL SELECT statement to the database for each click.

Editing Data

You have seen how to use a GridView control to fetch and browse data. The following set of exercises shows you how to modify data and create new rows.

Updating Rows Through a GridView Control

By using the GridView control, you can add hyperlinks to the grid to indicate that a command should be performed. You can add your own custom hyperlinks and commands, but Visual

Studio 2008 supplies some predefined hyperlinks for inserting, updating, and deleting data. In the following exercise, you will add update functionality to the GridView control by adding

an Edit hyperlink to the grid. When the user clicks the Edit hyperlink, the row changes into a set of TextBox controls. The user can save the changes or discard them. This is achieved by

using two additional automatically created hyperlinks labeled Update and Cancel.

Create the Edit, Update, and Cancel buttons

1.Display the CustomerData.aspx form in the Design View window. Click the smart tag for the CustomerGrid control to display the Common GridView Tasks menu, and then select

Enable Editing.

An Edit hyperlink is added to each row in the GridView control.

2.Click the Source button to display the HTML source code for the Web form. Locate the <Columns> collection for the CustomerGrid control, and notice that Visual Studio has added a commandfield object. The ShowEditButton property is set to True, like this:

<asp:GridView ID=”CustomerGrid” runat=”server” ...>

...

<Columns>

<asp:commandfield ShowEditButton=”True” ></asp:commandfield>

...

</Columns>

...

</asp:GridView>

The ShowEditButton property determines whether the commandfield object displays

the Edit hyperlink. You can also activate delete and insert functionality by setting the ShowDeleteButton and ShowInsertButton properties to True, which cause further

hyperlinks to be displayed.

3.Set the EditText property and the ButtonType property for the commandfield object as shown here in bold type:

<asp:commandfield ShowEditButton=”True” EditText=”Modify” ButtonType=”Button”> </asp:commandfield>

These properties change the appearance of the Edit hyperlink. The EditText property specifies the text displayed by the hyperlink, and the ButtonType property changes the

hyperlink to be displayed as a button instead of as a hyperlink. If you activate the insert and delete hyperlinks for the commandfield object, you can change the InsertText and DeleteText properties to customize the text displayed by these links. However, all links share the same ButtonType value—either they all appear as hyperlinks or they all

appear as buttons.

4.Run the application. Log in, and then click the Modify button on the first row displayed on the CustomerData form.

The first row changes into a collection of TextBox controls, and the Modify button is replaced with an Update button and a Cancel button.

Note The CustomerID column remains as a label. This is because this column is the primary key in the Customers table. You should not be able to modify primary key values

in a database; otherwise, you risk breaking the referential integrity between tables.

5.Change the data in the Contact and Title columns, and then click Update.

The database is updated, the row reverts to a set of labels, the Modify button reappears, and the new data is displayed in the row. Behind the scenes, the GridView control changes the data in the LINQ data source and then calls the SubmitChanges method of the CustomerDataContext object to send the changes to the database.

6.Close Internet Explorer, and return to Visual Studio 2008.