Author: Sharad Pyakurel

View Controls in ASP.NET

In ASP.NET Web Forms, we use view controls to create the user interface of the web pages. View
controls are server-side controls that encapsulate HTML and provide a programming model for
working with them.

Label Control
The Label Controls are used to display Text Informa on on Web Forms. User cannot Edit(change)
the Label text. Some of the proper es of Label control are enlisted below:

 Text: The Text property is used to set or get the text content displayed by the Label control.
A string value can be assigned to the Text property to set the text.
 ID: This property specifies a unique iden fier for the control. It is used to reference the
control in code-behind files and can be useful when working with server-side events or
accessing the control's proper es programma cally.
 ForeColor: The ForeColor property is used to set the color of the text displayed by the
Label control. It accepts values such as color names, RGB values, or hexadecimal color
codes.
 BackColor: The BackColor property is used to set the background color of the Label
control. It accepts values in the same format as the ForeColor property.
 Font: The Font property allows to set the font proper es of the text displayed by the Label
control. It includes proper es such as FontName, FontSize, FontStyle, etc.
 CssClass: The CssClass property is used to apply CSS styles to the Label control. By
assigning a CSS class to this property, you can control the appearance of the Label control
using CSS rules.
 Visible: The Visible property determines whether the Label control is visible or hidden on
the web page. By default, it is set to true, but you can set it to false to hide the Label
control.
 Enabled: The Enabled property determines whether the Label control is enabled or
disabled. If it is set to false, the Label control will appear grayed out and cannot be
interacted with.
 Height: It is used to Specify the height of the Label Control.
 Width: It is used to Specify the width of the Label Control.
 BorderWidth: It is used to Sets the Border color of the Label control.
 Author: Sharad Pyakurel

 BorderStyle: It is used to Sets the Style of the Label control.

TextBox Control
The TextBox control is used to input the Data(text). Some of the proper es of TextBox control are
enlisted below:

 Text: The Text property is used to set or get the text content displayed by the TextBox
control. A string value can be assigned to the Text property to set the text.
 TextMode: It is used to set the mode of the TextBox Control as Single Mode, Mul line or
Password.
 Rows: It is used to set the number of rows to display in a TextBox if the mode of the
TextBox is Mul line.
 Columns: It is used to set the width of character in TextBox.
 ID: This property specifies a unique iden fier for the control. It is used to reference the
control in code-behind files and can be useful when working with server-side events or
accessing the control's proper es programma cally.
 ForeColor: The ForeColor property is used to set the color of the text displayed by the
TextBox control. It accepts values such as color names, RGB values, or hexadecimal color
codes.
 MaxLength: It is used to set the maximum number of characters allowed in a TextBox
control.
 AutoPostBack: It is used to handle the event when the TextBox control loses the focus.
 BackColor: The BackColor property is used to set the background color of the TextBox
control. It accepts values in the same format as the ForeColor property.
 Font: The Font property allows to set the font proper es of the text displayed by the
TextBox control. It includes proper es such as FontName, FontSize, FontStyle, etc.
 CssClass: The CssClass property is used to apply CSS styles to the TextBox control. By
assigning a CSS class to this property, you can control the appearance of the TextBox
control using CSS rules.
 Visible: The Visible property determines whether the TextBox control is visible or hidden
on the web page. By default, it is set to true, but you can set it to false to hide the TextBox
control.
 Author: Sharad Pyakurel

 Enabled: The Enabled property determines whether the TextBox control is enabled or
disabled. If it is set to false, the TextBox control will appear grayed out and cannot be
interacted with.
 Readonly: It is used to read the contents by the end used but cannot change it.
 Height: It is used to Specify the height of the Label Control.
 Width: It is used to Specify the width of the Label Control.

Bu on Control
The Bu on control is used to create an Event and send requests to the web server. Some of the
proper es of Bu on control are enlisted below:

 Text: The Text property is used to set or get the text content displayed by the Bu on
control. A string value can be assigned to the Text property to set the text.
 ID: This property specifies a unique iden fier for the control. It is used to reference the
control in code-behind files and can be useful when working with server-side events or
accessing the control's proper es programma cally.
 ForeColor: The ForeColor property is used to set the color of the text displayed by the
Bu on control. It accepts values such as color names, RGB values, or hexadecimal color
codes.
 BackColor: The BackColor property is used to set the background color of the Bu on
control. It accepts values in the same format as the ForeColor property.
 Font: The Font property allows to set the font proper es of the text displayed by the
Bu on control. It includes proper es such as FontName, FontSize, FontStyle, etc.
 CssClass: The CssClass property is used to apply CSS styles to the Bu on control. By
assigning a CSS class to this property, you can control the appearance of the Bu on
control using CSS rules.
 Visible: The Visible property determines whether the Bu on control is visible or hidden
on the web page. By default, it is set to true, but you can set it to false to hide the Bu on
control.
 Enabled: The Enabled property determines whether the Bu on control is enabled or
disabled. If it is set to false, the Bu on control will appear grayed out and cannot be
interacted with.
 Readonly: It is used to read the contents by the end used but cannot change it.
 Author: Sharad Pyakurel

 Height: It is used to Specify the height of the Label Control.

 Width: It is used to Specify the width of the Label Control.
 OnClientClick: It is used to set the client-side script that executes when a Bu on click
event is fired.
 CauseValida on: It is used to set the valida on that is performed or not when we click
the Bu on control.
 CommandName: This property specifies the command name associated with the bu on.
It is o en used in conjunc on with the Command event to differen ate between different
bu on ac ons.
 CommandArgument: This property provides addi onal data or informa on associated
with the bu on's command. It is commonly used to pass values or iden fiers when
handling bu on clicks.
 UseSubmitBehavior: This property determines whether the bu on submits the form
when clicked. If set to true, the bu on behaves like a submit bu on and triggers a post
back to the server. If set to false, the bu on does not submit the form and requires
addi onal client-side or server-side logic to handle its click event.
 Valida onGroup: This property associates the bu on with a specific valida on group on
the page. When the bu on is clicked, only the valida on controls within the same group
are validated.

Some of the events associated with the Bu on controls are as below:

Click: It is an Event that occurs when the Bu on is clicked.

Command: It is also an Event that occurs when the Bu on is clicked. It is used whenever we are
using mul ple Bu on on one page. The "command" property allows us to handle different
commands in a single event handler method.

<asp:Bu on ID="btnSave" runat="server" Text="Save" CommandName="Save"

CommandArgument="MyArguement" OnCommand="btnSave _Command" />

<asp:Bu on ID="btnEdit" runat="server" Text="Edit" CommandName="Edit"

CommandArgument="MyArguement" OnCommand="btnSave _Command" />
 Author: Sharad Pyakurel

protected void btnSave_Command(object sender, CommandEventArgs e)

{
if (e.CommandName == "Save")
{
string argument = e.CommandArgument.ToString();
// Your code logic here based on the command name and argument
} else if(e.CommandName == "Edit)
{
string argument = e.CommandArgument.ToString();
// Your code logic here based on the command name and argument
}
}

- We can access the command name and command argument using the
CommandEventArgs parameter (e) inside the btnSave_Command method. We can then
check the command name using e.CommandName and retrieve the command argument
using e.CommandArgument.
- We can have mul ple bu ons on a WebForm, each with different CommandName and
CommandArgument values. By checking the CommandName in the event handler
method, we can perform different ac ons based on the specific bu on that was clicked.

Literal Control:
Literal control allows us to display sta c text or HTML markup on a web page. Literal controls are
server-side controls, meaning they can be accessed and modified from server-side code. Literal
control is like Label control. We can show some HTML code and java script code using Literal
control.

Mode: It is a property of Literal control. The available modes are PassThrough, Encode, and
Transform. The default mode is PassThrough, which means the text is rendered as-is. Encode
mode HTML-encodes the text, and Transform mode applies any registered transforma ons to the
text.

Text: It is used to set the cap on displayed in Literal control. To access and modify the literal
control from server-side code, you can use the FindControl method to locate the control by its ID
and then manipulate its proper es.
 Author: Sharad Pyakurel

<asp:Literal ID="ctrlLiteral" runat="server" Text="Literal Control />

protected void Page_Load(object sender, EventArgs e)

{
Literal myLiteralCtrl = (Literal)FindControl("ctrlLiteral ");
myLiteralCtrl.Text = "This is new text";
}
- The FindControl method is used to locate the literal control with the ID "ctrlLiteral". Once
the control is found, its Text property is updated to "This is new text".

PlaceHolder Control:
PlaceHolder is known as container control in Asp.Net. It is mainly used to store the value of other
controls. You can use Controls.Add() method to Add controls to a PlaceHolder. The Placeholder
control is used to define a container or a placeholder for other controls. It is a non-visual control
that allows us to dynamically add or remove controls at run me. Placeholder control is primarily
used for crea ng dynamic user interfaces or for condi onally rendering controls based on certain
condi ons.

<asp:PlaceHolder ID="myPlaceholder" runat="server"></asp:PlaceHolder>

- The ID a ribute is set to "myPlaceholder" to give the control a unique iden fier.
- We can add controls dynamically to the Placeholder control at run me using server-side
code as follows.

protected void Page_Load(object sender, EventArgs e)

{
Bu on btnEnquery = new Bu on();
btnEnquery.ID = "btnDynamic";
btnEnquery.Text = "Click Here
btnEnquery.Click += btnEnquery_Click;

myPlaceholder.Controls.Add(btnEnquery);
}

protected void btnEnquery_Click(object sender, EventArgs e)

{
// Handle bu on click event here
Response.Write(“Dynamically Created Bu on Has Been Clicked.);
}
- In the above example, a new object of the Bu on control has been created, and its
proper es such as ID and Text have been set. The Click event handler has been assigned
 Author: Sharad Pyakurel

to the btnEnquery_Click method. Finally, the bu on control is added to the Placeholder

control using the Controls.Add method.
- When the page is loaded, the bu on will be rendered within the Placeholder control at
run me. When the bu on is clicked, the btnEnquery_Click event handler will be
executed.

DropDownList Control
The DropDownList control is a web server element that creates the drop-down menu and allows
users select a single item from various op ons. It can contain any number of items.

<asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True|False" >

<asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Item 3" Value="3"></asp:ListItem>
</asp:DropDownList>

<asp:DropDownList id="ddlItems" runat="server"

DataSource="<% sourcetobinddata %>"
DataTextField="DataSource_Display_Field"
DataValueField="DataSource_Value_Field"
AutoPostBack="True|False"
OnSelectedIndexChanged="OnSelectedIndexChangedMethod">
<asp:ListItem value="value" selected="True|False">
Text
</asp:ListItem>
</asp:DropDownList>

- The items of Dropdown List can be populated dynamically from code behind. We can bind
a data source to the control and set its DataTextField and DataValueField proper es to
specify the display text and values for the items.

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
LoadProducts();
}
}

private void LoadProducts()

{
DataTable prods=GetProducts();
 Author: Sharad Pyakurel

ddlProducts.DataSource = prods; // Replace with your data source

ddlProducts.DataTextField = "ItemName"; // Replace with the field name for display text
ddlProducts.DataValueField = "ItemId"; // Replace with the field name for values
ddlProducts.DataBind();
}

private DataTable GetProducts()

{
DataTable dt = new DataTable();
dt.Columns.Add("ItemId", typeof(int));
dt.Columns.Add("ItemName",typeof(string));
dt.Rows.Add(1, "Computers");
dt.Rows.Add(2, "Laptops");
dt.Rows.Add(3, "Printers");
return dt;
}

//The Items in DropDownList can be loaded as following also//

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Add dynamic items to the DropDownList
ddlProducts.Items.Add(new ListItem("Propduct 4", "4"));
ddlProducts.Items.Add(new ListItem("Product 5", "5"));
}
}

- Events such as selec on changes can be handled by adding event handlers in the code-
behind file. For example, to handle the SelectedIndexChanged event.

<asp:DropDownList ID="ddlProducts" runat="server"

OnSelectedIndexChanged="ddlProducts_SelectedIndexChanged">
</asp:DropDownList>

protected void ddlProducts_SelectedIndexChanged(object sender, EventArgs e)

{
// Handle the selec on change event
string selectedValue = ddlProducts.SelectedValue;
Response.Write(selectedValue);
}

protected void btnSelectProduct_Click(object sender, EventArgs e)

{
ddlProducts.SelectedValue="2";
//This is select the product from dropdown list which matches value=2//
}
 Author: Sharad Pyakurel

CheckBox
The CheckBox control allows users to select or deselect an op on.

<asp:CheckBox ID="CheckBox1" runat="server" Text="Check Here" />

- We can add an event handler CheckBoxId_CheckedChanged to perform any ac on when

the checkbox is checked or unchecked. We can handle the CheckedChanged event by
adding the following code:

<asp:CheckBox ID="CheckBox1" runat="server" Text="Check me"

OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />

// The event handler method in code behind can be defined as below//

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)

{
if (CheckBox1.Checked)
{
// Checkbox is checked
}
else
{
// Checkbox is unchecked
}
}

- Here we have added the OnCheckedChanged a ribute to specify the event handler
method, CheckBox1_CheckedChanged. We also have set the AutoPostBack a ribute to
"true" to trigger a postback when the checkbox state changes.

RadioBu on
The RadioBu on control is used to present a list of op ons where the user can select a single
op on from the list. Only one RadioBu on within a group can be selected at a me.

<asp:RadioBu on ID="RadioBu on1" runat="server" Text="Item 1" GroupName="MyOp on" />

 Author: Sharad Pyakurel

- RadioBu on controls with the same GroupName a ribute will create a group of op ons.
The GroupName a ribute ensures that only one RadioBu on can be selected within the
group.

<asp:RadioBu on ID="RadioBu on1" runat="server" Text="Op on 1" GroupName="MyGroup" />

<asp:RadioBu on ID="RadioBu on2" runat="server" Text="Op on 2" GroupName="MyGroup"
Checked="True" />
<asp:RadioBu on ID="RadioBu on3" runat="server" Text="Op on 3" GroupName="MyGroup" />
- We can set the Checked a ribute to true for one of the RadioBu on controls to preselect
an op on.
- We can add an event handler in the code-behind file to handle the selec on change event
of the RadioBu on.

protected void Page_Load(object sender, EventArgs e)

{
RadioBu on1.CheckedChanged += RadioBu on_CheckedChanged;
RadioBu on2.CheckedChanged += RadioBu on_CheckedChanged;
RadioBu on3.CheckedChanged += RadioBu on_CheckedChanged;
}

protected void RadioBu on_CheckedChanged(object sender, EventArgs e)

{
// Perform ac ons based on the selected RadioBu on
if (RadioBu on1.Checked)
{
// Op on 1 selected
}
else if (RadioBu on2.Checked)
{
// Op on 2 selected
}
else if (RadioBu on3.Checked)
{
// Op on 3 selected
}
}

- The Page_Load event handler is used to subscribe to the CheckedChanged event of each
RadioBu on control. The RadioBu on_CheckedChanged event handler is called when the
selec on changes.