User Controls and Client Side Scripting

I am going to explain a very simple user control. My user control provides one CheckBox and one TextBox. When I check the checkbox the TextBox background color will be changed. For the sake of explanation I am adding some code to the text box click event also. While writing user controls we must keep in mind the basic principles of creating user controls. Consult your software documentation for more information about those principles.

Starting Our User Control

In your favorite editor write the code for UserControl. Add the control directive to indicate it is the UserControl.


<%@ Control Language="Vb" %>
<Asp:checkBox Id="MyCheckBox" runat="Server" onClick="javascript:check('MyTagCtl_MyText','Teal');"/>
<Asp:TextBox Id="MyText" runat="Server" />



Observe that I am not adding any java script to the TextBox at Declaration but for CheckBox. You can add other stuff for your control here, then add the server side scripting if necessary. I am using this area to add functionality to the TextBox.


<Script Langugae="Vb" runat="Server">
Public Sub Page_Load()
 MyText.Text="Click Here"
      MyText.Attributes.Add("onClick","changeColor('MyTagCtl_MyText','Silver')")
End Sub
</Script>



Notice that we can add script with Attribtes.Add method. This method has two parameters. The first one is the attribute name and the later is the value for the attribute. We are using this method to add java script function to our TextBox.

The Load event is same as Page_load of the web form. In case our control needs some client side scripting we can add with Script Tag. I am adding the javascript functions which will change the TextBox BackGround Color.


<script language="JavaScript" type="text/JavaScript">
function changeColor(ctlId, newColor)
 {
  document.getElementById(ctlId).style.backgroundColor = newColor;
 }
function check(ctlID,newColor)
{
 document.getElementById(ctlID).style.backgroundColor = newColor;  
}
</script>



We can add the javascript for the controls in the Aspx form where it is called, but it will be more meaningful to add it to the control itself so that calling form need not bother about the implementation. While referring the control we are not only using the control ID, but the TagID, which we will use in the Aspx form. It might be confusing at first, but the simple explanation is when controls are rendered on the form, it acquires the TagId used in the form and concatenates with the Id used in the user control to avoid any ambiguity with the controls used on the form. We will see details in implementation soon. Finally save the file with “Ascx” extension (MyScriptControl.Ascx).

Utilizing the UserControls

While utilizing the user controls in a web form it must be registered in the form at declaration section. For example, if our control file is named as “MyScriptControl.Ascx”, it must be registered using this control: 


<%@ Page Language="Vb"  %>
<%@ Register TagPrefix="MyUserCtl" TagName="MyTag" src="MyScriptControl.Ascx" %>



Each server control has “<Asp:” prefix at declaration. For user controls, we have to define our prefix. For our control we use TagPrefix  “MyUserCtl”.  Tagname is the reference of the control instance in the form and the source of the user control. Src is the source file which contains the code for the user control.

When time comes to use the user control declare a tag by using the following familiar format:


<MyUserCtl:MyTag Id="MyTagCtl" runat="Server" />



We can add attributes according to the requirement (example:  ViewState=”true”). As we discussed earlier we can add the Javascript in the Aspx page for the actions of the controls which are placed in the user control. We must remember that the TagId used in this declaration is the prefix which we applied to the controls id in the user control (I.e.  'MyTagCtl_MyText). To avoid this complex naming mechanism we can use “this” also.

Run the aspx form and click on the checkbox and on textbox to see controls in action. Congratulations, we now have our first user control!