[go: up one dir, main page]

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

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

Download as docx, pdf, or txt
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 26

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>Asp.Net</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>Asp.Net</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/demoButton.gif"
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/DP.jpeg">

RICH Controls
Rich Controls. In addition to the preceding controls, the ASP.NET 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
ASP.NET 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>
<%#DataBinder.Eval(Container,"DataItem.RollNo")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.Name")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.Fees")%>
</td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td>
<hr />
</td>
<td>
<hr />
</td>
<td>
<hr />
</td>
</tr>
</SeparatorTemplate>
<AlternatingItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container,"DataItem.RollNo")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.Name")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.Fees")%>
</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 mydatagridview.aspx 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();
sde.Fill(ds);
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}
}

Datalist Control

The ASP.NET 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(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
cmd.Connection = con;
SqlDataAdapter da=new SqlDataAdapter(com);

DataSet ds =new DataSet ();


da.Fill(ds); // fill dataset
DropDownList1.DataTextField = ds.Tables[0].Columns["FirstName"].ToString(); // text field name of
table dispalyed in dropdown
DropDownList1.DataValueField=ds.Tables[0].Columns["id"].ToString(); // to retrive
specific textfield name
DropDownList1.DataSource=ds.Tables[0]; //assigning datasource to the dropdownlist
DropDownList1.DataBind(); //binding dropdownlist

con.Close();
}
}

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);

adp.Fill(ds);
rblCountry.DataSource = ds;

rblCountry.DataTextField = "country";

rblCountry.DataValueField = "id";

rblCountry.DataBind();

CheckBox List

Same Graphically . Use following cide for Programming


binding
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select * from hobbies";
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
ListItem item = new ListItem();
item.Text = sdr["Hobby"].ToString();
item.Value = sdr["HobbyId"].ToString();
item.Selected = Convert.ToBoolean(sdr["IsSelected"]);
chkHobbies.Items.Add(item);
}
}
conn.Close();
}
}

SQL Connection
SqlConnection con;
SqlCommand cmd = new SqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
cmd.Connection = con;
cmd.CommandText = "select * from student";
con.Open();
RepeatInformation.DataSource = cmd.ExecuteReader();
RepeatInformation.DataBind();
con.Close();
}
}

You might also like