Question

I have a function which sets my linkbutton as the default button for a panel.

protected void Page_PreRender(object sender, EventArgs e)
    {
        string addClickFunctionScript = @"function addClickFunction(id) {
               var b = document.getElementById(id);
               if (b && typeof(b.click) == 'undefined')
                 b.click = function() {
                   var result = true;
                   if (b.onclick) result = b.onclick();
                   if (typeof(result) == 'undefined' || result)
                     eval(b.getAttribute('href'));
                 }
             };";

        string clickScript = String.Format("addClickFunction('{0}');", lbHello.ClientID);

        Page.ClientScript.RegisterStartupScript(this.GetType(), "addClickFunctionScript", addClickFunctionScript, true);
        Page.ClientScript.RegisterStartupScript(this.GetType(), "click_" + lbHello.ClientID, clickScript, true);
    }

This works fine. How to make this reusable to all my pages of my application. One page can have multiple linkbuttons and multiple panels…. Any suggestion…

Answer 1

The cleanest way would be to use a custom server control that inherits from LinkButton. In fact this seems to be in line with the blog post from your earlier question. All you need to do is override the OnPreRender event and paste the code you have while changing lbHello.ClientID to this.ClientID to refer to the specific instance of that control. It should not take more than 10 minutes to set this up. Once this is done, you can use as many of the controls as you want on one page and easily support it throughout your application’s various pages.

You might find this MSDN article helpful when following my instructions below, specifically the “Creating the Server Control” section: Walkthrough: Developing and Using a Custom Web Server Control. Here’s a step by step guide to accomplishing this:

1. In your existing solution add a new ASP.NET Server Control project (right click on your solution from the Solution Explorer -> Add New Project -> ASP.NET Server Control). Name it LinkButtonDefault (you’re free to change the name, of course).
2. Rename ServerControl1.cs to LinkButtonDefault.cs
3. Rename the namespace in the file to CustomControls
4. Perform steps 12-14 in the MSDN article by opening the AssemblyInfo.cs file (contained in the Properties folder of the project). Add this line at the bottom of the file: [assembly: TagPrefix("CustomControls", "CC")]
5. In LinkButtonDefault.cs add this code to override the OnPreRender event:

Code (notice the use of this.ClientID):

    protected override void OnPreRender(EventArgs e)
    {
        string addClickFunctionScript = @"function addClickFunction(id) {
           var b = document.getElementById(id);
           if (b && typeof(b.click) == 'undefined')
             b.click = function() {
               var result = true;
               if (b.onclick) result = b.onclick();
               if (typeof(result) == 'undefined' || result)
                 eval(b.getAttribute('href'));
             }
         };";

        string clickScript = String.Format("addClickFunction('{0}');", this.ClientID);

        Page.ClientScript.RegisterStartupScript(this.GetType(), "addClickFunctionScript", addClickFunctionScript, true);
        Page.ClientScript.RegisterStartupScript(this.GetType(), "click_" + this.ClientID, clickScript, true);

        base.OnPreRender(e);
    }

You may also want to update the generated attribute code above the class declaration that starts with [ToolboxData("<{0}: to use LinkButtonDefault instead of ServerControl1. That’s it for the new Server Control project. I highly recommend reading the aforementioned MSDN article to take advantage of other capabilities, such as adding controls to the toolbox if you have a need to do so.

After completing these steps you should have a LinkButtonDefault.cs file that resembles this:

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:LinkButtonDefault runat=server></{0}:LinkButtonDefault>")]
    public class LinkButtonDefault : LinkButton
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? "[" + this.ID + "]" : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write(Text);
        }

        protected override void OnPreRender(EventArgs e)
        {
            string addClickFunctionScript = @"function addClickFunction(id) {
               var b = document.getElementById(id);
               if (b && typeof(b.click) == 'undefined')
                 b.click = function() {
                   var result = true;
                   if (b.onclick) result = b.onclick();
                   if (typeof(result) == 'undefined' || result)
                     eval(b.getAttribute('href'));
                 }
             };";

            string clickScript = String.Format("addClickFunction('{0}');", this.ClientID);

            Page.ClientScript.RegisterStartupScript(this.GetType(), "addClickFunctionScript", addClickFunctionScript, true);
            Page.ClientScript.RegisterStartupScript(this.GetType(), "click_" + this.ClientID, clickScript, true);

            base.OnPreRender(e);
        }
    }
}

Now return to your web application and add a reference to the CustomControls project. You should be able to do this from the Add Reference’s Project tab since I suggested adding the above project to your existing solution. If you want you could’ve built the above project in its own solution then you would add a reference to it’s .dll file by using the Browse tab. Once a reference has been added you are ready to use the new LinkButtonDefault control.

To use the controls you can use the @ Register directive on each page the control will be used, or you can add it to the Web.config and gain easy reference to it throughout your application. I will show you both methods below. Based on your question I think you’ll want to add it to the Web.config. Refer to the MSDN article and you will find this information half way down the page under “The Tag Prefix” section.

Using @ Register directive:

Go to your desired .aspx page and add the Register directive to the top of each page you want to use the control in:

<%@ Register Assembly="CustomControls" Namespace="CustomControls" TagPrefix="CC" %>

On the same page, you may now use multiple instances of the control. Here’s an example:

<p><strong>1st Panel:</strong></p>
<asp:Label runat="server" ID="helloLabel" />
<asp:Panel ID="Panel1" runat="server" DefaultButton="lbHello">
    First name:
    <asp:TextBox runat="server" ID="txtFirstName" />
    <CC:LinkButtonDefault ID="lbHello" runat="server" Text="Click me" OnClick="lbHello_Click"
        OnClientClick="alert('Hello, World!');" />
</asp:Panel>

<p><strong>2nd Panel:</strong></p>
<asp:Label runat="server" ID="fooBarLabel" />
<asp:Panel ID="Panel2" runat="server" DefaultButton="lbFooBar">
    Other:
    <asp:TextBox runat="server" ID="TextBox1" />
    <CC:LinkButtonDefault ID="lbFooBar" runat="server" Text="Click me" OnClick="lbFooBar_Click" />
</asp:Panel>

In the code behind (.aspx.cs) you would need to add:

protected void Page_Load(object sender, EventArgs e)
{
    // example of adding onClick programmatically
    lbFooBar.Attributes.Add("onClick", "alert('Foo Bar!');"); 
}

protected void lbHello_Click(object sender, EventArgs e)
{
    helloLabel.Text = String.Format("Hello, {0}", txtFirstName.Text);
}

protected void lbFooBar_Click(object sender, EventArgs e)
{
    fooBarLabel.Text = String.Format("FooBar: {0}", TextBox1.Text);
}

Using Web.config:

To use the Web.config keep the exact same markup and code used in the above example. Follow these steps:

1. Remove the @ Register directive used on the .aspx markup.
2. Open the Web.config file for your web application.
3. Locate the <system.web>...</system.web> section.
4. Add the following mapping to that section:

Mapping:

<pages>
  <controls>
    <add assembly="CustomControls" namespace="CustomControls" tagPrefix="CC" />
  </controls>
</pages>

Recompile and everything should build successfully. With this in place you no longer need to specify the @ Register directive on each individual page.

If you get stuck and have any questions let me know. Just read over everything above carefully since it’s a long post with lots of code.