April 13, 2009

Create User Control

To create a web user control, in visual studio, choose "Add New Item" > "Web User Control" and choose a name and then click on the Add button.

The following code is automatically generated.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCWebUserControl.ascx.cs" Inherits="UCWebUserControl" %>

The code appears similar to adding a new web-form but a look on the HTML shows a Control directive instead of the Page directive.

Texts and controls can be added to the page similar to adding text and controls to a web form as shown below.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCWebUserControl.ascx.cs" Inherits="UCWebUserControl" %>

<div>div element in a user control</div>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

This user control can now be added to a page.

Convert text to uppercase using CSS

In many pages, I have noticed people writing javascripts to enable simple text transformation like converting all characters to uppercase, etc. Some of these features can be easily achieved using CSS styles.

In this example, I will use CSS to convert all characters in a div, span, asp:Label and asp:TextBox to uppercase.

In the head section, declare the style.

<head runat="server">
title>Convert text to uppercase</title><style type="text/css">.upper { text-transform:uppercase; }</style></head>

In the body section, declare the content elements and associate them with the CSS style.


<form id="form1" runat="server">

<div class="upper">one line of div text.</div><br />

<span class="upper">one line of span text.</span><br />

<asp:TextBox ID="TextBox1" runat="server" CssClass="upper"></asp:TextBox><br/>

<asp:Label ID="Label1" runat="server" Text="one line of Label text." CssClass="upper"></asp:Label><br />


That's it, when you run the page, all the text in the page will be displayed as uppercase.

Reference: Shahed Kazi at AspNetify.com