.toString() » runat=”server”

ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III

babarjehangir — Fri, 20 Feb 2009 23:15:18 +0000

In this Part we are working with some of the Standard Controls in Details.

Standard Controls

Standard controls contain controls which help the developers to perform useful operations for example displaying information, taking user input in a textbox, displaying a drop down box, ListBox and many more. we will take look at some of them in detail.

Label Control

label control is used when you need to dynamically display/change data on the webpage. we already saw a sample code in the last part (part 03) which changed text of the label dynamically on button’s click and TextBox’s TextChanged Event. There are plenty of Properties with which we play around with.

ASP.NET Standard Controls - Label - Property Panel

following are some of the most used properties witha brief description

BackColor – sets the color of the background of the label control
BorderColor – sets the color of the border of the label control
BorderStyle – lets you set the style of the border e.g. NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.
BorderWidth – lets you set the width of the border
CssClass -lets you set CSS class for label.
Font – lets you configure various font properties e.g Bold, Italic, Name, Names, Overline, Size, Strikeout, Underline
ForeColor – lets you set the color of the content of the label.
ToolTip – lets you set the tool tip for the label control.
Style – lets you set inline style attribute for the label control.

now lets have a look at a sample which illustrates the use of these properties.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>





    [.toString()] Standard Controls - http://dottostring.com

Run (F5) your website and this is what you will get:

ASP.NET Standard Controls - Label - Properties Demonstration

Labels are frequently used as the labels next to textbox fields in order to identify the information to be entered in those fields. In order to associate a Label to a TextBox, Label has a property AssociatedControlID, setting this property doesn’t change anything as far as the display is concerned however when the label is clicked by the user it automatically takes the focus to the associated control.

Here is another sample which illustrates the use of AssociatedControlID and CssClass attributes.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>





    [.toString()] Standard Controls - http://www.dottostring.com

Run(F5) the website and see the results.

ASP.NET Standard Controls - Label - Properties Demonstration II

Literal Control

Literal Control is almost the same as the Label Control except for the fact that Literal Control does not render its content inside the Span Tag, you can use it to display text or HTML content. it simply outputs contents assigned to it. Like for example lets say we need to dynamically update the title of the page, this can be done either by placing a runat=”server” and ID attributes to the Title Tag and then modify it from the server side or we can simply place a Literal Control in the Title Tag and then assign the desired title text to the literal control from the server.

Literal Control possess a useful property called Mode, which can be set to one of the following properties.

PassThrough – Everything assigned to the Text Property is rendered as it is to the browser. for example “dottostring.com” will print dottostring (in bold and italic)
Transform – This will remove all the content from the Text Property of the Literal Control which is not supported by the browser/device it is rendering to. In case of HTML Browser this acts just like PassThrough
Encode – This will encode the all the tag so that they are displayed as it is to the viewer. for example “dottostring.com” will print dottostring.com to the user interface.

as we dont have any span tag in the literal control rendered output, therefore we cannot apply any sort of formatting.

now lets look at some samples

Add Two Literal Controls, one in the Title Tag and the other inside the body and name them lTitle and lContent respectively.
in the Page_Load Method add the following code.

protected void Page_Load(object sender, EventArgs e)
    {
        lTitle.Text = "[.toString()] Standard Controls - http://www.dottostring.com";
        lContent.Text = "dottostring";
    }

Run(F5) the application and notice the following results

ASP.NET Standard Controls - Literal Control Demonstration

The Title of the page is what we set from the Page_Load Method dynamically and also we can see the other Literal Control which is rendered to display dottostring in below the two textboxes. also it is important to note that by Default the Mode Property for Literal Control is set to Transform, and since results are being redered to an HTML Browser, Transform and PassThrough will generate the same results, however when we change the IContent’s Mode Property to Encode it will also display the markup language on the user interface. effectively converting “<” to “<” and “>” to “>”.

ASP.NET Standard Controls - Literal Control Demonstration - Mode=Encode

we can clearly see the mark up language now. so Literal Control can be a very handy control in generating HTML content dynamically.

Thats it for this Part04, in this part we learned how to use some Standard Controls and what their important set of properties do. In the next part we will look at other Standard Controls which will enable us to make our interface much more user interactive.

Thanks for visiting and waiting patiently for this part, I will be posting more regulary now, so keep in touch and don’t forget to leave comments/feedback
Download Source Code for Part04
Cheers !

Previous Parts:

ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II

babarjehangir — Wed, 31 Dec 2008 15:06:27 +0000

In the last part (part 02) I gave you an overview of ASP.NET 3.5 Controls and their Event Handlers, in this part I will put forward some samples codes.

Creating an ASP.NET Website

Open Microsoft Visual Studio 2008
Create a new ASP.NET website (File – > New – > Website)

My First Website - Create New Website

Provide the location and name for your website.
From the Language drop down you can select the language of your choice (I will be using C# throughout all my articles).
Pressing OK, will create a website project for you and by default it already has a Default.aspx page added to it.

Switch to Split View of the Default Page and drag and drop a Label, TextBox and Button Control on the interface such that it looks something like this.

My First Website - Sample Default Page

lets look at the declaration of these controls.

all of the ASP.NET Controls have the following characteristics

Tag Element starting with asp: ( with the exception of HTML Controls )
Each tag (ASP.NET Control tag) has an attribute runat=”server” which indicates to the framework that this control needs to be rendered at the server side. (HTML Controls can have this attribute only if you need to access it in the server side code)
ID attribute in the declaration of the ASP.NET Control identifies it, once defined, these controls can be accessed on the server side with these IDs.(I have already given controls appropriate IDs)

Now lets add a click event to the button we have on the page, to do that select the button and the look for Properties Panel on the right bottom of the VS Interface ( if you cannot see the properties panel, Press F4). everything you see in this panel are the properties of the control you have selected and you can modify them here. For now we are interested in adding a Click Event, Select Events Tab in the properties panel.

My First Website - Properties Panel - Button Events

you can see there are number of Button events available, but by default no events is placed. To add an event, lets say Click Event, we need to double click the space in front of the Click Label, this will add a Button Click Event handler in the Code File of the Default.aspx. This is how your code-behind file for this page would look like with a Button Click Event Handler.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {

    }
}

btnmyButton_Click Event will occur everytime when btnmyButton is clicked. now lets Append “Hello” to the Label (lblmyLabel) Text everytime this button is clicked.

    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }

Run (F5) the website and click on the Button more than one time and see what happens. (Note: for the very first time a Message Box will appear once you Run (F5) your website asking whether to enable debugging or not, Press Yes/Ok)

My First Website - Button Click Event Handler Demonstration

now this is how we can perform different kind of operations, for example manipulating certain information from a form to the database. similarly we have TextChanged Event available for the TextBox control, lets say we require that, whatever is written in the textbox is appended to the label whenever textbox loses focus, All we need to do is select mytxtTextBox control we dropped earlier on the page and add its TextChanged Event Handler like the way we added Button’s Click Event.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }
    protected void txtmyTextBox_TextChanged(object sender, EventArgs e)
    {
        lblmyLabel.Text += txtmyTextBox.Text;
    }
}

just the way on the click of the button there was a post back to the server so that text could be appended to the label, TextBoxes by default are set not to post back on any event, we have to explicitly enable post back by enabling AutoPostBack property of the txtmyTextBox.

My First Website - Properties Panel - AutoPostBack Property

this will make the TextBox postback to the server on TextChanged Event.

Now Run(F5) the website again
Enter some text in the textbox and click out side the textbox, this will make the textbox lose focus and subsequently will post back to the server and call the TextChanged Event Handler and our text will appended in the label above.

My First Website - TextBox's TextChanged Event Handler Demonstration

this brings us to the end of Part 03. In this part we learned How ASP.NET Controls and Event Handlers are used in ASP.NET Websites, in the upcoming parts we shall look into Controls in each Category in detail, discovering various properties and events associated with them.

Thanks for Visiting, don’t forget to let us know how did this article helped you.
Download Source Code for Part 03
Cheers!

Proceed to:

ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III

Previous Parts: