Alphabetic User Control

Sunday, December 14, 2008
In some situations we may have a requirement to search the records Alphabetic wise. For these type of requirement we have to take 26 alphabets and when we have to generate click events to know which alphabet clicked. Its not a good way to generate 26 button click events. Instead of that we can take Command Name and we will call the same function. And if we make a user control, this control can used many times in our project.
First Add a Webuser control to your project and name it as “Alphabetic_Control.ascx”. Then add 26 link buttons. Each button has “Command Name” and “onclick” events.
“Command Name” contains the text of the link button like A, B, etc. and all “onclick” events of 26 link button calls “SelectList_Alpha” function.
The final user control code is:

  1. <asp:LinkButton ID="lnkA" runat="server" CommandName="A" Text="A" OnClick="SelectList_Alpha"></asp:LinkButton> -

  2. <asp:LinkButton ID="lnkB" runat="server" CommandName="B" Text="B" OnClick="SelectList_Alpha"></asp:LinkButton> -

  3. <asp:LinkButton ID="lnkC" runat="server" CommandName="C" Text="C" OnClick="SelectList_Alpha"></asp:LinkButton> -

  4. <asp:LinkButton ID="lnkD" runat="server" CommandName="D" Text="D" OnClick="SelectList_Alpha"></asp:LinkButton> -

  5. <asp:LinkButton ID="lnkE" runat="server" CommandName="E" Text="E" OnClick="SelectList_Alpha"></asp:LinkButton> -

  6. <asp:LinkButton ID="lnkF" runat="server" CommandName="F" Text="F" OnClick="SelectList_Alpha"></asp:LinkButton> -

  7. <asp:LinkButton ID="lnkG" runat="server" CommandName="G" Text="G" OnClick="SelectList_Alpha"></asp:LinkButton> -

  8. <asp:LinkButton ID="lnkH" runat="server" CommandName="H" Text="H" OnClick="SelectList_Alpha"></asp:LinkButton> -

  9. <asp:LinkButton ID="lnkI" runat="server" CommandName="I" Text="I" OnClick="SelectList_Alpha"></asp:LinkButton> -

  10. <asp:LinkButton ID="lnkJ" runat="server" CommandName="J" Text="J" OnClick="SelectList_Alpha"></asp:LinkButton> -

  11. <asp:LinkButton ID="lnkK" runat="server" CommandName="K" Text="K" OnClick="SelectList_Alpha"></asp:LinkButton> -

  12. <asp:LinkButton ID="lnkL" runat="server" CommandName="L" Text="L" OnClick="SelectList_Alpha"></asp:LinkButton> -

  13. <asp:LinkButton ID="lnkM" runat="server" CommandName="M" Text="M" OnClick="SelectList_Alpha"></asp:LinkButton> -

  14. <asp:LinkButton ID="lnkN" runat="server" CommandName="N" Text="N" OnClick="SelectList_Alpha"></asp:LinkButton> -

  15. <asp:LinkButton ID="lnkO" runat="server" CommandName="O" Text="O" OnClick="SelectList_Alpha"></asp:LinkButton> -

  16. <asp:LinkButton ID="lnkP" runat="server" CommandName="P" Text="P" OnClick="SelectList_Alpha"></asp:LinkButton> -

  17. <asp:LinkButton ID="lnkQ" runat="server" CommandName="Q" Text="Q" OnClick="SelectList_Alpha"></asp:LinkButton> -

  18. <asp:LinkButton ID="lnkR" runat="server" CommandName="R" Text="R" OnClick="SelectList_Alpha"></asp:LinkButton> -

  19. <asp:LinkButton ID="lnkS" runat="server" CommandName="S" Text="S" OnClick="SelectList_Alpha"></asp:LinkButton> -

  20. <asp:LinkButton ID="lnkT" runat="server" CommandName="T" Text="T" OnClick="SelectList_Alpha"></asp:LinkButton> -

  21. <asp:LinkButton ID="lnkU" runat="server" CommandName="U" Text="U" OnClick="SelectList_Alpha"></asp:LinkButton> -

  22. <asp:LinkButton ID="lnkV" runat="server" CommandName="V" Text="V" OnClick="SelectList_Alpha"></asp:LinkButton> -

  23. <asp:LinkButton ID="lnkW" runat="server" CommandName="W" Text="W" OnClick="SelectList_Alpha"></asp:LinkButton> -

  24. <asp:LinkButton ID="lnkX" runat="server" CommandName="X" Text="X" OnClick="SelectList_Alpha"></asp:LinkButton> -

  25. <asp:LinkButton ID="lnkY" runat="server" CommandName="Y" Text="Y" OnClick="SelectList_Alpha"></asp:LinkButton> -

  26. <asp:LinkButton ID="lnkZ" runat="server" CommandName="Z" Text="Z" OnClick="SelectList_Alpha"></asp:LinkButton>

Write the “SelectList_Alpha” function in the code behind. The complete code is..
The User control designing is completed, Now we have to generate a “Click” events to this User Control. The reason to create “Click” event is when we take this user control to other page it will not fire the click event. We have to create a “Click” event explicitly. For this we need to create a “Delegate” and “Event Handler”. It can shown as..

  1. public delegate void ClickEventHandler(object sender, EventArgs e);

  2. public event ClickEventHandler Click;

  3. protected void SelectList_Alpha(object sender, EventArgs e)

  4. {

  5. LinkButton lnk = (LinkButton)sender;

  6. Click(sender, e);

  7. }

Now create new page as “AlphaTest.aspx” in this page go to “design” view and drag the user control which we created.
Now go the code behind of “AlphaText.aspx”. In the page_load event create a delegate. The delegate can be created as.

  1. Alphabetic_Control1.Click += new Alphabetic_Control.ClickEventHandler(Alphabetic_Control1_Click);

The above code can be achieved as, First the ID of the User control, i.e, AplhaBeticcontrol1. when we put a “.” Inside that it will show all the methods and events. In that one select “Click”. Then put a “+”and “=” automatically designer will tell you to press the “Tab” button. Press 2 times it will generate the “Click” event.
In the click event write the fallowing code..

  1. protected void Alphabetic_Control1_Click(object sender, EventArgs e)

  2. {

  3. LinkButton lnkbtn = (LinkButton)sender;

  4. Response.Write("You Selected : " + lnkbtn.CommandName.ToString());

  5. }

Now run the "AlphaTest.aspx" page, when ever you click on the user control a event will be fired.

Download Sample Code


Infosys IS Helpdesk Talents said...

The event 'Alphabetic_Control1_Click' is not firing. I'm not getting any output. Can you please check?


Shyam Srinivas K said...

Good Work


Anonymous said...


This code does not work It's giving an exception

are you missing using the directive or assembly reference

Not sure what's missing.