ASP.NET: How do I handle a click event from a element within a literal.text?

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:20

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.

Thanks! I'm going to try this out and see if it solves my problem! — daveomcd, Feb 09 '12 at 17:25
It's working except I cannot get a linkButton's click event to trigger... but I appreciate pointing me in the right direction! The repeater should end up working much better after I figure out this last bit. Thanks! — daveomcd, Feb 09 '12 at 20:31

score 0 · Answer 2 · answered Feb 09 '12 at 17:08

0

You could make use of Hyperlink control

HyperLink hl1 = new HyperLink();
hl1.Text="Click Here";
hl1.NavigateUrl="http://www.google.com";

answered Feb 09 '12 at 17:08

Shankar Narayana Damodaran

68,075
43
96
126

Is it possible to allow it to just trigger a function in the codebehind instead of going to a page? – daveomcd Feb 09 '12 at 17:13
1

With a HyperLink, no, but with a LinkButton, yes. It's a bit more complicated than that because you're trying to append HTML to a literal. Switch to a Repeater, PlaceHolder or Panel and you'll be able to add controls (like LinkButton and HyperLink) to the container. See my answer below for info about the Repeater. – Nick Bork Feb 09 '12 at 17:19

ASP.NET: How do I handle a click event from a element within a literal.text?

2 Answers2