Columns with buttons, Data editing - Design and development of web-applications

Columns with buttons

The ButtonField EA is used to create a column that contains for each line the Button's EC that triggers the click event. With this button, you can initiate on the server side some action that you need to perform for the specified string. When the button is clicked, it sends back to the server and initiates the RowCommand event in the wcb application. For this event, you can create a handler that will perform some actions associated with this line. In Fig. 4.18 shows an example of using buttons in data rows.

This ECU is described using the following markup code: & lt; Columns & gt;

& lt; asp: BoundField DataField = ProductName HeaderText-Products /& gt;

& lt; asp: BoundField DataField = UnitPrice HeaderText = Price "/>

& lt; asp: ButtonField ButtonType = Button Text = Buy

CommandName = Add'7 & gt;

& lt;/Columns & gt;

Using a column with buttons in the GridView

Fig. 4.18. Using a column with buttons in the GridView

In this example, information about each item is displayed using the BoundField column. For a button, you can specify different display styles (ButtonType): Button (normal button), Link (link) or Image (image). When a user clicks on a button in one of the product lines, the Row-Command event is initiated. An event is bound to an event handler in the usual way using the onRowCommand property. For example: onRowCom- mand = GridView1_RowCommand1 .

If there are several buttons in the row, then the CommandName property will determine which of the buttons was pressed. The CommandName property must be set to any unique string of characters that the program code knows to determine the actions associated with that particular button. In the CommandArgument property of the event parameter (type GridViewCommandEventArgs), the line number in which the button was clicked will be passed.

For example, a column in the form of a button can allow adding goods to the user's basket. For example: protected void GridView1_RowCommand1 (object sender,

GridViewCommandEventArgs e) {

if (e.CommandName.EqualsfAdd ")) {

// get the index of the line in which the button is pressed (first line 0)

int index = Convert.Tolnt32 (e.CommandArgument);

// for example, we add this product to the shopping cart

// AddToShoppingCart (index);

}}

In this example, a button column shows a fixed text for all data items. This is set using the Text property of the ButtonField class. If you want to associate the button text with some field of the current data item, you need to set the DataTextField property to the field name.

Editing Data

If the GridView-associated ID maintains an update, then this EA can automatically perform data editing. In order to do this, you need to add the Insert, Update, and Delete commands to the description of the component that connects to the data source (the easiest way to do this is to use the Component Configuration Wizard, using the Advanced button and setting the Generate Insert option, Update, and Delete statements ", while the key field of the table should be selected.)

GridView can display a column with the corresponding buttons for each row in the table. To implement the possibility of data editing, you need to set the Auto-GenerateEditButton = "true" property in the description of GridView. In this case, the GridView EA outputs an additional column, as shown in Fig. 4.19.

Displaying data, allowing them to be edited and deleted

Fig. 4.19. Displaying data, allowing them to be edited and deleted

When a user clicks the Edit button, the corresponding line goes into edit mode and the user can change the data in the fields of the current record (Figure 4.20).

Performing the editing of a table row in the GridView

Fig. 4.20. Performing the editing of a table row in the GridView

thematic pictures

Ошибка в функции вывода объектов.