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:
- 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).
- Rename
ServerControl1.cs
to LinkButtonDefault.cs
- Rename the namespace in the file to
CustomControls
- 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")]
- 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:
- Remove the
@ Register
directive used on the .aspx markup.
- Open the
Web.config
file for your web application.
- Locate the
<system.web>...</system.web>
section.
- 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.