Question

I’m creating <div>‘s and appending them to a literal’s text property. I have added a <a> element to the text so that the user can click on a specific element. How can I tie that to a function to handle the event in the codebehind (vb.net) ?

Example of my Literal.Text …

    For Each row As DataRow In oDataTable.Rows
       MyLiteral.Text &= "<div style='font-size: 8.25px; text-transform:uppercase; padding:3px; background: #FF8C00; border: 1px solid #000; margin: 0 5px 0 5px; display:inline-block; float: left;'>" _
                         & row.Item("LastName") & " | <a href='#?"& row.Item("ID") & "' style='color: #000;' >X</a></div>"
    Next

So the above code I want to somehow allow the user to click the X link and then it would remove that person.

Edit: If there is a better way of doing this, that would be great to hear also! Thanks.

Answer 1

Why not switch to using an asp:Repeater control. From there you can add a asp:LinkButton to the repeater template and capture the post back. The Repeater control was designed to do the same thing you’re doing with your loop, that being create a template to be used with collection of data. This will enable the use of controls with a runat=”server” to handle postback events.

Here are some pages that discuss using the Repeater:

http://www.aspnettutorials.com/tutorials/controls/repeater-vb.aspx

http://www.dotnetcurry.com/ShowArticle.aspx?ID=663

You’ll likely want to use the OnItemDataBound event to handle your controls that are runat=”server”:

fetching values from the repeater control in ItemDataBound event

http://www.codeguru.com/csharp/.net/net_asp/tutorials/article.php/c12065

And articles about how to handle the button click postback event:

button event in nested repeater

ASP.Net: why is my button's click/command events not binding/firing in a repeater?

My VB.NET is rusty but I would be more than happy to help you with any questions you might have.

EDIT – Adding code sample

My repeater:

<asp:Repeater runat="server" ID="repTemplate">
    <ItemTemplate>
        <div>
           <%# DataBinder.Eval(Container.DataItem, "Key")%> - <%# DataBinder.Eval(Container.DataItem, "Value") %>
           <asp:LinkButton OnClick="RepeaterLinkButton1_Click" runat="server" ID="linkDelete" Text="X" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Key") %>' />
        </div>
    </ItemTemplate>
</asp:Repeater>

And the code behind in the page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


    If IsPostBack = False Then

        Dim data As Dictionary(Of Integer, String) = New Dictionary(Of Integer, String)()

        data.Add(1, "Test #1")
        data.Add(2, "Test #2")
        data.Add(3, "Test #3")
        data.Add(4, "Test #4")
        data.Add(5, "Test #5")

        Me.repTemplate.DataSource = data
        Me.repTemplate.DataBind()

    End If

End Sub

Protected Sub RepeaterLinkButton1_Click(sender As Object, e As EventArgs)

    Dim linkButton As LinkButton = sender
    Dim id As String = linkButton.CommandArgument

    'TODO: Delete from the database based on ID
    'TODO: Reload the data to the repeater

End Sub

By setting the OnClick function in the HTML view of the code and setting the CommandArgument to the ID you can capture the ID of the row and do what ever you want. Keep in mind that my example is using a Dictonary for data as an example, so “Key” is the unique key of the item and “Value” is what ever is stored in it and thats why the HTML is using the “Key”/”Value” names.