Repeater Events


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

ASP.NET Repeater Events, C# Repeater Events

On this page we'll look at how to use some of the events which belong to the ASP.NET Repeater using C#.

www.High-Flying.co.uk already has a page to show how to use the Repeater in it's basic form, ASP.NET Repeater. What we look at here is some of the events of the Repeater, including the OnItemDataBound and OnItemCommand events. These events help us to peform more advanced operations with the Repeater, operations which would be a lot more difficult without them.

ASP.NET and C# Repeater Example which displays some of the moons of Jupiter.

Let's start with a basic Repeater example. Here is aspx markup code:


<h3>Some of the 60+ moons of Jupiter</h3>

<asp:Repeater ID="Repeater_EventsDemo" runat="server">
    <ItemTemplate>
        <%# Eval("ID") %> -- <%# Eval("Title") %> <br />
    </ItemTemplate>
</asp:Repeater>


Here is the basic code behind, including a class so we can strongly type our datasource (notice the use of the Collection Initializer to get some basic data together quickly):


public class EventDemoObject
{
    public String Title { get; set; }
    public Int32 ID { get; set; }
}

....

protected void Page_Load(object sender, EventArgs e)
{
    // some of the moons of Jupiter
    List<EventDemoObject> moons = new List<EventDemoObject>()
    {
        new EventDemoObject{ ID = 1, Title = "Ganymede" },
        new EventDemoObject{ ID = 2, Title = "Callisto" },
        new EventDemoObject{ ID = 3, Title = "Io" },
        new EventDemoObject{ ID = 4, Title = "Europa" }
    };

    Repeater_EventsDemo.DataSource = moons;
    Repeater_EventsDemo.DataBind();
}


This produces a list of some of Jupiter's moons, as shown here:


Some of the 60+ moons of Jupiter
1 -- Ganymede
2 -- Callisto
3 -- Io
4 -- Europa


OnItemDataBound event example

The Repeater event OnItemDataBound occurs when the datasource is being databound to the control, for each row of data which is mapped to the ItemTemplate, the OnItemDataBound event is fired for each one of those rows. So if in our example, for each moon in our collection, this event is fired, allowing us to inspect the row, the datasource and the contents of the ItemTemplate, allowing us to change the output based on C# logic in the code behind.

Here is the ASPX and C# revised showing how to use the OnItemDataBound event:

In the ASPX, notice how we define an event handler for using the OnItemDataBound event:


<h3>Some of the 60+ moons of Jupiter</h3>

<asp:Repeater ID="Repeater_EventsDemo" runat="server"
        OnItemDataBound="Repeater_EventsDemo_OnItemDataBound">
    <ItemTemplate>
        <%# Eval("ID") %> -- <%# Eval("Title") %> <br />
        <asp:Literal ID="Literal_Demo" runat="server" /> <br />
    </ItemTemplate>
</asp:Repeater>


In the C#, we define an event handler for the OnItemDataBound event. To catch just the data rows from our datasource been bound, we check for the ItemTemplate or AlternatingTemplate. Our original datasource was a strongly typed object, therefore we can cast the row of data back into a strongly typed object. Notice how we still have access to the entire datasource, the whole repeater itself, and also how we can access any ASP.NET controls we've added into the ItemTenplate:


protected void Repeater_EventsDemo_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // catch every row of data to be bound
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
        ListItemType.AlternatingItem)
    {
        // access the row as a strongly typed object
        EventDemoObject moon = e.Item.DataItem as EventDemoObject;

        // access the whole repeater
        Repeater repeater = (Repeater)sender;

        // access the entire data source of moons
        List<EventDemoObject> itemCollection = (List<EventDemoObject>)repeater.DataSource;

        // find an ASP.NET control inside the ItemTemplate
        Literal literalDemo = (Literal)e.Item.FindControl("Literal_Demo");
        literalDemo.Text = "This is moon " + moon.ID + " of " + itemCollection.Count;

        if (moon.Title == "Ganymede")
            literalDemo.Text += "<br />Jupiter's moon with the largest mass.";
    }
}


This now produces the following HTML output


Some of the 60+ moons of Jupiter
1 -- Ganymede
This is moon 1 of 4
Jupiter's moon with the largest mass.
2 -- Callisto
This is moon 2 of 4
3 -- Io
This is moon 3 of 4
4 -- Europa
This is moon 4 of 4


OnItemCommand event example

If we want to put buttons into our Repeater, and have a button appear in each row, then that could be an unknown number of rows resulting in the same unknown number of buttons. The Repeater allows us to assign each Button's click, or Command event, should I say, to a single event handler. We could have 10 buttons one day, and 15 buttons the next day, so we shouldn't really have individual event handlers per button.

So we can use the Repeater's OnItemCommand event handler, which will fire every time we click on a button contained in an ItemTemplate of the Repeater. To help provide unique actions on each button click, we can assign two properties, the CommandName and CommandArgument properties. These two properties are assigned to the button, and once a button is clicked, the 2 values you have set are available in the OnItemCommand event. As an example, you could pass through the ID of a page you are editing and another property containing a representation of action to perform specifically for that button.

The ASPX now looks slightly more modified as the following:


<h3>Some of the 60+ moons of Jupiter</h3>

<asp:Repeater ID="Repeater_EventsDemo" runat="server"
        OnItemCommand="Repeater_EventsDemo_OnItemCommand"
                OnItemDataBound="Repeater_EventsDemo_OnItemDataBound">
    <ItemTemplate>
        <%# Eval("ID") %> -- <%# Eval("Title") %> <br />
        <asp:Literal ID="Literal_Demo" runat="server" /> <br />
        <asp:TextBox ID="TextBox_Demo" runat="server" /> <br />
        <asp:LinkButton ID="LinkButton_Demo" runat="server" Text='Send Message'
             CommandName='<%# Eval("ID") %>' CommandArgument='<%# Eval("Title") %>' />
        <br /> <br />     </ItemTemplate>
</asp:Repeater>

<br /><br />

<asp:Literal ID="Literal_Results" runat="server" />


In the C# code, in the OnItemCommand event handler, we have access to the CommandName and CommandArgument through the RepeaterCommandEventArgs e object. We have access to the whole repeater is the sender object.


protected void Repeater_EventsDemo_OnItemCommand(object sender, RepeaterCommandEventArgs e)
{
    // Acces to the whole Repeater and it's datasource
    Repeater repeater = (Repeater)sender;

    // object e holds CommandName and CommandArgument set in the ItemTemplate on the
    LinkButton
    String moonID = e.CommandName;
    String moonName = e.CommandArgument.ToString();

    // Access the Repeater Item
    RepeaterItem re = e.Item as RepeaterItem;

    // Access the LinkButton
    LinkButton linkButtonDemo = (LinkButton)e.CommandSource;

    Literal_Results.Text += "Sending message to " + moonName;
}


All this control enables us to output HTML which looks a little bit like this. So our generic event handler for OnItemCommand can handle our dynamically created buttons for when they are clicked on.


Some of the 60+ moons of Jupiter
1 -- Ganymede
This is moon 1 of 4
Jupiter's moon with the largest mass.
Send Message

2 -- Callisto
This is moon 2 of 4
Send Message

3 -- Io
This is moon 3 of 4
Send Message

4 -- Europa
This is moon 4 of 4
Send Message



Sending message to Ganymede