CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » ASP.Net Article » Accessing HTML elements in ASP.Net 2.0   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Accessing HTML elements in ASP.Net 2.0

By Satheesh Babu
Posted On Apr 02,2008
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 2
Print this article.
Category: ASP.Net

Subscribe to our feed!

Accessing HTML elements in ASP.Net 2.0

 

With the introduction of .Netframework 2.0, there are lots of new features added for web development. One such thing is accessing HTML elements programmatically, meaning in Codebehind class. This gives us the power of handling some of the html elements dynamically in C# and other .net lanaguages that are really usefull. This article will help us understanding in achieving some of the HTML features in codebehind class.

 

Accessing <html> elements in code

There are set of new classes in .Netframework 2.0 that are added in the System.Web.UI.HtmlControls Namespace which make this feasible. Moving forward, we will comprehend some of the HTML features that can be accessed in codebehind through this new classes.

 

Accessing <Head> tag

It can be done through HtmlHead class that is packed in the namespace System.Web.UI.HtmlControls. The Page object gives us a way through Header property to access the <head> element.

For example,

HtmlHead head = Page.Header;

 

Setting Page Title

With the help of HtmlHead class, it is possible to set the page title from the codebehind.

Below code will help us understanding it.

HtmlHead head = Page.Header;

HtmlTitle title = new HtmlTitle();

title.Text = "Test Page";

head.Controls.Add(title);

 

In short, the above requirement can be achieved by,

HtmlHead head = Page.Header;

head.Title = "Test Page";

 

This code will add a <title> tag in <head> element.

 

Constructing CSS Styles from CodeBehind

We can add stylesheet elements in <head> tag of the HTML output generated by asp.net from the codebehind class, and these constructed styles can be applied to the controls on the page. Next section will help us achieving it.

 

Generic styles

We can create generic css styles and apply it to all the controls without applying the style explicitly to the controls. For example, creating a css class for input tag and applying to all the input tags in the page can be done by,

 

HtmlHead head = Page.Header;

Style inputStyle = new Style();

inputStyle.ForeColor = System.Drawing.Color.Red;

inputStyle.BackColor = System.Drawing.Color.LightGray;

head.StyleSheet.CreateStyleRule(inputStyle, null, "input");

 

The above code will generate a HTML output like,

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

       Test Page

</title><style type="text/css">

       input { color:Red;background-color:LightGrey; }

 

</style></head>

<body>

<form name="form1" method="post" action="Default.aspx" id="form1">

    <div>

        <input name="TextBox1" type="text" id="TextBox1" /></div>

</form>

</body>

</html>

 

So, all the textbox in the page will be applied with the above style.

The output will be like,

 

 

Applying Styles explicitly to a control

We can create css styles specific for controls and apply it to the controls explicitly. The ASP.Net controls now have ApplyStyle(Style) and MergeStyle(Style) methods packed with the control to achieve the same.

 

Style textStyle = new Style();

textStyle.ForeColor = System.Drawing.Color.DarkRed;

textStyle.BorderColor = System.Drawing.Color.DarkBlue;

textStyle.BorderWidth = 2;

Page.Header.StyleSheet.RegisterStyle(textStyle, null);

TextBox1.MergeStyle(textStyle);

 

The above code will generate an html output similar to below,

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

       Untitled Page

</title><style type="text/css">

       .aspnet_s0 { color:DarkRed;border-color:DarkBlue;border-width:2px;border-style:solid; }

</style></head>

<body>

<form name="form1" method="post" action="Default2.aspx" id="form1">

    <div>

        <input name="TextBox1" type="text" id="TextBox1" class="aspnet_s0" />

    </div>   

</form>

</body>

</html>

 

Output will be,

 

 

 

Adding <Link> tag

The link tag is useful to register a CSS file/Jscript with our Webpage. It can be achieved by HtmlLink class.

Refer the below code that adds a stylesheet file from codebehind.

 

HtmlLink cssLink = new HtmlLink();

cssLink.Href = "StyleSheet.css";

cssLink.Attributes.Add("rel", "stylesheet");

cssLink.Attributes.Add("type", "text/css");

Page.Header.Controls.Add(cssLink);

 

This will inject a <link> in the html output inside the <head> tag.

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

 

Adding  <Meta> tag

Meta tags can be used to construct search engine friendly websites, can be used to refresh page and many more. In ASP.Net 2.0, we can achieve this from codebehind and hence we have the capability to add in runtime.

The following code will do it,

 HtmlHead head = (HtmlHead)Page.Header;

 

 HtmlMeta metasearch1 = new HtmlMeta();

 HtmlMeta metasearch2 = new HtmlMeta();   

 metasearch1.Name = "descriptions";

 metasearch1.Content = "my personal site";

 head.Controls.Add(metasearch1);

 metasearch2.Name = "keywords";

 metasearch2.Content = "ASP.Net,C#,SQL";

 head.Controls.Add(metasearch2);

 //Meta to refresh the page

 HtmlMeta metarefresh = new HtmlMeta();

 metarefresh.HttpEquiv = "refresh";

 metarefresh.Content = "5";

 head.Controls.Add(metarefresh);

 

The above code injects the following tags inside the <head> element in the output html.

 

<meta name="descriptions" content="my personal site" />

<meta name="keywords" content="ASP.Net, C#, SQL" />

<meta http-equiv="refresh" content="5" />

 

Adding clientside Reset button

Sometimes, we will have requirements to reset the input controls on the webpage from clientside. HtmlInputReset class will help us doing it from codebehind class. The following code will add a reset input element in the output html.

 

 HtmlInputReset reset = new HtmlInputReset();

 reset.ID = "ResetButton";

 reset.Value = "Reset";     

 PlaceHolder1.Controls.Add(reset);

 

The above code will add a reset tag like below,

<input name="ResetButton" type="reset" id="ResetButton" value="Reset" />

 

This class is new in 2.0 while the same can be achieved through HtmlInputButton class in 1.x.

 



ASP.Net Hosting

Recent Articles

Reference

MSDN

 

Downloads

Download Source 

 

Conclusion

Thus, we can play with html elements from codebehind class in ASP.Net 2.0. Also, this feature gives us more flexibility than in 1.x days by giving us the capability to add Title, Meta tags dynamically which will be really useful when we have dynamic pages.

 

Happy coding!!!

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    There is one issue
    I was looking for an idea on how to get to the "head" element from code behind and I stumbled on this article. There is one issue with your code: it works only if in html code one uses "<head runat=server>". This means that a server side control will be created and one can access it from code behind.
    But what would one do if it isn't declared as a server control?
    header footer
    http://www.safetydirecteu.com/Default.aspx iwant header footer side menu dynamic code(iwant)