There
are three kinds of server controls:
- HTML Server Controls - Traditional HTML tags
- Web Server Controls - New ASP.NET tags
- Validation Server Controls - For input validation
ASP.NET - HTML Server Controls
HTML elements in ASP.NET files are, by default, treated as text.
To make these elements programmable, add a runat="server" attribute
to the HTML element. This attribute indicates that the element should be
treated as a server control. The id attribute is added to identify the server
control. The id reference can be used to manipulate the server control at run
time.
All HTML
server controls must be within a <form> tag with the
runat="server" attribute. The runat="server" attribute
indicates that the form should be processed on the server. It also indicates
that the enclosed controls can be accessed by server scripts.
Ex1.aspx:
<html>
<body>
<form runat="server">
<a href=”www.google.com “ id="link1" runat="server">google</a>
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<a href=”www.google.com “ id="link1" runat="server">google</a>
</form>
</body>
</html>
ASP.NET - Web Server Controls
Like HTML server controls, Web server controls are
also created on the server and they require a runat="server"
attribute to work. However, Web server controls do not necessarily map to any
existing HTML elements and they may represent more complex elements.
The syntax for creating a Web server control is:
<asp:control_name
id="some_id" runat="server" />
In the following example we declare a Button server
control in an .aspx file. Then we create an event handler for the Click event
which changes the text on the button:
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!"runat="server" OnClick="submit"/>
</form>
</body>
</html>
protected void btnsend_Click(object sender,
EventArgs e)
{
button1.Text="You clicked me!"
}
button1.Text="You clicked me!"
}
Ad rotator:
<script
runat="server">
Sub change_url(sender As Object, e As AdCreatedEventArgs)
e.NavigateUrl="http://http://dotnetnukes.blogspot.in/"
End Sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:AdRotator AdvertisementFile="Ad1.xml"
runat="server" OnAdCreated="change_url"
target="_blank" />
</form>
<p><a href="ad1.xml" target="_blank">View XML file</a></p>
</body>
</html>
Sub change_url(sender As Object, e As AdCreatedEventArgs)
e.NavigateUrl="http://http://dotnetnukes.blogspot.in/"
End Sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:AdRotator AdvertisementFile="Ad1.xml"
runat="server" OnAdCreated="change_url"
target="_blank" />
</form>
<p><a href="ad1.xml" target="_blank">View XML file</a></p>
</body>
</html>
Button:
Ex:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />
</form>
</body>
</html>
button1.Text="You clicked me!";
Ex:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />
</form>
</body>
</html>
protected void submit_Click(object sender, EventArgs e)
{
button1.Style("background-color")="#0000ff";
button1.Style("color")="#ffffff";
button1.Style("width")="200px";
button1.Style("cursor")="pointer";
button1.Style("font-family")="verdana";
button1.Style("font-weight")="bold";
button1.Style("font-size")="14pt";
button1.Text="You clicked me!";
}
button1.Style("background-color")="#0000ff";
button1.Style("color")="#ffffff";
button1.Style("width")="200px";
button1.Style("cursor")="pointer";
button1.Style("font-family")="verdana";
button1.Style("font-weight")="bold";
button1.Style("font-size")="14pt";
button1.Text="You clicked me!";
}
Calendar:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Calendar runat="server" id=”cal1” />
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:Calendar runat="server" id=”cal1” />
</form>
</body>
</html>
Ex2:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Calendar DayNameFormat="Full" runat="server">
<WeekendDayStyle BackColor="#fafad2" ForeColor="#ff0000" />
<DayHeaderStyle ForeColor="#0000ff" />
<TodayDayStyle BackColor="#00ff00" />
</asp:Calendar>
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:Calendar DayNameFormat="Full" runat="server">
<WeekendDayStyle BackColor="#fafad2" ForeColor="#ff0000" />
<DayHeaderStyle ForeColor="#0000ff" />
<TodayDayStyle BackColor="#00ff00" />
</asp:Calendar>
</form>
</body>
</html>
Checkbox:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<p>prement add:
<asp:TextBox id=" prement " runat="server" />
<br>
present add:
<asp:TextBox id=" present " runat="server" />
<asp:CheckBox id="check1"Text="Same add" TextAlign="Right"
AutoPostBack="True" OnCheckedChanged="Check"runat="server" />
</p>
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<p>prement add:
<asp:TextBox id=" prement " runat="server" />
<br>
present add:
<asp:TextBox id=" present " runat="server" />
<asp:CheckBox id="check1"Text="Same add" TextAlign="Right"
AutoPostBack="True" OnCheckedChanged="Check"runat="server" />
</p>
</form>
</body>
</html>
protected
void Page_Load
(object sender, EventArgs e)
{
if( check1.Checked)
if( check1.Checked)
{
work.Text=home.Text;
else
work.Text="";
}
work.Text=home.Text;
else
work.Text="";
}
}
Output:
prement add:
present add: Same add.
present add: Same add.
Checkboxlist:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:CheckBoxList id="check1" AutoPostBack="True"TextAlign="Right" OnSelectedIndexChanged="Check"runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:CheckBoxList>
<br>
<asp:label id="message" runat="server"/>
</form>
</body>
</html>
protected
void Page_Load
(object sender, EventArgs e)
{
mess.Text="<p>Selected
Item(s):</p>";
for(int i=0 ;i< check1.Items.Count;i++)
for(int i=0 ;i< check1.Items.Count;i++)
{
if( check1.Items(i).Selected)
if( check1.Items(i).Selected)
{
mess.Text+=check1.Items(i).Text + "<br>";
}
}
mess.Text+=check1.Items(i).Text + "<br>";
}
}
}
Output:
Item
1
|
Item
2
|
Item
3
|
Item
4
|
Item
5
|
Item
6
|
Selected
Items:
Item
1
Item 2
Item 3
Item 5
Item 6
Item 2
Item 3
Item 5
Item 6
Dropdownlist:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:DropDownList id="drop1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:DropDownList>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
protected void Page_Load (object
sender, EventArgs e)
{
mess.Text="You selected " + drop1.SelectedItem.Text;
}
Out
put:
You
selected Item 3
Hyper
link:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:HyperLink NavigateUrl=”http://www.google.com”Text="Visit google!"
Target="_blank"runat="server" />
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:HyperLink NavigateUrl=”http://www.google.com”Text="Visit google!"
Target="_blank"runat="server" />
</form>
</body>
</html>
Image:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Image runat="server"Alternate Text="W3Schools" ImageUrl="/folder/filename.jpg"/>
</form>
</body>
</html>
<html>
<body>
<form runat="server">
<asp:Image runat="server"Alternate Text="W3Schools" ImageUrl="/folder/filename.jpg"/>
</form>
</body>
</html>
Imagebutton:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<p>Click on the image:</p>
<asp:ImageButton runat="server" ImageUrl="smiley.gif" id=”imgbtn”
OnClick="getCoordinates"/>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
<script runat="server">
Sub getCoordinates(sender As Object, e As ImageClickEventArgs)
mess.Text="Coordinates: " & e.x & ", " & e.y
End Sub
</script>
Sub getCoordinates(sender As Object, e As ImageClickEventArgs)
mess.Text="Coordinates: " & e.x & ", " & e.y
End Sub
</script>
Label:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Write some text:
<asp:TextBox id="txt1" Width="200" runat="server" />
<asp:Button id="b1" Text="Copy to Label" OnClick="submit" runat="server" />
<p><asp:Label id="label1" runat="server" /></p>
</form>
</body>
</html>
Protected void
btnclick_Click(object sander,eventArgs e)
{
Label1.text=txt1.text;
}
}
Linkbutton:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:LinkButton Text="Click me!" OnClick="lblClick" runat="server" />
<p><asp:Label id="Label1" runat="server" /></p>
</form>
</body>
</html>
Protected void
btnclick_Click(object sander,eventArgs e)
{
Label1.Text="You clicked
the LinkButton control";
}
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Select your favorite color:
<br>
<asp:RadioButton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="green" Text="Green" GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="blue" Text="Blue" GroupName="colors" runat="server"/>
<br>
<asp:Button text="Submit" OnClick="submit" runat="server"/>
<p><asp:Label id="Label1" runat="server"/></p>
</form>
</body>
</html>
Radiobutton:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Select your favorite color:
<br>
<asp:RadioButton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="green" Text="Green" GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="blue" Text="Blue" GroupName="colors" runat="server"/>
<br>
<asp:Button text="Submit" OnClick="submit" runat="server"/>
<p><asp:Label id="Label1" runat="server"/></p>
</form>
</body>
</html>
Protected void submit_Click(object
sander,eventArgs e)
{
if (red.Checked)
{
Label1.Text="You selected " & red.Text;
Label1.Text="You selected " & red.Text;
}
elseIf (green.Checked )
elseIf (green.Checked )
{
Label1.Text="You selected " & green.Text;
Label1.Text="You selected " & green.Text;
}
elseIf(
blue.Checked)
{
Label1.Text="You selected " & blue.Text;
}
}
Label1.Text="You selected " & blue.Text;
}
}
Select
your favorite color:
Red
Green
Blue
Red
Green
Blue
You
selected Blue
Repeater:
<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Company</th>
<th>Price</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%> </td>
<td><%#Container.DataItem("artist")%> </td>
<td><%#Container.DataItem("company")%> </td>
<td><%#Container.DataItem("price")%> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</html>
</body>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Company</th>
<th>Price</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%> </td>
<td><%#Container.DataItem("artist")%> </td>
<td><%#Container.DataItem("company")%> </td>
<td><%#Container.DataItem("price")%> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</html>
</body>
Title
|
Artist
|
Company
|
Price
|
Empire
Burlesque
|
Bob
Dylan
|
Columbia
|
10.90
|
Hide
your heart
|
Bonnie
Tyler
|
CBS
Records
|
9.90
|
Greatest
Hits
|
Dolly
Parton
|
RCA
|
9.90
|
Still
got the blues
|
Gary
Moore
|
Virgin
records
|
10.20
|
Eros
|
Eros
Ramazzotti
|
BMG
|
9.90
|
text box:
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>
Protected void submit_click(object
sender,eventArgs e)
{
Lbl1.text=txt1.text;
}
Enter your name:
