In the terminology of the Web Part Framework, a menu item displayed by a Web Part is called a verb. In this section, you'll learn how to extend the standard set of verbs displayed by a Web Part with your own custom verbs. You'll learn how to create verbs that execute both server-side and client-side code. You'll also learn how to add verbs to every Web Part that appears in a particular Web Part Zone. Creating Server-Side Verbs Adding new verbs to a Web Part is easy. You simply need to provide the Web Part with a Verbs property that returns the collection of verbs that you want the Web Part to display. Listing 28.25 contains a Generic Web Part that contains a custom Add to Cart verb. Listing 28.25. ProductPart.ascx <%@ Control Language="VB" ClassName="ProductPart" %> <%@ Implements Interface="System.Web.UI.WebControls.WebParts.IWebActionable" %> <%@ Import Namespace="System.Collections.Generic" %> <script runat="server"> Private _productName As String Private _productPrice As Decimal Public ReadOnly Property Verbs() As WebPartVerbCollection Implements IWebActionable.Verbs Get Dim menu As New List(Of WebPartVerb) Dim menuItem As New WebPartVerb("AddToCart", AddressOf AddToCart) menuItem.Text = "Add To Cart" menuItem.Description = "Adds item to shopping cart" menuItem.ImageUrl = "~/Images/AddToCart.gif" menu.Add(menuItem) Return New WebPartVerbCollection(menu) End Get End Property Public Sub AddToCart(ByVal s As Object, ByVal e As WebPartEventArgs) Dim wpm As WebPartManager = WebPartManager.GetCurrentWebPartManager(Page) wpm.MoveWebPart(e.WebPart, wpm.Zones("ShoppingCartZone"), 0) End Sub Public Property ProductName() As String Get Return _productName End Get Set (ByVal Value As String) productName = value End Set End Property Public Property ProductPrice() As Decimal Get Return _productPrice End Get Set (ByVal Value As Decimal) productPrice = value End Set End Property </script> <h3><%= _productName %></h3> Price: <%= _productPrice.ToString("c") %> | Notice that the Web Part in Listing 28.25 implements the IWebActionable interface. It includes an <%@ Implements %> directive at the top of the file. This interface contains one member: the Verbs property. The Verbs property returns the verbs (menu items) displayed by the Web Part. In the case of the ProductPart Web Part, a new verb is created, which displays the text Add to Cart. The verb also displays an image and it is associated with a server-side method named AddToCart(). The AddToCart() method moves the current Web Part into a Web Part Zone named the ShoppingCartZone. When you select the Add to Cart menu option on the ProductPart, the Web Part is moved to the Shopping Cart Zone. Listing 28.26 contains the same ProductPart implemented as a True Web part. Listing 28.26. App_Code\ProductPart.vb Imports System Imports System.Collections.Generic Imports System.Web.UI Imports System.Web.UI.WebControls.WebParts Namespace myControls Public Class ProductPart Inherits WebPart Private _title As String = "Product Part" Private _productName As String Private _productPrice As Decimal Public Overrides Property Title() As String Get Return _title End Get Set(ByVal Value As String) _title = value End Set End Property Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection Get Dim menu As New List(Of WebPartVerb)() Dim menuItem As New WebPartVerb("AddToCart", AddressOf AddToCart) menuItem.Text = "Add To Cart" menuItem.Description = "Adds item to shopping cart" menuItem.ImageUrl = "~/Images/AddToCart.gif" menu.Add(menuItem) Return New WebPartVerbCollection(menu) End Get End Property Public Sub AddToCart(ByVal s As Object, ByVal e As WebPartEventArgs) Dim wpm As WebPartManager = WebPartManager.GetCurrentWebPartManager(Page) wpm.MoveWebPart(e.WebPart, wpm.Zones("ShoppingCartZone"), 0) End Sub Public Property ProductName() As String Get Return _productName End Get Set(ByVal Value As String) _productName = value End Set End Property Public Property ProductPrice() As Decimal Get Return _productPrice End Get Set(ByVal Value As Decimal) _productPrice = value End Set End Property Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter) writer.RenderBeginTag(HtmlTextWriterTag.H3) writer.Write(_productName) writer.RenderEndTag() writer.Write("Price: {0:c}", _productPrice) End Sub End Class End Namespace | Notice that the class in Listing 28.26 does not implement the IWebActionable interface. It doesn't need to implement this interface because the base WebPart class already includes a Verbs property. You can view both versions of the ProductPart with the page in Listing 28.27 (see Figure 28.7). Figure 28.7. Displaying custom menu items. Listing 28.27. ShowProductPart.aspx <%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="ProductPart" src="/books/3/444/1/html/2/~/ProductPart.ascx" %> <%@ Register TagPrefix="custom" Namespace="myControls" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> Protected Sub lnkClear_Click(ByVal sender As Object, ByVal e As EventArgs) Dim part As WebPart For Each part In ShoppingCartZone.WebParts WebPartManager1.MoveWebPart(part, ProductZone, 0) Next End Sub Private Sub Page_PreRender() lnkClear.Visible = (ShoppingCartZone.WebParts.Count > 0) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .column { float:left; width:40%; padding:10px; height:200px; margin-right:10px; border:solid 1px black; background-color: white; } html { background-color:#eeeeee; } </style> <title>Show Product Part</title> </head> <body> <form runat="server"> <asp:WebPartManager Runat="server" /> <div > <h1>Products</h1> <asp:WebPartZone HeaderText="Products" MenuPopupStyle-BackColor="aliceBlue" MenuPopupStyle-BorderStyle="solid" MenuPopupStyle-BorderWidth="1px" MenuPopupStyle-BorderColor="black" MenuPopupStyle-ShadowColor="lightgray" AllowLayoutChange="false" Runat="server"> <ZoneTemplate> <user:ProductPart Title="Product" ProductName="Laptop Computer" ProductPrice="876.23" Runat="server"/> <custom:ProductPart ProductName="Computer Monitor" ProductPrice="500.89" Runat="server"/> </ZoneTemplate> </asp:WebPartZone> </div> <div > <h1>Shopping Cart</h1> <asp:WebPartZone HeaderText="Shopping Cart" VerbStyle-Css AllowLayoutChange="false" Runat="server"/> <asp:LinkButton Text="Clear Cart" OnClick="lnkClear_Click" runat="server" /> </div> </form> </body> </html> | After you open the page in Listing 28.27, you can select the Add to Cart menu option from either of the two Web Parts to add the Web Part to the Shopping Cart Zone. Notice that the page also contains a Clear Cart link. Clicking this link moves all the Web Parts back from the Shopping Cart Zone to the Web Part Zone. Creating Client-Side Verbs A Web Part verb can execute client-side code as well as server-side code. The client-side code can do anything you want. For example, you can call any JavaScript function that you have defined in your page. In this section, the ProductPart Web Part is modified so that it displays a confirmation dialog box before adding a Web Part to the Shopping Cart Zone. The modified ProductPart, named ConfirmProductPart, is contained in Listing 28.28. Listing 28.28. ConfirmProductPart.ascx [View full width] <%@ Control Language="VB" ClassName="ConfirmProductPart" %> <%@ Implements Interface="System.Web.UI.WebControls.WebParts.IWebActionable" %> <%@ Import Namespace="System.Collections.Generic" %> <script runat="server"> Private _productName As String Private _productPrice As Decimal Public ReadOnly Property Verbs() As WebPartVerbCollection Implements IWebActionable.Verbs Get Dim menu As New List(Of WebPartVerb)() Dim menuItem As New WebPartVerb("AddToCart", AddressOf AddToCart, "return confirm('Are You Sure?');") menuItem.Text = "Add To Cart" menuItem.Description = "Adds item to shopping cart" menuItem.ImageUrl = "~/Images/AddToCart.gif" menu.Add(menuItem) Return New WebPartVerbCollection(menu) End Get End Property Public Sub AddToCart(ByVal s As Object, ByVal e As WebPartEventArgs) Dim wpm As WebPartManager = WebPartManager.GetCurrentWebPartManager(Page) wpm.MoveWebPart(e.WebPart, wpm.Zones("ShoppingCartZone"), 0) End Sub Public Property ProductName() As String Get Return _productName End Get Set (ByVal Value As String) _productName = value End Set End Property Public Property ProductPrice() As Decimal Get Return _productPrice End Get Set (ByVal Value As Decimal) _productPrice = value End Set End Property </script> <h3><%= _productName %></h3> Price: <%= _productPrice.ToString("c") %> | The ConfirmProductPart is identical to the ProductPart that was created in the previous section, except for the one line of code that is highlighted in bold in Listing 28.28. A little bit of JavaScript code has been added, which opens a confirmation dialog box whenever someone selects the Add to Cart menu option (see Figure 28.8). Figure 28.8. Displaying a Confirmation dialog box. CD Note You can view the ConfirmProductPart by opening the ShowConfirmProductPart.aspx page included on the CD that accompanies this book. If your JavaScript code returns the value false, then the server-side code has not executed. Therefore, if you click the Cancel button in the JavaScript confirmation dialog box, the server-side AddToCart() method is not executed. Creating Zone Verbs One problem with the ProductPart Web Part is that it displays the Add to Cart menu item no matter in what zone the Web Part is displayed. In particular, the Web Part displays this menu option even when the Web Part is already located in the Shopping Cart Zone. There is a way to fix this problem. Rather than create a custom verb at the level of an individual Web Part, you can create a custom verb at the level of a Web Part Zone. When you create a zone verb, every Web Part contained in the zone gets the additional verb automatically. The page in Listing 28.29 handles the CreateVerbs event associated with the Product Zone to add a verb to every Web Part in the zone. Listing 28.29. ShowZoneVerbs.aspx [View full width] <%@ Page Language="VB" %> <%@ Import Namespace="System.Collections.Generic" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> ''' <summary> ''' Create the verbs that will appear for every ''' Web Part in the Product Zone ''' </summary> Protected Sub ProductZone_CreateVerbs(ByVal sender As Object, ByVal e As WebPartVerbsEventArgs) Dim menu As New List(Of WebPartVerb)() Dim menuItem As New WebPartVerb("AddToCart", AddressOf AddToCart, "return confirm ('Are You Sure?');") menuItem.Text = "Add To Cart" menuItem.Description = "Adds item to shopping cart" menuItem.ImageUrl = "~/Images/AddToCart.gif" menu.Add(menuItem) e.Verbs = New WebPartVerbCollection(e.Verbs, menu) End Sub ''' <summary> ''' Move a Web Part from the Product Zone ''' to the Shopping Cart Zone ''' </summary> Public Sub AddToCart(ByVal s As Object, ByVal e As WebPartEventArgs) Dim wpm As WebPartManager = WebPartManager.GetCurrentWebPartManager(Page) wpm.MoveWebPart(e.WebPart, wpm.Zones("ShoppingCartZone"), 0) End Sub Protected Sub lnkClear_Click(ByVal sender As Object, ByVal e As EventArgs) Dim part As WebPart For Each part In ShoppingCartZone.WebParts WebPartManager1.MoveWebPart(part, ProductZone, 0) Next End Sub Private Sub Page_PreRender() lnkClear.Visible = (ShoppingCartZone.WebParts.Count > 0) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .column { float:left; width:40%; padding:10px; height:200px; margin-right:10px; border:solid 1px black; background-color: white; } html { background-color:#eeeeee; } </style> <title>Show Zone Verbs</title> </head> <body> <form runat="server"> <asp:WebPartManager Runat="server" /> <div > <h1>Products</h1> <asp:WebPartZone OnCreateVerbs="ProductZone_CreateVerbs" HeaderText="Products" MenuPopupStyle-BackColor="aliceBlue" MenuPopupStyle-BorderStyle="solid" MenuPopupStyle-BorderWidth="1px" MenuPopupStyle-BorderColor="black" MenuPopupStyle-ShadowColor="lightgray" AllowLayoutChange="false" Runat="server"> <ZoneTemplate> <asp:Label Title="Product" Text="Laptop Computer -- $900.00" Runat="server" /> <asp:Label Title="Product" Text="Computer Monitor -- $900.00" Runat="server" /> <asp:Label Title="Product" Text="Network Card -- $64.20" Runat="server" /> </ZoneTemplate> </asp:WebPartZone> </div> <div > <h1>Shopping Cart</h1> <asp:WebPartZone HeaderText="Shopping Cart" VerbStyle-Css AllowLayoutChange="false" Runat="server"/> <asp:LinkButton Text="Clear Cart" OnClick="lnkClear_Click" runat="server" /> </div> </form> </body> </html> | After you open the page in Listing 28.29, you should notice that each of the Web Parts displayed in the Product Zone includes the Add to Cart menu option. However, as soon as you move a Web Part to the Shopping Cart Zone, this menu option goes away. |