Adding click events to user control

Question

Hello All,

I have a user control in an asp.net web application. The control outputs an html list that is customized based on the currently logged in user. The list items are generated from a database look up and the user control is formatted to appear as a drop down list in the page.

The control itself is simple and looks like this:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="item-lector.ascx.vb" Inherits="includes_usercontrols_item_selector" %>
<!--Item Selector-->
<div id="item-selector">
<%=Me.Output%>
</div>

The code behind file dynamically fills the control's "output" property so the final markup appears as follows:

<div id="item-selector">
<h1>Item 1 - Item 1</h1>  
<a href="#" class="changeItem  itemArrow">Change item</a>  
<ul id="changeItemMenu" class="dropDownMenu">    
<li><a href="#">Item 1</a></li>    
<li><a href="#">Item 2</a></li>    
<li><a href="#">Item 3</a></li>    
<li><a href="#">Item 4</a></li>    
<li><a href="#">Item 5</a></li>    
<li><a href="#">Item 6</a></li>    
<li><a href="#">Item 7</a></li>    
<li><a href="#">Item 8</a></li>    
<li><a href="#">Item 9</a></li>    
<li><a href="#">Item 10</a></li>    
</ul>
</div>

The ID and class properties are all necessary for formatting and other scripting. The control is meant to be used as a selector and the rest of the page should react to which item the user selects.

What I am trying to do is add click events to the list items. When the user clicks on one of the items in the list, I want to capture which item the user selects in the list (does this require a postback?) and do something with it in the code behind (< this is key).

I am more of a middle tier and db tier developer and UI development is not my strength so please consider me a newbie in that regard. I am not sure how to proceed or what to inject into the output string to enable this. Any and all help would be appreciated!

Answer 1

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="item-lector.ascx.vb" Inherits="includes_usercontrols_item_selector" %> 
<!--Item Selector--> 
<div id="item-selector"> 
<%=Me.Output%> 
</div> 
<!-- add this code here after the </div> -->
<script type="text/javascript">
   function createFunc(i){ return function(){ alert("You clicked element " + (i + 1) + " in the list"); return false; } }   
   var els = document.getElementById('changeItemMenu').getElementsByTagName('a'); 
   for(var i = 0; i < els.length; i++) 
      els[i].onclick = createFunc(i); 
</script>

In this code we add events applying directly the onclick attribute, a better way to add event would be to use a function like this one or an entire library like jQuery or YUI or whatever you like.

Answer 2

You may not necessarily need to use postbacks, but if you want to, you need to use something called delegates.
check it out over here: link

Even if you don't use them, they are useful, and will allow you to add "custom" events to your user control.

---

Edit:
Here is some code you can use:
First you define your delegate type. Think of a delegate like a function pointer. You will definte this in your code-behind:

public delegate void OnChangeDelegate(object sender, EventArgs e);

Then you will define the actual event to be of type OnChangeDelegate type.

public event OnChangeDelegate Change;

Then you create a method (or two) which "fires" your event:
(this is in your ascx.cs file)

public void ItemChange(object sender, EventArgs e)
{
    if (sender != null && sender is LinkButton)
    {
        string idx = ((LinkButton)sender).CommandArgument;
        FireMyChangeEvent(sender, idx);
}

Also

private void FireMyChangeEvent(object sender, string index)
{
    if (MyItemChange != null)
    {
        EventArgs e = new EventArgs();

        Change(sender, new ItemSelectorEventArgs(index));
    }
}

So anywhere in your codebehind, you can pass a handle to the control and some extra stuff in the EventArgs object.

Now the tricky part is getting your <li> s to cause a postback. Traditionally, you would use a <select> and <option>s because of the native onclick event, but since you are rendering a <ul> and <li>s You might want to wrap them with an <asp:LinkButton runat="server"> so you get an event firing, instead of the <a href="#">, so you can say OnClick for that LinkButton, and in that event, you can just call your ItemChange method to fire your control's event, and pass the id of the item which you can send in the EventArgs of your event.

I would definitely recommend reading the link I sent you, and remember that unless a control has runat="server" your server will not have any handle on it.

*Update: Here is some more code.

MY ASPX Code Note here that WebUserControl1 is my user control and MyClick is the method defined in ASPX.cs code.

<ul>
    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" OnChange="MyClick"/>
</ul>

My ASCX Code Note here that the CommandArgument is used to specify which item is clicked. Also, you can use this for a database id or some such value, I just use a simple integer ordinal.

<li><asp:LinkButton ID="lb1" runat="server" OnClick="ItemChange" CommandArgument="1">item1</asp:LinkButton></li>
<li><asp:LinkButton ID="lb2" runat="server" OnClick="ItemChange" CommandArgument="2">item2</asp:LinkButton></li>
<li><asp:LinkButton ID="lb3" runat="server" OnClick="ItemChange" CommandArgument="3">item3</asp:LinkButton></li>

In APX.CS Code
Note here that lblResult is a simple

<asp:Label ID="lblResult" runat="server" />

I used this just for display purposes

protected void MyClick(object sender, EventArgs e)
{
    int myitem = ((WebUserControl1.ItemSelectorEventArgs)e).ItemSelected;

    lblResult.Text = "You clicked Item " + myitem.ToString() + "!";
}

Lastly

This is the Custom Event Args class I created in my ascx.cs code:

public class ItemSelectorEventArgs : EventArgs
{

    public int ItemSelected
    {
        get;
        set;
    }

    public ItemSelectorEventArgs(string indexSelected)
    {
        int tryGetANumber;

        if (int.TryParse(indexSelected, out tryGetANumber))
        {
            this.ItemSelected = tryGetANumber;
        }
        else
        {
            this.ItemSelected = -1;
        }

    }
}

Remember
You are trapping the events of the HTML Controls inside your user control, gathering some info from them, and firing a custom event on your user control.