Tag Mapping in ASP.NET

Consider a scenario where you want to add functionality to a server control in ASP.NET of your own. For example you want to change the background color of your textbox regardless in code how many time you set a background color to different color, it should remain the same you wanted this to have; and on the same side you also want this functionality will be done for every textbox available in your web-application and web site, the control could be of any type, it could be a textbox, dropdown, list box, grid view, button etc. if you are thinking such scenarios to implement in your application or you stuck somewhere to achieve this, than this article if definitely for you to give you a successful take-off.

For implementing Tag Mapping there is an easy job, rather than a heavy line of code, if I tell you in brief you have to create your own custom class that inherit any server control in which you want to set the tag mapping, in that custom class you can write your own validation or you can set the property of your own to do the task you want to accomplish; plus an entry in web.config file where you can set the mapping. So let’s create a situation first.

Let’s suppose I want to create an application where there is a textbox or multiple textboxes you can say. And for those textboxes I want to create a rule, and the rule is to set a global background color of all the textboxes whenever I set the textbox.backcolor property from my codebehind. In such case it’ll be very hectic to trap all the textboxes and set their background color, if I set it to only one textbox. In such case my tagmapping comes in place that allows me to change all the background color of textboxes if I try to set the backcolor property of any textbox in postback. It is just an example of backcolor, you can do many other task with the tagmapping in many server controls.

For the situation above let’s create the code first. First of all create an app_code folder in your web application if it doesn’t exist there. Add a class by right clicking on that folder and Add Item. Type “CustomTextBox” as your class name (this could be any name). Now inherit this class with TextBox class and override the BackColor property of this class, and in setter write any color you want to show globally. For a complete code please see the code below:

public class CustomTextBox : System.Web.UI.WebControls.TextBox
{
    public CustomTextBox()
    {
           //
           // TODO: Add constructor logic here
           //
    }
    public override System.Drawing.Color BackColor
    {
        get
        {           
            return base.BackColor;
        }
        set
        {
            base.BackColor = System.Drawing.Color.LimeGreen;
        }
    }
    public override string Text
    {
        get
        {
            return base.Text;
        }
        set
        {
            base.Text = "Write Whatever it will not change";
        }
    }   
}

As you can see in the code above I’ve override two property, text and Backcolor, and in setter value I’ve changed my own color and my own text. So the thing is now after doing my web.config entry, whenever I’ll set the text property of my control, it’ll always be “Write Whatever it will not change” and whenever I’ll set the backcolor property of my control it’ll always be “LimeGreen” in color regardless the property I set from the codebehind. Before proceeding ahead lets see the web.config entry for a second.

<pages>
<tagMapping>
       <add tagType="System.Web.UI.WebControls.TextBox" mappedTagType="CustomTextBox" />
</tagMapping>
</pages>

The above entries need to be done under tag. Here as you can see I’m mapping my customtextbox class with TextBox server control, so that my customtextbox comes into the picture.

To achieve this I’ve created one label, one textbox and one button, in button click I’ll set the textbox text property to “Hello World” and backcolor property to Red, but let’s see what happens when I do it.

Below is my code behind code of button1 click event.

protected void Button1_Click(object sender, EventArgs e)
{
    TextBox1.BackColor = System.Drawing.Color.Red;
    TextBox1.Text = "Hello World";
}

Now let’s preview the code in browser, before clicking the button:

Now when user presses Button what happens?

As you can see the text changed to that text, I’d set in my custom class and so do the BackColor, regardless the property values of my codebehind class. This is the charm of TagMapping, introduced with 2.0 Framework. Hope it will help you in similar situation.