User Controls and Client Side Scripting

If the requirement is for the appearance (ie, styles) of the form we can adopt XML and XSLT to meet the requirements. If the need comes for functionality we must either rewrite the form code or implement the user controls. User controls provide functionality in different scenes. For example, we are not going to write the database connection info in each page or configuration file, due to the confidential nature of that information. In such cases, user controls come in handy. We can write some secured or encrypted files for the confidential information and use the user controls to read and provide the information as necessary. User controls may provide UI (like tables, text boxes, labels if necessary) or without UI (like database connection string, style etc).

Contributed by
Rating: 4 stars4 stars4 stars4 stars4 stars / 109
February 18, 2004
Rate this Article:
MEH MEH++


SEARCH ASP FREE
TOOLS YOU CAN USE

advertisement

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
(ctlIdnewColor)
 
{
  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!

blog comments powered by Disqus
ASP.NET CODE ARTICLES

- How to Use the ListBox Control in ASP.NET 2.0
- How to Load XML Documents in ASP.NET 2.0
- DataGrid Code
- ASP.NET Guestbook
- User Controls and Client Side Scripting
- ASP.NET Programming with Microsoft's AS...
- ASP.NET Basics (part 3): Hard Choices
- ASP.NET Basics (part 2): Not My Type
- ASP.NET Basics (part 1): Nothing But .Net
- Directory Tree Browser
- How to get the confirmation of Yes/No from a...
- Complete example using custom errors and wri...
- Paging Certain # records per page .NET style
- General Methods of formatting and Subtractin...
- .NET LinkButton web control

ASP Web Hosting ASP.Net Web Hosting Windows Web Hosting
ASP Free Forums 
 RSS  Tutorials RSS
 RSS  Forums RSS
 RSS  All Feeds
Site Map 
Request Media Kit
Write For Us Get Paid 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Privacy Policy 
Support 


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Most Popular Topics
All ASP.Net Tutorials