In this article we cover the difference between adding attributes to objects directly and objects contained within a datalist. In this specific example we will add some Javascript behind an image button for a confirmation dialog.

On my 4ASPX.Net I wanted to make the user interface a bit easier for folks to use. One of the things I wanted to add was a message box to let people know that if they wanted to download an item that they need to be logged into the site first. This wasn't obvious to people at first, even though I would trap the event and display the logon on the left side of the site, it still wasn't obvious to people. My solution was to add a confirmation JScript alert box to the button.

Adding the attribute to the image button is a rather simple matter. On the product details page it is just one image button on the page which is added in the following way:

'first check for an authenticated user
'if they're not logged in then display the message.
If Not Request.IsAuthenticated Then
  'now add the JScript.
  btnMainBuy.Attributes.Add("onClick", "javascript:return _
      confirm('You must be logged into " _
      "this site in order to download or purchase items!');")
End If

By adding this code I now have the desired effect of displaying a message.

In addition to having a button for the download on the details page, I also list items in the directory in a data list control. This data list is bound to a data reader to display items for a particular category or by doing a keyword search. When changing items within a data list you have to deal with them a bit differently than going directly at the object ID and adding attributed like we did previously. Say I have my form set up the following way.

<asp:DataList id="DataList2" runat="server" 
RepeatDirection="Horizontal" 
RepeatLayout="Flow"> 
   <ItemTemplate>
       <asp:ImageButton ID="btnBuy" Runat="server" 
           AlternateText="Download or Buy Now!" 
           CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ItemID") %>' 
           CommandName="Buy" 
           ImageUrl='Buy.Gif' 
           ImageAlign="Left">
      </asp:ImageButton> 
  </ItemTemplate> 
</asp:DataList> 

Here what we're going to do is modify the image button while the data list is being bound to our data reader. Basically as each item is added to our data list we will add the JScript code behind the image button with our confirmation.

Private Sub DataList2_ItemDataBound(ByVal sender As Object, ByVal e As _
   System.Web.UI.WebControls.DataListItemEventArgs) _
   Handles DataList2.ItemDataBound
  'first check and see if they are logged on.
  If Not Request.IsAuthenticated Then
    'now check if this is an Item within the datalist.
    If e.Item.ItemType = ListItemType.Item Then
      'prepare a new image object and assign our datalist image object.
      Dim myImage As ImageButton = CType(e.Item.FindControl("btnBuy"), ImageButton)
      'add the JScript behind the button.
      myImage.Attributes.Add("onClick", "javascript:return confirm('You must be " & _
         "logged into this site in order to download or purchase items!');")
    End If
  End If
End Sub

Now when someone clicks on the button, it will present a JScript confirmation and the user can either select "Yes" to continue with our event or cancel it.

By: Patrick Santry, Microsoft MVP (ASP/ASP.NET), developer of this site, author of books on Web technologies, and member of the DotNetNuke core development team. If you're interested in the services provided by Patrick, visit his company Website at Santry.com.