This article mainly introduces the methods of adding controls such as button, linkbutton, and imagebutton to the datalist and repeater.And trigger the corresponding event according to the commandname property of the related control,Take the appropriate action.


In the previous 7 chapter tutorial on datalist and repeater,We created separate read-only and editable delete examples.In order to make the datalist edit and delete,We have added some buttons to itemtemplate. When clicked,Causes a postback and fires related events based on the button's commandname property.For example, adding a button with a commandname of "edit" will trigger the editcommand event when postbacked, and if commandname is "delete" it will trigger deletecommand.

In addition to editing and deleting buttons, the datalist and repeater can also contain some when clicked,Buttons, linkbuttons, and imagebuttons that implement custom server-side logic. In this chapter we will create an interface to list categories in the repeater. Each category contains a button that will list related products when clicked. see picture 1.

Figure 1:Click "show products" to display all products in the catalog

Step one:add a tutorial page

First add the pages needed for this chapter.Add a folder named custombuttonsdatalistrepeater.Then add the following two pages,Remember to include the site.master master page.



Figure 2:Add page

Like other folders,The default.aspx page in the custombuttonsdatalistrepeater folder lists the tutorials in this section.Add the sectionleveltutoriallisting.ascx user control as before.

Figure 3:Adding a sectionleveltutoriallisting.ascx user control

Finally, add the information of these pages in web.sitemap.See mark below:

 description="samples of datalist and repeater reports that include
     buttons for performing server-side actions ">
 s templates "
  description="examines how to add custom buttons, linkbuttons,      or imagebuttons within templates. "/>

Browse the page when you are done.See Figure 4.

Figure 4:The sitemap now contains pages from this chapter

Step two:add categories list

We need to add a repeater that lists all categories, each category has a "show products" linkbutton. Clicking the linkbutton will display all category related products. We first create a repeater that lists all categories. Open the custombuttons.aspx page, drag in a repeater, and set the id to categories. Then create an objectdatasource named categoriesdatasource from the smart tag and configure it with the getcategories () method of the categoriesbll class.

Figure 5:Configuring objectdatasource

Visual Studio will create a default itemtemplate for the datalist based on the data source, and the repeater templates need to be manually defined.And repeater templates need to be created and modified directly by declaring code (that is, there is no "edit templates" option on smart tags)

Click the source view in the bottom left corner,Add an itemtemplate with

displaying the category name and paragraph description. And contains a separatortemplate that displays a horizontal line (<hr />) between each category. Also add a linkbutton and set the text to "show products". After completing this, your page declaration code should be similar to the following:

<asp:repeater datasourceid="categoriesdatasource"
  <h3><%#eval ("categoryname")%></h3>
   <%#eval ("description")%>
   [&Asp;linkbutton runat="server">
    show products</asp:linkbutton>]
 <separatortemplate><hr /></separatortemplate>
<asp:objectdatasource runat="server"
 oldvaluesparameterformatstring="original_ {0}"
 selectmethod="getcategories" typename="categoriesbll">

Figure 6 shows what this page looks like.Each category name and description are listed.Clicking the "show products" button causes a postback, but does not perform any functions yet.

Figure 6:The name and description of each category "are listed along with the" show products "linkbutton

Step 3:When you click the "show products" linkbutton, execute the server-side code

Any time,When the button, linkbutton, or imagebutton in the datalist or repeater template is clicked, a postback is generated and the itemcommand event of the datalist or repeater is fired. In addition to itemcommand, if the commandname of button "is set to (" delete "," edit "," cancel "," update "," select ")The datalist will fire another event.But the itemcommand is always fired.

When the button in the datalist or repeater template is clicked, usually we need to get which button was clicked (there may be multiple buttons in a control, such as edit and delete), and some other information (such as those button The primary key of the item). button, linkbutton, imagebutton provide two properties,Their values ​​can be passed to the itemcommand event handler:

commandname-a string representing the identity of each button in the template.

commandargument-usually used to hold some values,For example, the primary key.

In this example,Set the commandname of the linkbutton to "showproducts" and bind the primary key of the current record-categoryid-to the commandargument (categoryargument="<%#eval (" categoryid ")%>") through the binding syntax. After doing this,The linkbutton declaration syntax should look similar to the following:

<asp:linkbutton runat="server" commandname="showproducts"
 commandargument="<%#eval (" categoryid ")%>">
 show products</asp:linkbutton>

When the button is clicked, a postback is generated and the itemcommand event of the datalist or repeater is fired. The button's commandname and commandargument values ​​are passed to the event handler.

Create an event handler for the itemcommand event. Note the second parameter of the event handler (named e). This parameter is of type repeatercommandeventargs and it has the following 4 attributes:

commandargument-the value of the commandargument property of the clicked button

commandname-value of the commandname property for button "

commandsource-reference to the clicked button

item-contains a reference to the repeateritem of the clicked button;each record bound to the repeater is indicated as a repeateritem

Since the categoryid of the selected category is passed in through commandargument, we can get the related products in the itemcommand event handler. These products are bound to a bulletedlist in itemtemplate (which we have already added). All that remains is to add bulletedlist and reference it in the itemcommand event handler,Then bind the products of the selected category to the bulletedlist, and we will do this in step 4.

Note:The datalist's itemcommand event handler is passed an object of type datalistcommandeventargs,It provides the same 4 attributes as repeatercommandeventargs.

Step 4:Display the selected category's products

You can use many controls to display products in itemtemplate.We can add a nested repeater, datalist, dropdownlist, gridview, etc. Here we use bulletedlist. Back to the declaration code of the custombuttons.aspx page,Add a bulletedlist after the "show products" linkbutton. Set the id to productsincategory. bulletedlist displays those field values ​​specified by the datatextfield attribute.Since product information is bound to this attribute,We set the datatextfield to productname.

<asp:bulletedlist datatextfield="productname"

In the itemcommand event handler, reference this control through e.item.findcontrol ("productsincategory"),And bound with products.

protected void categories_itemcommand (object source, repeatercommandeventargs e)
 if (e.commandname == "showproducts")
  //determine the categoryid
  int categoryid=convert.toint32 (e.commandargument);
  //get the associated products from the proudctsbll and bind
  //them to the bulletedlist
  bulletedlist products =
   (bulletedlist) e.item.findcontrol ("productsincategory");
  productsbll productsapi=new productsbll ();
  products.datasource =
   productsapi.getproductsbycategoryid (categoryid);
  products.databind ());

Before performing any operation in the itemcommand event handler,Need to check the commandname passed in first. Since the itemcommand event handler is executed when any button is clicked,If there are multiple buttons in the template, the value of commandname is needed to identify what action needs to be taken.Since we only have one button here, it doesn't make sense to check commandname here,But this is a good habit.Then, the categoryid of the selected category is obtained through commandargument. Then reference the bulletedlist in the template and bind the result of the getproductsbycategoryid (categoryid) method of the productsbll class.

In the previous tutorial using buttons in the datalist,such asOverview of editing and deleting data in the datalistWe use the datakeys collection to get the primary key for a given item. This method works well in the datalist,But repeater does not have datakeys property. So we need another way to provide the value of the primary key,For example, through the commandargument of the button, or using a hidden label in the template, and then reading its value in the itemcommand event handler through e.item.findcontrol ("labelid").

After completing the itemcommand event handler, browse this page.See Figure 7. Clicking the "show products" link will cause a postback and display related products. Also, note that the previous product information is retained when you click on other "show products" links.

Note:If you need to modify the behavior of this report,For example, to list only one category of products at a time, you only need to set the enabledviewstate property of the bulletedlist to false.

Figure 7:Use bulletedlist to display the products associated with the selected category.

to sum up

Datalist and repeater can include many buttons, linkbuttons, imagebuttons in templates. These buttons when clicked will cause a postback and fire the itemcommand event. Create an event handler for the itemcommand event. You can associate server-side code with the click of a button.In this event handler, first check the value of commandname passed in to determine which button was clicked. Other additional information can be provided through the commandargument attribute.

Happy programming!

About the Author

  • Previous Yii2 implementation method using ajax to return json
  • Next WebApi + Bootstrap + KnockoutJs to create a single page program