News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

ASP.NET Tutorial – 05 – HTML Controls

All HTML elements can be made into HTML server controls. This is done by placing them inside of the form control with the runat=”server” attribute set.

<form id="myForm" runat="server">
  <a id="myLink" runat="server">MyLink</a>
</form>

The element then becomes an HTML control that can be manipulated using its ID reference. The control in this case is of the “HTMLAnchor” class. This class includes for example the HRef and Title properties, which can be used to set their corresponding HTML attributes.

<%
  myLink.HRef = "http://www.google.com";
  myLink.Title = "Google";
%>

Attribute Collection

For attributes that don’t have a property, such as “class”, they can be added to a control by calling the “Attributes” collection’s “Add” method with a name/value pair.

<% myLink.Attributes.Add("class", "myClass"); %>

Programmatically creating HTML controls

Another way to create HTML controls is using code only. For example, to add an image inside of the anchor element using code, first navigate to the Page_Load method in the code page. In that method, create an instance of the HtmlImage class. All of the HTML controls can be found under the System.Web.UI.HtmlControls namespace. However, since this namespace is already included with the using directive, there is no need to write the full path in order to create the image control.

HtmlImage img = new HtmlImage();

The source and alt properties for this control then need to be set.

img.Src = "missing.png";
img.Alt = "My Image";

Finally, add the image control to the anchor control’s “Controls” collection.

myLink.Controls.Add(img);

The Page_Load method will now look like this:

protected void Page_Load(object sender, EventArgs e)
{
  HtmlImage img = new HtmlImage();
  img.Src = "missing.png";
  img.Alt= "My Image";
  myLink.Controls.Add(img);
}

Adding an Image

Running the page now will cause the image’s alternative text to show up inside of the anchor element, since the web site does not include an image at the specified path. To add an image to the web site, you can right-click on the web site in the Solution Explorer and select “Add Existing Item”. From the dialog box, navigate to and add the image file you want and change the image control’s Src property to the name of the added file. Your image will now show up when you run the page.

HtmlGenericControl

Not all HTML elements have their own HTML controls. To add such an element the HtmlGenericControl class is used instead. This class can hold any HTML control and can therefore represent any HTML element. For example, to create a break tag the “br” string is given to the constructor for that object.

HtmlGenericControl gen = new HtmlGenericControl("br");

Alternatively, the TagName property can be used to define the tag, once the object has been created.

gen.TagName = "br";

Next, add the control to the form. This time using the “Controls” collection’s AddAt method, in order to place the image control before the anchor control.

myForm.Controls.AddAt(0, gen);

Viewing the page now shows that the line break is indeed added before the link.

Recommended additional reading:
Sams - Teach Yourself ASP.NET 3.5 in 24 Hours