Fire up event from Image Button in a User Control inside a Data List

Question

:

This is my first post here, so I beg you forgive my mistkaes :D The problem I'm facing is the following: I'm trying to catch event from some 'ImageButton' inside a Data List but I am experiencing some problems.

I need like to catch any button that is fired up to do some action (so I need to identify it). The button is inside an User Control that is contained by 'DataList', that is placed inside a User Control, that is load from a Page (that has a Master Page also). You can see the nested order here : Page->User-Control->DataList->User Control->ImageButton

I have to say web application is built using Web Forms MVP pattern so Pages (not controls) have a Presenter that manages all the logic and send data to bind web forms, that load the needed controls.

Members.aspx

.......
<%@ Register Src="~/Controls/DataControl.ascx" TagName="DataBox" TagPrefix="dtC" %>
.......
<dtC:DataBox ID="DataBoxControl" runat="server" />

Members.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        _presenter = IoCFactory.Instance.CurrentContainer.Resolve<IMembersPresenter>();

        _presenter.Init(this, IsPostBack);

    }
......
    public void ShowFriendPanel(IList<ContactInfo> friendList)
    {
        DataBoxControl.FriendsList = friendList.ToList();
    }

Presenter looks like this:

    public override void Init(IMemberView view, bool isPostBack)
    {
        base.Init(view,isPostBack);//authentication and basic stuff


        IList<ContactInfo> friendContactList = _userAccountDao.GetFriendsOfUser(CurrentUser.Id, 0, int.MaxValue);


        if ((friendContactList.Count > 0))
        {
            ShowFriendsBox(friendContactList);

        }

And the control DataBoxControl contains a Data List that contains another User Control

  <asp:DataList ID="dataDL" runat="server" OnItemDataBound="dataDL_ItemDataBound" OnItemCommand="dataDL_ItemCommand"   >
        <ItemTemplate>
             <ci1:ContactImage runat="server" ID="ContactImageControl" Height="59px" Width="59"  Show="All" />
        </ItemTemplate>
  </asp:DataList>

And final User Control (ContactImage.ascx) contains Web Control 'ImageButton'

 ......
 <asp:ImageButton ID="deleteButton" ImageUrl="/images/remove_contact_icon.png" runat="server"  />
  .......

Id to do action is assigned in 'ContactImage' Control to Image Button 'CommandName' and that's the value I need to retrieve when button is clicked. In fact, ContactImage User Control doesn't do anything inside and I rely the fired event to OnItemCommand on the Data List but I have two problems:

I cannot bind the Data List before Page_Load so I have to check data binding is taking place when 'IsPostBack' is false; in that case, the fired event doesn't take place because the ContactImage fails trying to fullfil its properties (DataList Item is empty because List is not binding).
If Data List binding is moved to Page_Init (in the User Control) the event is fired up but OnItemCommand doesn't receive anything at all (and List to bind Data List is empty also).

I wonder if the pattern I'm using is responsible in some way because I built a simple website and it works and event reaches ItemCommand

Simple Website (here it works but no MVP pattern is used) Event.aspx

 <h2>
    Events
</h2>
<p>
    Events into Data List
</p>
<asp:DataList ID="DataListWihtEvents" RepeatDirection="Horizontal" RepeatColumns="4" OnItemCommand="DataList_ItemCommand" runat="server">
    <ItemTemplate>
        <tnc:TopControl ID="TopControlNested" runat="server" Number="<%# (Container.DataItem) %>" />
    </ItemTemplate>
    <SeparatorTemplate>&nbsp;</SeparatorTemplate>
</asp:DataList>
<br />
<asp:Label ID="ShowButtonFiredUpTitle" runat="server" Text="Here goes the button that was fired up: " />
<asp:Label ID="ShowButtonFiredUp" runat="server" Font-Bold="True" />

Event.aspx.cs

public partial class Events : System.Web.UI.Page
{
    protected List<int> Numbers = new List<int>();

    protected void Page_Init(object sender, EventArgs e)
    {
        for (int i = 1; i < 5; i++)
        {
            Numbers.Add(i);
        }

        DataListWihtEvents.DataSource = Numbers;
        DataListWihtEvents.DataBind();
    }

    protected void DataList_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (e.CommandSource.GetType() == typeof(Button))
        {
            var b = (Button) e.CommandSource;
            ShowButtonFiredUp.Text = b.CommandName;
        }

    }

TopNestedControl.ascx

<%@ Register Src="~/Controls/BottomNestedControl.ascx" TagName="BottomControl" TagPrefix="bnc" %>

TopNestedControl.ascx.cs

public partial class TopNestedControl : System.Web.UI.UserControl
{
    public int Number { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        BottomNestedControl.Number2 = Number;
    }
}

BottomNestedControl.ascx

<asp:Button ID="ShowNumberButton" runat="server" Text="Button" CommandName="button fired up!" />

BottomNestedControl.ascx.cs

public partial class BottomNestedControl : System.Web.UI.UserControl
{
    public int Number2 { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        ShowNumberButton.Text = "Button " + Number2;
        ShowNumberButton.CommandName = "#" + Number2;
    }
}

In others pages, I'm using delegates to handle events, but there no 'DataList' is used and the event is catched without problems. I would be so glad if anyone could help me in anyway to untangle this mess.

Thank you in advance,

Javier

rkw rkw · Accepted Answer · 2011-07-13T18:32:28

When too many layers exist, the page's life cycle plays a really important role. Instead of going into detail on which actions should be done on which cycle (google does a better job), I'm just going to lay out some tips and tricks instead.

Let the page render, use IE or Chrome or Firebugs (for Firefox) and press f12. Select one of the buttons in question and see if the CommandName attribute is correctly set. From your code above, that property was never set, so I assumed you did it on the code behind.

If you have access to the button (source of the post back), you can just bind other attributes onto the button and use that information.
If the CommandName and OnItemCommand is properly set up, but the event is still not being caught, you can always attach a custom event to the button and raise it.
On your ID="dataDL" object, remove the custom control and put in a simple asp:button with a static command name, then run it in debug mode and see if it even triggers dataDL_ItemCommand. I find it weird that the event is not firing.

Right now, it isn't clear from your post, what type of problem you are having. You should limit it down so it is easier to propose a solution.

Fire up event from Image Button in a User Control inside a Data List

2 Answers