Operating data in ASP.net 2.0 28: The Button_ self-study process in the GridView

Introduction

Generic controls, such as the GridView, can be read only when data is displayed, and the ability to process data is very common. Typically, you add a button, LinkButton, or ImageButton to each row of data. When you click on the button, the data postback and executes some server-side code. The most common scenario is editing or deleting data. In fact, editing and deletion is so common, starting with an overview of inserting, updating, and deleting data, we can see the GridView, DetailsView, and FormView can complete these functions with zero code.

In addition to editing and deleting Button,gridview, DetailsView, and FormView can also contain some buttons, linkbuttons, or imagebuttons that implement custom server-side code. In this chapter we'll look at how to add a custom button to a GridView or DetailsView. We will also create a page that is paginated according to supplier. For each given supplier,formview, the information about it is displayed, Plus a button. When you click on this button, all related products are marked as discontinued. In addition, the GridView lists all the products provided by the selected supplier, and each row contains "increase price" and " Discount Price "two button. These two button are used to increase or decrease the product unit cost of 10% (see figure I).

Figure 1:formview and the GridView contain the button that executes the custom behavior

First step: Add a Button tutorial page

Before studying how to add a custom button, let's take a moment to create some pages in the site that are used in this guide. First, add a folder named Custombuttons, Then add the following two pages. When adding a page, make sure that Site.master is selected as the master page for each page.

Default.aspx
Custombuttons.aspx

Figure 2: Add the pages needed for this guide

Like other folders, the Default.aspx in the Custombuttons folder is used to list the tutorial chapters. Remember Sectionleveltutoriallisting.ascx This user control provides this functionality. Drag the user control onto the page from solution browsing.

Figure 3: Adding Sectionleveltutoriallisting.ascx user controls to Default.aspx

Finally, add the addresses of these pages to the Web.sitemap entry. After paging and sorting <siteMapNode> adds the following tag.

<sitemapnode
 title= "adding Custom Buttons"
 description= "Samples of Reports," Include Buttons for Performing
 server-side Actions "
 url=" ~/custombuttons/default.aspx ">
 <sitemapnode title=
 " Using Buttonfields and Buttons in Templates '
 description= ' examines how to add custom Buttons, LinkButtons,
 or Imag Ebuttons as Buttonfields or within templates. "
 Url= "~/custombuttons/custombuttons.aspx"/>
</siteMapNode>

After modifying the Web.sitemap, look at the tutorial site in the browser, and now the menu on the left contains the edit, insert, and delete tutorials.

Figure 4:site Map contains a tutorial on adding custom button

Step Two: Add a list of supplier FormView

Let's first add a FormView that lists suppliers. As discussed in the introduction, FormView according to supplier paging, and in the GridView Show all the product supplier provided. In addition FormView Contains a button. When clicked, all related products are marked as discontinued. Before we add a custom button for FormView, we first create a FormView that displays supplier information.

Open the Custombuttons.aspx page in the Custombuttons folder, drag a FormView from the toolbox, and set the FormView ID to suppliers. Open the smart tag for FormView, Create a ObjectDataSource named Suppliersdatasource.

Figure 5: Creating a ObjectDataSource named Suppliersdatasource

Select the Getsuppliers () method for the SUPPLIERSBLL class to configure the ObjectDataSource (see Figure 6). Since this FormView does not provide an interface to modify the supplier information, the update The Drop-down list for the label selects None.

Figure 6: Configuring the data source using the Getsuppliers () method of the Suppliersbll class

When the data source configuration is complete, Visual studio generates a insertitemtemplate, a edititemtemplate, and a FormView ItemTemplate. get rid of InsertItemTemplate and EditItemTemplate, modify the ItemTemplate to show only supplier company name, phone number. Finally, select the Enable paging checkbox or settings in the smart tag allowpaging property is true. When you do this, your declaration tag should look like the following:

<asp:formview id= "Suppliers" runat= "Server" datakeynames= "SupplierID" datasourceid= "Suppliersdatasource"
 Enableviewstate= "False" allowpaging= "True" >
 <ItemTemplate>
  
 

Figure 7:formview Lists the CompanyName and Phone for the currently selected supplier

Step three: Add a GridView that lists all of the product for a supplier

Before adding the "Discontinue all Products" button, add a GridView under FormView. Set the ID to suppliersproducts and add a ObjectDataSource named Suppliersproductsdatasource.

Figure 8: Creating a ObjectDataSource named Suppliersproductsdatasource

Select the Getproductsbysupplierid (SupplierID) method of the PRODUCTSBLL class to configure ObjectDataSource (see Figure 9). Although the GridView allows you to modify the price of the product, But not using the GridView's own edit or delete feature. Therefore, in the Drop-down list of update, INSERT, and DELETE tags, select None.

Figure 9: Configuring the data source using the Getproductsbysupplierid (SupplierID) method of the Productsbll class

Because Getproductsbysupplierid (SupplierID) has an input parameter, the ObjectDataSource Wizard prompts us to configure this parameter. In order to send SupplierID from FormView, Select control in the list of parameter sources and select suppliers in the ControlID Drop-down list (the ID of the FormView created in step Two).

Figure 10: The source of the specified SupplierID parameter is suppliers FormView

Once the ObjectDataSource Wizard is complete, each line of product in the GridView contains a BoundField and a checkboxfield. Let's cut it out, just show discontinued Checkboxfield,productname and UnitPrice. We modify the format of the UnitPrice column as currency. Your GridView and suppliersproductsdatasource  ObjectDataSource declaration tags should look similar to the following:

<asp:gridview id= "suppliersproducts" autogeneratecolumns= "False" datakeynames= "ProductID" datasourceid= " Suppliersproductsdatasource "enableviewstate= False" runat= "Server" > <Columns> <asp:boundfield Datafield= "ProductName" headertext= "Product" sortexpression= "ProductName"/> <asp:boundfield "datafield=" UnitPrice "headertext=" Price "sortexpression=" UnitPrice "dataformatstring=" {0:c} "htmlencode=" False "/> <asp: CheckBoxField datafield= "discontinued" headertext= "discontinued" sortexpression= "discontinued"/> </Columns
 > </asp:GridView> <asp:objectdatasource id= "Suppliersproductsdatasource" runat= "Server"
 oldvaluesparameterformatstring= "original_{0}" selectmethod= "Getproductsbysupplierid" TypeName= "ProductsBLL" > <SelectParameters> <asp:controlparameter controlid= "Suppliers" Name= "SupplierID"

 SelectedValue "type=" Int32 "/> </SelectParameters> </asp:ObjectDataSource>

Now we have shown a master/from table, the user chooses a supplier in the FormView above, in the GridView below can see this supplier provides products.

Figure 11 is a screenshot of the Tokyo Traders supplier selected in FormView.

Figure 11: Display the selected supplier product in the GridView

Step Fourth: Create a Dal and BLL layer to stop using all products of supplier

Before FormView Add discontinue button, we first need to add a way to complete this function in the Dal and BLL. The name of this method is Discontinueallproductsforsupplier (SupplierID) . When you click on the FormView button, we call this method in the business Logic layer and pass the supplier to the selected SupplierID. BLL will continue to invoke the relevant methods of the data Access layer. This method submits an UPDATE statement to the database that stops using the selected supplier products.

As we have done in previous tutorials, we use a bottom-up approach, first creating the Dal method, then BLL, and finally implementing this feature in ASP.net page. Open the northwind.xsd in the App_code/dal folder, Add a new method for ProductsTableAdapter (right-click ProductsTableAdapter, select Add Query). This pops up the configuration wizard for TableAdapter Query. First specify the SQL that the DAL needs to use.

Figure 12: Creating the Dal method with SQL statement

The wizard then asks us what type of query to create. Because Discontinueallproductsforsupplier (SupplierID) needs to update the Products table for the specified SupplierID The Discontinued field for all products is set to 1, so we need to create a query that updates the data.

Figure 13: Select the type of update query

The next wizard displays a window that provides an TableAdapter update statement that will updates all the fields defined in the Products DataTable. Replace it with the following statement:

UPDATE [Products] SET
Discontinued = 1
WHERE SupplierID = @SupplierID

After you enter the above statement, click Next, and the last wizard window needs to enter the name of the method-discontinueallproductsforsupplier. Finish the button after completing the wizard. When you go back to the dataset Designer, you should be able to see a method named Discontinueallproductsforsupplier (@SupplierID) in ProductsTableAdapter.

Figure 14: The method for the DAL is named Discontinueallproductsforsupplier

After completing the Discontinueallproductsforsupplier (SupplierID) method in the data Access layer, our next task is to create business Logic The corresponding method in the layer. Open the Productsbll class file and add the following:

public int discontinueallproductsforsupplier (int supplierID)
{
 return Adapter.discontinueallproductsforsupplier (SupplierID);
}

This method simply calls the Discontinueallproductsforsupplier (SupplierID) method in the Dal and passes the provided SupplierID Parameters. If there are business rules that allow supplier products to be discontinued only under certain conditions, then these rules should be written here (BLL).

　　Note: Unlike the updateproduct overload of the Productsbll class, Discontinueallproductsforsupplier (SupplierID) The signature does not include the Dataobjectmethodattribute property (<system.componentmodel.dataobjectmethodattribute ( System.ComponentModel.DataObjectMethodType.Update, Boolean) >. This will Discontinueallproductsforsupplier ( SupplierID) method is excluded from the Drop-down list in the Update tab of the ObjectDataSource Configuration Data Source Wizard. I'm ignoring this attribute because we're going to go through the event handler directly in ASP.net page. Call the Discontinueallproductsforsupplier (SupplierID) method.

Fifth step: Add a "Discontinue all Products" button for FormView

After completing the Discontinueallproductsforsupplier (SupplierID) method in BLL and DAL, we do the last step of implementing the function to stop using all the product of the selected supplier: for FormView ItemTemplate Add button. We add this button to the supplier phone number, text is "discontinue all products", The ID is discontinueallproductsforsupplier. You can add this button (see Figure 15) by using the edit Templates in the FormView smart tag, or modify the code directly.

Figure 15: Add the "Discontinue all Products" button for the FormView ItemTemplate

When the user clicks on the button, the page is returned and the FormView ItemCommand event is fired. We can create an event handler for this incident to execute the custom code when the button is clicked. Note that Any time a button, LinkButton, or ImageButton is clicked in a FormView, the ItemCommand event is fired. This means that when a user jumps from one page to another in the FormView, The ItemCommand event is fired. When a user clicks on a new, Edit, or Delete in FormView that supports inserting, updating, or deleting, the ItemCommand event is fired.

Since ItemCommand will be fired no matter what Button is clicked, in event handler we need to judge whether the "discontinue all Products" button was clicked or the other button. To achieve this goal , we can identify it by setting the button's CommandName. When the button is clicked, the value of the CommandName is passed to the ItemCommand event handler, which we use to determine whether the button being clicked is the "discontinue all Products" button. Setting " Discontinue the CommandName of "button" is "Discontinueproducts".

Finally, we add a confirmation box on the client to ensure that the user really wants to stop using all of the product of the selected supplier. As we see in adding a client acknowledgement for deleting data, this can be done with JavaScript. Set the button's OnClientClick property to "return confirm" (' This'll mark _all_ of this supplier/' s products as discontinued. Are you certain your want to does this? '

 <asp:formview id= "Suppliers" runat= "Server" datakeynames= "SupplierID" Datasourceid= "Suppliersdatasource" enableviewstate= "False" allowpaging= "True" > <ItemTemplate> 
 

   

 
    
 
     
protected void Suppliers_itemcommand (object sender, FormViewCommandEventArgs e)
{
 if (e). Commandname.compareto ("discontinueproducts") = = 0)
 {
 //the ' Discontinue all Products ' button was clicked.
 Invoke the Productsbll.discontinueallproductsforsupplier (SupplierID) method

 //I, get the SupplierID Selected in the FormView
 int supplierID = (int) suppliers.selectedvalue;

 Next, create an instance of the Productsbll class
 productsbll productinfo = new Productsbll ();

 Finally, invoke the Discontinueallproductsforsupplier (SupplierID)
 method Productinfo.discontinueallproductsforsupplier (SupplierID);
 }


 
    

   
 
Note: The SupplierID of the currently selected supplier in FormView can be obtained by FormView SelectedValue property properties. The SelectedValue property returns the value of the first Data key for the record displayed in FormView. The DataKeyNames property of FormView is automatically set to SupplierID when binding ObjectDataSource to FormView (step two).
 
After the ItemCommand event handler is created, take a moment to test the page. Browse Cooperativa de quesos ' Las cabras ' supplier (in my this is the fifth FormView in supplier). it A supplier provides two kinds of product, Queso Cabrales and Queso manchego La Pastora, and two are not stopped using.
 
Imagine that Cooperativa de Quesos ' Las Cabras ' is out of service, so its products are to be discontinued. Click the "Discontinue all Product" button. A confirmation dialog box pops up.
 
 
Figure 16:cooperativa de Quesos ' Las cabras ' supplies two effective products
 
If you click OK in the OK dialog box, the form submission will continue and the Ormview ItemCommand event will be fired. Then we create the event handler will execute, call Discontinueallproductsforsupplier ( SupplierID) method to stop using both Queso Cabrales and Queso manchego La Pastora products.
 
If you disable view state for the GridView, the GridView is postback each time it is used, so the status of the two product stops is immediately visible (see Figure 17). And if you don't disable view of the GridView State, you need to bind the data again manually.
 
 
Figure 17: Supplier products are updated after clicking on the "Discontinue All Products" button
 
Sixth step: To adjust the price of the product, create a updateproduct in business Logic Layer
 
 
As with the "discontinue all Product" button in FormView, to add a button that increases or lowers the price of products in the GridView, we first add the data Access Layer and Business Logic Layer method. Since we already have a way to update a single product record in the DAL, we can do this by creating a UpdateProduct overload method at BLL.
 
Our previous updateproduct included some product fields as input values, and we can update these fields for the specified product. We will do a small amount of modification, pass the ProductID and adjust the percentage of the unit price. Because you don't have to measure the unit price of the current product, So this method will make our code in the CS file of ASP.net page become more concise.
 
The overloaded methods used by UpdateProduct in this guide are as follows:
 

   

 
    
 
     
public bool UpdateProduct (decimal unitpriceadjustmentpercentage, int productID)
{
 Northwind.productsdatatable products = Adapter.getproductbyproductid (ProductID);
 if (products. Count = = 0)
 //No matching record found and return false to
 false;
 Northwind.productsrow product = products[0];
 Adjust the UnitPrice by the specified percentage (if it's not NULL)
 if (!product. Isunitpricenull ())
 product. UnitPrice *= unitpriceadjustmentpercentage;
 Update the product record
 int rowsaffected = adapter.update (product);
 Return true if precisely one row is updated, otherwise false return
 rowsaffected = = 1;
}

 
    

   
 
This method obtains the specified product information through the Getproductbyproductid (ProductID) method of the DAL. It checks whether the unit price of the product is null. If so, the price will not be changed. If not, The UnitPrice of product will be changed according to the percentage specified (unitpriceadjustmentpercent)
 
Step Seventh: Add price and Price button in the GridView
 
Both the GridView (and DetailsView) are collections of fields. In addition to BoundFields, Checkboxfields, and templatefields these few fields, ASP. NET also contains ButtonField. Like its name, ButtonField provides a button, LinkButton, or ImageButton column. As with FormView, click on any one of the GridView button- pagination, editing or deleting, sorting, etc.-pages will be sent back and inspire the Rowcommand event of the GridView.
 
ButtonField has a CommandName property that can be used to assign a specific value to the CommandName property of each button. Like FormView, CommandName values are used in Rowcommand event Handler to determine which button was clicked.
 
Now we're going to add two ButtonField to the GridView, one with the text "Price +10%" and the other text "price-10%". Click the edit Columns link in the GridView Smart tab and select ButtonField class in the list on the left to add.
 
 
Figure 18: Adding two ButtonField to the GridView
 
Move the two ButtonField to the first two columns of the GridView. Set the ButtonField text to "Price +10%" and "price-10%" respectively, CommandName to "Increaseprice" and " Decreaseprice ",. By default, the button in the ButtonField is LinkButtons, which is available through ButtonField ButtonType Property properties. We set these two ButtonField as regular push button. Therefore, set the ButtonType property to the button. Figure 19 shows the fields after the setup is complete The appearance of the dialog box. And the following figure is the code for the GridView page.
 
 
Figure 19: Configuring the ButtonField Text, CommandName, and ButtonType properties
 

   

 
    
 
     
 <asp:gridview id=" suppliersproducts "runat=" Server "autogeneratecolumns=" False "Datakeynames=" ProductID "datasourceid=" Suppliersproductsdatasource "enableviewstate=" False "> <Columns> & Lt;asp:buttonfield buttontype= "button" Commandname= "Increaseprice" text= "Price +10%"/> <asp:buttonfield Buttontype= "button" Commandname= "Decreaseprice" text= "price-10%"/> <asp:boundfield datafield= "ProductName"
 headertext= "Product" sortexpression= "ProductName"/> <asp:boundfield datafield= "UnitPrice" headertext= "Price" sortexpression= ' UnitPrice ' dataformatstring= ' {0:c} ' htmlencode= ' False '/> <asp:checkboxfield ' DataField= ' Discontinued "headertext=" discontinued "sortexpression=" discontinued "/> </Columns> </asp:GridView> /pre> 
 
    

   
 
When the 
 Create ButtonField completes, the last step is to create an event handler for the Rowcommand event of the GridView. When the "Price +10%" or "price-10%" button is clicked, this event Handler needs to judge the ProductID of the line being clicked, and then invokes the UpdateProduct method of the Productsbll class and passes the UnitPrice adjustment discount and ProductID. The code down will do the work above: 
 

   

 
    
 
     
 protected void Suppliersproducts_rowcommand (object sender,
 Gridviewcommandeventargs e) {if (E.commandname.compareto ("increaseprice") = = 0 | | E.commandname.compareto ("decreaseprice") = = 0) {//The increase price or decrease price Button has been clicked//Det Ermine the ID of the product whose price is adjusted int productID = (int) Suppliersproducts.datakeys[convert.toint32 (E. CommandArgument)].
 Value;
 Determine to adjust the price of the decimal percentageadjust;
 if (E.commandname.compareto ("increaseprice") = = 0) Percentageadjust = 1.1M;

 else Percentageadjust = 0.9M;
 Adjust the price productsbll ProductInfo = new PRODUCTSBLL ();
 Productinfo.updateproduct (Percentageadjust, ProductID); }
}

 
    

   
 
To determine the ProductID of the line that was clicked "Price +10%" or "price-10%" button, we need to use the DataKeys collection of the GridView. This collection contains the GridView All values of the row. Because the GridView is bound to ObjectDataSource, DataKeyNames is set to ProductID by Visual Studio, DataKeys (RowIndex). Value provides the ProductID for the specified rowindex.
 
ButtonField will automatically upload the rowindex of the button in the row to E. CommandArgument parameter. Therefore, we use Convert.ToInt32 (Suppliersproducts.datakeys (Convert.ToInt32 (e.commandargument)). Value) to obtain the ProductID of the line that was clicked "Price +10%" or "price-10%" button.
 
As in the "discontinue all" button, if you disable the View state property of the GridView, the GridView will rebind each time postback. If you do this, you need to manually bind again.
 
Figure 20 shows the page of the product that is available when browsing Grandma Kelly's homestead. Figure 21 shows the "Price +10%" button of the Grandma ' s boysenberry spread Was clicked two times and Northwoods Cranberry sauce's "price-10%" button was clicked once on the page.
 
 
Figure 20:gridview contains "price +10%" and "price-10%" two buttons
 
 
Figure 21: Prices for the first and third products are updated with the price +10% and "price-10%" buttons
 
　　Note: The GridView (and DetailsView) can also add buttons,linkbuttons or Imagebuttons to templatefields. Like BoundField, When the button is clicked, a postback is generated, triggering the Rowcommand event of the GridView. When the button is added to the TemplateField, the button's commandargument does not want to use Buttonfields, is automatically set to the index of row. If you need to determine the index of the line of the button you clicked in Rowcommand event handler, You need to use the following code in the TemplateField page code to set the button's CommandArgument property:
<asp:button runat= "Server" ... Commandargument= ' <%# CType (Container, GridViewRow). RowIndex%> '/>
 
Summarize
 
The GridView, DetailsView, and FormView can all contain buttons, linkbuttons, or imagebuttons. When these button is clicked, the page is sent back, and the FormView and DetailsView are fired ItemCommand event, the Rowcommand event of the GridView. These controls have built-in functionality to handle normal commands, such as deleting or editing a record. However, we can use the button that executes the custom code.
 
To do this, we need to create an event handler for ItemCommand or Rowcommand. In this event handler we first check the value of CommandName to determine which button is clicked. It then executes the appropriate custom code. In this guide we see how to use button and ButtonField to stop all products with specified supplier, and to increase or decrease the price of 10% for a particular product.
 
I wish you a happy programming!
Author Introduction
 
Scott Mitchell, with six asp/asp. NET book, is the founder of 4GuysFromRolla.com, has been applying Microsoft Web technology since 1998. Scott is an independent technical consultant, trainer, writer, recently completed a new book to be published by Sams Press, proficient in asp.net 2.0 within 24 hours. His contact email is mitchell@4guysfromrolla.com, or he can contact him through his blog http://scottonwriting.net/.