ASP.Net Web Developer Guide |
||||||||
|
||||||||
Sitemap : Content in Chapter 1 |
Content in Chapter 2 |
Content in Chapter 3 |
||||||||
|
||||||||
Tuesday, March 28, 2006
Using Event Bubbling and Capturing Events in a Repeater Control (Chapter 3)
You can use the Repeatercontrol to accomplish much more than just displaying data. In its templates, we may insert other controls. In this example, we will place an asp:Button control in the ItemTemplate of our repeater. As shown in Figure 3.70, the repeater will display a button for every record in its data source.We may capture the click event of this button and perform appropriate processing. In this example, we will just display the selected ProductId.Would it not be an excellent way to enable the users to select items in a shopping cart application? On each selection, we could have written the selected data in a database.
Figure 3.70 Event Bubbling in a Repeater Control
The complete code for this application is shown in Figure 3.71. A repeater is essentially a container control.When we defined the repeater, we set its OnItemSelection attribute to a function named “showSelection” as follows:
Figure 3.70 Event Bubbling in a Repeater Control
The complete code for this application is shown in Figure 3.71. A repeater is essentially a container control.When we defined the repeater, we set its OnItemSelection attribute to a function named “showSelection” as follows:
<asp:Repeater id=repeater1 OnItemCommand="showSelection" runat="server">
Whenever a child control in a repeater raises an event, it will report it to its parent, the repeater.The repeater will fire the showSelection function.This phenomenon of a child reporting an event to its parent is known as Event Bubbling.A Repeater (or any such parent) may receive events from many embedded child controls; hence, it may not clearly identify which of the children raised the event.
Therefore, the child needs to pass certain information about itself when reporting an event.This is accomplished by the second parameter of the event procedure. The second parameter is defined as e As RepeaterCommandEventArgs. Naturally, the parameter e will be of a RepeaterCommandEventArgs object type (data type), and its CommandSource will identify the child raising the event. Similar event bubbling is employed in many cases where a parent control contains child controls.That is how, as shown in the following code excerpt, we are displaying the value of the ProductId in our message:
Sub showSelection(s As Object, e As RepeaterCommandEventArgs)
lblMessage.Text="You have selected ProductID : " _
+ e.CommandSource.Text
End Sub
But, wait a minute! How did we get the ProductId value displayed on a button anyway? Well, that is actually very easy. As shown in the following code excerpt, the button was placed inside the ItemTemplate, and we set its text property to the
“<%# Container.DataItem(“ProductId”)%>”.
<ItemTemplate><tr>
<td>Product ID:
<asp:Button text=<%# Container.DataItem("ProductId")%>
runat="server"/>
</ItmpTemplate
The remainder of the code is self-explanatory.
Figure 3.71 Repeater2.aspx
<!— Chapter3/Repeater2.aspx —>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<html><head></head>
<script language="VB" Debug="true" runat="server">
Sub Page_Load(src As Object, e As EventArgs)
If Not IsPostBack Then
bindListControl
End If
End Sub
Sub bindListControl()
Dim myConn As OleDbConnection
Dim myOleDbAdapter As OleDbDataAdapter
Dim connStr, sqlStr As String
Dim myDataSet As New Dataset
connStr="Provider=Microsoft.Jet.OLEDB.4.0; " _
+ "Data Source=D:\Products.mdb"
sqlStr="SELECT ProductId, ProductName, Price, ImagePath " _
+ "FROM Products WHERE Price>79.00 ORDER BY Price"
myConn= New OleDbConnection(connStr)
myConn.Open()
myOleDbAdapter =New OleDbDataAdapter(sqlStr,myConn)
myOleDbAdapter.Fill(myDataSet,"dtProducts")
repeater1.DataSource=myDataSet.Tables("dtProducts")
repeater1.DataBind()
End Sub
Sub showSelection(s As Object, e As RepeaterCommandEventArgs)
lblMessage.Text="You have selected ProductID : " _
+ e.CommandSource.Text
' Some references convert the CommandSource object to a button object
' first as shown below. It is not necessary though.
' CType(e.CommandSource, Button).Text
End Sub
</script>
<body><form runat= "server"><center>
<asp:Repeater id=repeater1 OnItemCommand="showSelection" runat="server">
<HeaderTemplate><table></HeaderTemplate>
<ItemTemplate><tr>
<td><asp:Image height=100 width=100
Img src='<%# Container.DataItem("ImagePath") %>' runat="server"/>
</td><td> Product ID:
<asp:Button text=<%# Container.DataItem("ProductId")%>
runat="server"/> <br>Description: <b><i>
<%# Container.DataItem("ProductName")%></b></i><br>
<b>Unit Price:
<%# FormatCurrency(Container.DataItem("Price"))%></b><br>
<td></tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
<asp:Label id=lblMessage runat="server" ForeColor="Brown"
Font-Size="14pt" Font-Weight="700" Font-Name="Arial Black,Arial">
</asp:Label></center>
</form></body></html>
posted by Mr.Q at 1:39 AM
0 Comments:
Post a Comment
<< Home