Sunday, September 15, 2013

How to create link button and event handler programmatically in user control

We often have the scenario that it need to generate LinkButtons in our web application depend on user role or action. This post explain you step by step how to create link buttons and their event handler dramatically in user control and use in .aspx page as below image :
Dynamic link buttons
First, create one user control ("LinkButtonControl.ascx") and copy the following code to that control. It uses PlaceHolder contron that is to store dynamically added server controls on the Web page.
<fieldset style="width: 200px;">
    <legend>Dynamic Links</legend>
    <ul>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </ul>
</fieldset>
In code-behind, it should look like as below :
public partial class LinkButtonControl : System.Web.UI.UserControl
{
    //Declare event handler 
    public delegate void LinkButtonEventHandler(object sender, EventArgs e);
    public event LinkButtonEventHandler LinkButtonClick;
    //Create generic list object 
    List<LinkControl> linkControlList = new List<LinkControl>();

    protected void Page_Load(object sender, EventArgs e)
    {
        //Add the sample data to generic list
        linkControlList.Add(new LinkControl { Name = "aboutus", Title = "About Us", Url = "aboutus.aspx" });
        linkControlList.Add(new LinkControl { Name = "contactus", Title = "Contact Us", Url = "contactus.aspx" });
        linkControlList.Add(new LinkControl { Name = "tou", Title = "Term of use", Url = "TOU.aspx" });
        CreateLinkButtons();
    }
    public void CreateLinkButtons()
    {
        foreach (var link in linkControlList)
        {
            //Create LinkButton programmatically 
            LinkButton lb = new LinkButton();
            lb.ID = link.Name;
            lb.Text = link.Title;
            lb.CommandArgument = link.Url;
            lb.Click += new EventHandler(this.LinkButtonClick);
            //Add LinkButton to PlaceHolder
            PlaceHolder1.Controls.Add(new LiteralControl(@"<li>"));
            PlaceHolder1.Controls.Add(lb);
            PlaceHolder1.Controls.Add(new LiteralControl(@"</li>"));
        }
    }
    protected void LinkButton_Click(object sender, EventArgs e)
    {
        if (LinkButtonClick != null)
            LinkButtonClick(sender, e);
    }
}
//Data Transfer Object class  
public class LinkControl
{
    public string Name{get; set; }
    public string Title { get; set; }
    public string Url { get; set; }
}
Second, create one .aspx page("UserControlTest.aspx") and add the follow CSS to <head> tag for link button layout.
<style type="text/css">
    ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
</style>
Finally, drag and drop our user control ("LinkButtonControl.ascx") to .aspx page and add "OnLinkButtonClick" event manually as below :
<uc1:LinkButtonControl ID="LinkButtonControl1" runat="server" OnLinkButtonClick="LinkButtonControl1_Click" />    
Copy the following code snippet to code-behind for event implementation.   
protected void LinkButtonControl1_Click(object sender, EventArgs e)
{
    LinkButton lb = sender as LinkButton;
    if (lb != null)
        Response.Redirect(lb.CommandArgument);
}
That's it.

Hope this helps
SI THU WIN

No comments:

Post a Comment