0% found this document useful (0 votes)
525 views26 pages

Overview of ASP.NET Controls

The document discusses various types of ASP.NET controls including standard controls like labels, textboxes, buttons; rich controls like calendars and file uploads; validation controls for validating user input; and data binding controls for binding controls to database data. Standard controls enable basic form elements. Rich controls provide additional functionality and include calendars and wizards. Validation controls validate user input against requirements. Data binding controls connect ASP.NET controls to database data.

Uploaded by

Ali Rajpoot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
525 views26 pages

Overview of ASP.NET Controls

The document discusses various types of ASP.NET controls including standard controls like labels, textboxes, buttons; rich controls like calendars and file uploads; validation controls for validating user input; and data binding controls for binding controls to database data. Standard controls enable basic form elements. Rich controls provide additional functionality and include calendars and wizards. Validation controls validate user input against requirements. Data binding controls connect ASP.NET controls to database data.

Uploaded by

Ali Rajpoot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
  • ASP.NET Controls Overview
  • Rich Controls
  • Validation Controls
  • DataBind Controls

Asp.

net Controls
1. Standard Controls
2. Rich Controls
3. Validation Controls
4. Databind Controls

STANDARD CONTROLS
STANDARD CONTROLS (Enable you to Render Standard form elements
Such as Buttons, input fields and labels.)
1- Label Control
2- TextBox Control
3- List Box Control
4- Button Control
5- Bulleted List Control
6- Check Box Control
7- Radio Button List Control
8- Drop Down List Control
9- CheckBox List Control
10- Image Button COntrol
11- Link Button COntrol
12- Hyper Link COntrol
13- Image Control
Label Control
Label is Used to dislay some label Texts
CODE
<asp:Label ID="myLabel" runat="server"> Your Text Here for Label
</asp:Label>
OR
<asp:Label ID="myLabel" runat="server" Text="Your Text Here for
Label"></asp:Label>
TextBox Controls
Is used To Display Text Inpput Field For user to Put some data in
CODE
(i)<asp:TextBox ID="myTB" runat="Server" PLaceholder="Enter Your
Data"></asp:TextBox>
(ii)<asp:TextBox ID="myTB" runat="Server" PLaceholder="Enter Your
Data" CssClass="ourCssClass"></asp:TextBox>
Listbox Control
is used to display the list of items
CODE
<asp:ListBox ID="myListBox" runat="server" Height="121px"
Width="98px">
<asp:ListItem Value="1">ABC</asp:ListItem>
<asp:ListItem Value="2">PQR</asp:ListItem>
<asp:ListItem Value="3">MNO</asp:ListItem>
<asp:ListItem Value="4">XYZ</asp:ListItem>
</asp:ListBox>
Button Control
Is Used to perform some actiion based on the click of the button.
CODE
<asp:Button Id="myButton" runat="server" Text="YOur Text For
Button" onclick="myButton_Click"></asp:Button>
Bulleted List COntrol
Is Used t display a Bulleted List of items. It is not only Used For
Displaying Bulletes BUt also lower aplhabets, numbers and roman
numbering using BulletStyle="" Property
CODE
<asp:BulletedList ID="BulletedList4" runat="Server"
BulletStyle="LowerAlpha">
<asp:ListItem Text="Item 1"></asp:ListItem>
<asp:ListItem Text="Item 2"></asp:ListItem>
<asp:ListItem Text="Item 3"></asp:ListItem>
</asp:BulletedList>
NOTE
BulletStyle="Numbered" For Nubers
BulletStyle="LowerAlpha" For Lowercase Alphabets
BulletStyle="Square" For Square Bullets And ETC ETC.
Check Box COntrol
Is used to create a number of checkboxes items
CODE
<asp:CheckBox ID= "chkoption" runat= "Server">Name OF Check
Box</asp:CheckBox>
Radio Button List
Is Used to Display A List of radio Butoons . Choose one at a time
CODE
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>ColdFusion</asp:ListItem>
<asp:ListItem>[Link]</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
</asp:RadioButtonList>
Dropdown List
Is Used to show a drop down field for selection of itms.)
CODE
<asp:DropDownList ID="DdlMonths" runat="server">
<asp:ListItem Text="May"></asp:ListItem>
<asp:ListItem Text="January" Value="1"></asp:ListItem>
<asp:ListItem Text="February" Value="2"></asp:ListItem>
<asp:ListItem Text="December" Value="12"></asp:ListItem>
</asp:DropDownList>
CheckBox List
Is used to display List Of Check Boxes.
CODE
<asp:CheckBoxList ID="chklstExp2" runat="server"
CssClass="allowSelectAll">
<asp:ListItem>ColdFusion</asp:ListItem>
<asp:ListItem>[Link]</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
</asp:CheckBoxList>
Image Button Control
The ImageButton control is used to display a clickable image.)
CODE
<asp:ImageButton ID="ImageButton1" runat="Server"
ImageUrl="~/images/[Link]"
OnClick="ActivateServerSideEvent" />
Link Button Control
The LinkButton control is used to create a hyperlink button.)
CODE
<asp:LinkButton Text="Click me!" OnClick="lblClick" runat="server" />
Hyper Link COntrol
The HyperLink control is used to create a hyperlink.)
CODE
<asp:HyperLink id="hyperlink1" NavigateUrl="#" Text=""
runat="server"/>
Image Control
The image control is used for displaying images on the web page, or
some alternative text, if the image is not available.)
CODE
<asp:Image ID="Image1" runat="server" ImageUrl="Images/[Link]">

RICH Controls
Rich Controls. In addition to the preceding controls, the [Link] page
framework provides a few, task-specific controls called rich controls.
Rich controls are built with multiple HTML elements and contain rich
functionality. Examples of rich controls are the Calendar control and
the AdRotator control.
1. Calendar Control
2. File Upload Control
3. MultiView COntrol
4. Wizard Controls
Calender Control
Is used to display a calender for date selection for varioyus purposes
such as date of birth or date of employment etc)
CODE
<asp:Calendar ID="Calendar1" runat="server
SelectionMode="DayWeekMonth"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
File Upload COntrol
Is used to upload a file on server or some folder of the directory)
CODE
<asp:FileUpload id="FileUploadControl" runat="server" />
<asp:Button runat="server" id="UploadButton" text="Upload"
onclick="UploadButton_Click" />
MultiView Control
MultiView and View controls allow you to divide the content of a page
into different groups, displaying only one group at a time. Each View
control manages one group of content and all the View controls are
held together in a MultiView control.)
CODE
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="2"
onactiveviewchanged="MultiView1_ActiveViewChanged" >
<asp:View ID="View1" runat="server">
<h3>This is view 1</h3>
<br />
<asp:Button CommandName="NextView"
ID="btnnext1" runat="server" Text = "Go To Next" />
<asp:Button CommandArgument="View3"
CommandName="SwitchViewByID" ID="btnlast" runat="server" Text
="Go To Last" />
</asp:View>
<asp:View ID="View2" runat="server">
<h3>This is view 2</h3>
<asp:Button CommandName="NextView"
ID="btnnext2" runat="server" Text = "Go To Next" />
<asp:Button CommandName="PrevView"
ID="btnprevious2" runat="server" Text = "Go To Previous View" />
</asp:View>

<asp:View ID="View3" runat="server">


<h3> This is view 3</h3>
<br />
<asp:Calendar ID="Calender1"
runat="server"></asp:Calendar>
<br />
<asp:Button CommandArgument="0"
CommandName="SwitchViewByIndex" ID="btnfirst" runat="server"
Text = "Go To Next" />
<asp:Button CommandName="PrevView"
ID="btnprevious" runat="server" Text = "Go To Previous View" />
</asp:View>

</asp:MultiView>
Wizard Controls
This control is same as MultiView control but the main difference is
that, it has inbuilt navigation buttons.)
CODE
<asp:Wizard ID="Wizard1" runat="server" Height="75px"
Width="140px">
<WizardSteps>
<asp:WizardStep runat="server" title="Step1"></asp:WizardStep>
<asp:WizardStep runat="server" title="Step
2"></asp:WizardStep>
</WizardSteps>
</asp:Wizard>

VALIATION CONTROLS
[Link] validation controls validate the user input data to ensure
that useless, unauthenticated, or contradictory data don't get stored.
1. RequiredFieldValidator
2. RangeValidator
3. CompareValidator
4. RegularExpressionValidator
5. CustomValidator
6. ValidationSummary
RequiredFieldValidator
The RequiredFieldValidator control ensures that the required field is
not empty. It is generally tied to a text box to force input into the text
box.
CODE
<asp:RequiredFieldValidator ID="rfvcandidate" runat="server"
ControlToValidate ="ddlcandidate" ErrorMessage="Please choose a
candidate" InitialValue="Please choose a
candidate"></asp:RequiredFieldValidator>
RngeValidator
The RangeValidator control verifies that the input value falls within a
predetermined range.)
CODE
<asp:RangeValidator ID="rvclass" runat="server"
ControlToValidate="txtclass" ErrorMessage="Enter your class (6 - 12)"
MaximumValue="12" MinimumValue="6"
Type="Integer"></asp:RangeValidator>
CompareValidator
The CompareValidator control compares a value in one control with a
fixed value or a value in another control.)
CODE
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="textBox1" ValueToComapre="A For Apple"
ErrorMessage="14 Year Old Nibbi Not
Found"></asp:CompareValidator>
Regualr Expression Validator
The RegularExpressionValidator allows validating the input text by
matching against a pattern of a regular expression. The regular
expression is set in the ValidationExpression property.)
CODE
<asp:RegularExpressionValidator ID="remail" runat="server"
ControlToValidate="txtemail" ErrorMessage="Enter your email"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-
.]\w+)*"></asp:RegularExpressionValidator>
CustomValidator
The CustomValidator control allows writing application specific custom
validation routines for both the client side and the server side
validation)
CODE
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction=.cvf_func.
ErrorMessage="CustomValidator"></asp:CustomValidator>
ValidationSummary
The ValidationSummary control does not perform any validation but
shows a summary of all errors in the page. The summary displays the
values of the ErrorMessage property of all validation controls that
failed validation.)
CODE
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
DisplayMode = "BulletList" ShowSummary = "true"
HeaderText="Errors:" />
Databind Controls & Data binding with c#
Code
Data Binding is binding controls to data from databases. With data
binding we can bind a control to a particular column in a table from the
database or we can bind the whole table to the data grid. There are 3
types of binding 1- Declerative Binding, 2- Static Binding 3-
Programatically Binding.
1. Repeater Control
2. DataGrid Control
3. DataList Control
4. GridView Control
5. DetailsView
6. FormView
7. DropDownList
8. ListBox
9. RadioButtonList
10. CheckBoxList
11. BulletList

Repeater Control
The Repeater control is used to display a repeated list of items that are
bound to the control. The Repeater control may be bound to a
database table, an XML file, or another list of items.
Repeater has 5 inline template to format it:

1. <HeaderTemplate>
2. <FooterTemplate>
3. <ItemTemplate>
4. <AlternatingItemTemplate>
5. <SeperatorTemplate>
6. <AlternatingItemTemplate>
HeaderTemplate: This template is used for elements that you want to
render once before your ItemTemplate section.

FooterTemplate: - This template is used for elements that you want to


render once after your ItemTemplate section.

ItemTemplate: This template is used for elements that are rendered


once per row of data. It is used to display records

AlternatingItemTemplate: This template is used for elements that are


rendered every second row of data. This allows you to alternate
background colors. It works on even number of records only.

SeperatorTemplate: It is used for elements to render between each


row, such as line breaks

CODE:
<form id="form1" runat="server">
<div>
<asp:Repeater ID="RepeatInformation" runat="server">
<HeaderTemplate>
<table class="tblcolor">
<tr>
<b>
<td>
Roll No
</td>
<td>
Student Name
</td>
<td>
Total Fees
</td>
</b>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="tblrowcolor">
<td>
<%#[Link](Container,"[Link]")%>
</td>
<td>
<%#[Link](Container,"[Link]")%>
</td>
<td>
<%#[Link](Container,"[Link]")%>
</td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td>
<hr />
</td>
<td>
<hr />
</td>
<td>
<hr />
</td>
</tr>
</SeparatorTemplate>
<AlternatingItemTemplate>
<tr>
<td>
<%#[Link](Container,"[Link]")%>
</td>
<td>
<%#[Link](Container,"[Link]")%>
</td>
<td>
<%#[Link](Container,"[Link]")%>
</td>
</tr>
</AlternatingItemTemplate>
<SeparatorTemplate>
<tr>
<td>
<hr />
</td>
<td>
<hr />
</td>
<td>
<hr />
</td>
</tr>
</SeparatorTemplate>
<FooterTemplate>
<tr>
<td>
School Records displayed
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>

DataGrid COntrol
DataGrid is used to display data in scrollable grid. It requires data
source to populate data in the grid.
CODE
<asp:DataGrid id=”myDtaGrid” runat=”server”></asp:DataGrid>
How to Bind DataGrid With Data Base
Add New Websform
Then add DataGrid

It will be Added
Connect it with data base with following code behind this file . Lets say
the file you named as [Link] then go to the souce of this
file and add following code in page load event
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection con = new SqlConnection("data source=.; database=student; integrated
security=SSPI"))
{
SqlDataAdapter sde = new SqlDataAdapter("Select * from student", con);
DataSet ds = new DataSet();
[Link](ds);
[Link] = ds;
[Link]();
}
}

Datalist Control

The [Link] DataList control is a light weight server side control that
works as a container for data items. It is used to display data into a list
format to the web pages.
It displays data from the data source. The data source can be either a
DataTable or a table from database.

CODE
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="0" border="1" style="width: 300px; height: 100px;
border: dashed 2px #04AFEF; background-color: #FFFFFF">
<tr>
<td>
<b>ID: </b><span class="city"><%# Eval("ID") %></span><br />
<b>Name: </b><span class="postal"><%# Eval("Name") %></span><br />
<b>Email: </b><span class="country"><%# Eval("Email")%></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>

How to Bind Data From Database to DataList


Add a datalist control on the page
Now choose data source

Then Choose Required DB and then the Table As shown In Below Pics
GridView Control
Procedure is same as dataview

Code:

<asp:GridView ID="gridService" runat="server">

</asp:GridView>

DropDownList

Follow Same Procedure as datalist for binding data graphically .

Code is same as the code shown in standard Controls.


To bind Data Throught Code . Write This Code In This File
SqlConnection con;
SqlCommand cmd = new SqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection([Link]["constr"].ConnectionString);
[Link] = con;
SqlDataAdapter da=new SqlDataAdapter(com);

DataSet ds =new DataSet ();


[Link](ds); // fill dataset
[Link] = [Link][0].Columns["FirstName"].ToString(); // text field name of
table dispalyed in dropdown
[Link]=[Link][0].Columns["id"].ToString(); // to retrive
specific textfield name
[Link]=[Link][0]; //assigning datasource to the dropdownlist
[Link](); //binding dropdownlist

[Link]();
}
}

List Box
Same Procedure For List box as Dropdown List
Radio Button List
Same procedure for graphically as list box. Bind BY coding use this code at back of the file.

SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial


Catalog=Demo;Integrated Security=True");

private void BindList()

DataSet ds = new DataSet();

string cmdstr = "select id,country from Country";

SqlDataAdapter adp = new SqlDataAdapter(cmdstr, conn);

[Link](ds);
[Link] = ds;

[Link] = "country";

[Link] = "id";

[Link]();

CheckBox List

Same Graphically . Use following cide for Programming


binding
using (SqlConnection conn = new SqlConnection())
{
[Link] = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
[Link] = "select * from hobbies";
[Link] = conn;
[Link]();
using (SqlDataReader sdr = [Link]())
{
while ([Link]())
{
ListItem item = new ListItem();
[Link] = sdr["Hobby"].ToString();
[Link] = sdr["HobbyId"].ToString();
[Link] = [Link](sdr["IsSelected"]);
[Link](item);
}
}
[Link]();
}
}

SQL Connection
SqlConnection con;
SqlCommand cmd = new SqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection([Link]["constr"].ConnectionString);
[Link] = con;
[Link] = "select * from student";
[Link]();
[Link] = [Link]();
[Link]();
[Link]();
}
}

Common questions

Powered by AI

The MultiView control in ASP.NET allows you to divide page content into different groups, displaying one at a time, where navigation between views is implemented manually by developers using buttons and command events. In contrast, the Wizard control provides similar functionality to MultiView but includes built-in navigation buttons, making it easier to navigate between different steps or views without the need for custom navigation logic .

The DataList control in ASP.NET offers greater flexibility in layout compared to controls such as GridView, as it does not enforce a tabular structure. Instead, it allows a more customizable and freeform layout suitable for complex and sophisticated designs. Developers can define their own HTML around the databound content, supporting a largely template-oriented approach, unlike GridView which strictly follows a grid format. This makes DataList ideal for implementing layouts where the data doesn't naturally fit a table form, such as in custom catalogs or detailed product listings .

Validation controls in ASP.NET are used to ensure user input is valid before processing, thus preventing entry of useless or problematic data. The RangeValidator, specifically, checks that input falls within a specific range. It is implemented by setting properties such as MaximumValue, MinimumValue, Type, and associating it with a control using the ControlToValidate property. For example, it can ensure a number is between 6 and 12 by setting MinimumValue='6' and MaximumValue='12' .

The ListBox control in ASP.NET differs from the DropDownList in that it can display multiple options at once and allows for the selection of multiple items if set to do so. In contrast, the DropDownList displays a single option when rendered and expands to show other options when interacted with, allowing only a single selection. Thus, ListBox is more suitable for displaying a large set of options where multiple selections might be needed, while DropDownList is better for single-choice selection scenarios .

Using a Rich Control like the Calendar is more advantageous than a standard TextBox when accuracy and ease of use in selecting dates are priorities. The Calendar simplifies date selection by allowing users to click on dates directly, reducing manual input errors common with TextBoxes. It is particularly beneficial in scenarios where date format consistency is crucial, such as booking applications or scheduling appointments .

The ValidationSummary control in ASP.NET is significant as it provides a centralized location to display a summary of all validation error messages from other validation controls on a page. It enhances user experience by neatly listing all errors, preventing them from having to check for individual error messages across controls. Configuration options include properties like ShowSummary, HeaderText for customizing the error message display, and DisplayMode, which determines the format (e.g., bullet list, list, or single paragraph) in which errors are shown .

The CustomValidator control in ASP.NET allows developers to write custom validation routines for both client-side and server-side. Client-side validation is provided using a JavaScript function specified in the ClientValidationFunction property, which executes in the browser to provide immediate feedback. Server-side validation, which acts as a fallback, is implemented in the server code, ensuring that validation is enforced even when client-side scripts are disabled .

To connect and bind the DataGrid Control to a database in ASP.NET, you start by establishing a SqlConnection with the database. Use a SqlDataAdapter to execute a query and fill a DataSet with the results. Set the DataGrid's DataSource property to the DataSet and call DataBind() to display the data. This process is typically done within the Page_Load event to ensure the data is displayed when the page loads .

In ASP.NET, there are three types of data binding: Declarative Binding, Static Binding, and Programmatic Binding. Declarative data binding is achieved using data-binding expressions in the control markup, without hard coding values in the code-behind files. For example, to bind a DropDownList control declaratively, you specify a DataSourceID in the markup and use '<asp:DropDownList>' control tags along with data-binding expressions to bind data from a data source .

The Repeater Control in ASP.NET is primarily used to display a repeated list of items that are bound to the control, such as a database table or other list. It manages the formatting of its displayed items through five types of inline templates: <HeaderTemplate>, <FooterTemplate>, <ItemTemplate>, <AlternatingItemTemplate>, and <SeparatorTemplate>. The <HeaderTemplate> is used for elements rendered once before the <ItemTemplate> section, while <FooterTemplate> is for elements after. The <ItemTemplate> formats elements per row of data, and <AlternatingItemTemplate> allows alternating background colors for even-numbered records. <SeparatorTemplate> is used for elements between each row, such as line breaks .

Asp.net Controls 
1. Standard Controls  
2. Rich Controls 
3. Validation Controls 
4. Databind Controls 
 
STANDARD CONTROLS
Label Control 
Label is Used to dislay some label Texts 
CODE 
<asp:Label ID="myLabel" runat="server"> Your Text Here for L
<asp:ListItem Value="3">MNO</asp:ListItem> 
<asp:ListItem Value="4">XYZ</asp:ListItem> 
</asp:ListBox> 
Button Control 
Is Us
Check Box COntrol  
Is used to create a number of checkboxes items 
CODE 
<asp:CheckBox ID= "chkoption" runat= "Server">Name
CheckBox List 
 Is used to display List Of Check Boxes. 
CODE 
<asp:CheckBoxList ID="chklstExp2" runat="server" 
CssClass="al
<asp:HyperLink id="hyperlink1" NavigateUrl="#" Text="" 
runat="server"/>  
Image Control 
The image control is used for displ
File Upload COntrol  
Is used to upload a file on server or some folder of the directory) 
CODE 
<asp:FileUpload id="FileUplo
<asp:View ID="View2" runat="server"> 
                    
<h3>This is view 2</h3> 
                    
<asp:
This control is same as MultiView control but the main difference is 
that, it has inbuilt navigation buttons.) 
CODE 
<asp:W
CODE 
<asp:RequiredFieldValidator ID="rfvcandidate" runat="server" 
ControlToValidate ="ddlcandidate" ErrorMessage="Please ch

You might also like