Tuesday 5 March 2013

ASP.NET Controls with example



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>

 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!"
}



Ad rotator:
<script  runat="server">
   Sub change_url(sender As Object, e As AdCreatedEventArgs) 
     e.NavigateUrl="http://aspdotnetsiva.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>
 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>
 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!";
}

Calendar:
<!DOCTYPE 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>
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>
 protected void  Page_Load (object sender, EventArgs e)
{
     if( check1.Checked)
     {
       work.Text=home.Text;
     else
       work.Text="";
     }
}

Output:
prement 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++)
{
     if( check1.Items(i).Selected)
     {
       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

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>

Image:
<!DOCTYPE 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>

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";
}
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;
}
elseIf (green.Checked )
{
   Label1.Text="You selected " & green.Text;
}
elseIf( blue.Checked)
{
   Label1.Text="You selected " & blue.Text;
}

}


Select your favorite color:
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>
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>
Protected void submit_click(object sender,eventArgs e)
{
Lbl1.text=txt1.text;
}
Enter your name:  

Validation controls

1.RequiredFieldValidation Control 
 2.RangeValidator Control 
 3.RegularExpressionValidator Control 
 4.CompareValidator Control 
 5.CustomValidator Control 
  
 Properties of Validation Controls:  
 ControlToValidate - Id of control Which you want to validate. 
 ErrorMessage - Message that will be displayed in the validation summary. 
 IsValid - Whether or not the control is valid. 
 Validate - Method to validate the input control and update the IsValid property. 
 Display - How the error message will display.options are given below 
 None:Message is never displayed. 
 Static:Validation message will display in the page layout. 
 Dynamic:Validation message is dynamically added to the page if validation fails. 
  
 Example with code: 
  
 1.RequiredFieldValidation:It is simple validation control which checks data is entered or not. 
 <asp:textbox id="txtEmpName" runat="server"/> 
 <asp:RequiredFieldValidator id="rfvtxtbox" runat="server" ControlToValidate="txtEmpName" 
 ErrorMessage="* Please enter the employee name" Display="dynamic">* 
 </asp:RequiredFieldValidator> 
  
 2.RangeValidator:It checks to see if a control value is within a valid range or not. 
 <asp:textbox id="txtDOB" runat="server"/> 
 <asp:RangeValidator id="rangeVal" runat="server" 
 ControlToValidate="txtDOB1" 
 MaximumValue="12/06/2009" 
 MinimumValue="01/01/1983" 
 Type="Date" 
 ErrorMessage="* Please enter the valid date" Display="static">*</asp:RangeValidator> 
  
 3.RegularExpressionValidator:It can be used for email validation or any specified string based on pattern matching. 
 E-mail: <asp:textbox id="txtEmail" runat="server"/> 
 <asp:RegularExpressionValidator id="revemail" runat="server" 
 ControlToValidate="txtEmail" 
 ValidationExpression=".*@.*\..*" 
 ErrorMessage="* Please enter valid e-mail ." 
 display="dynamic">* 
 </asp:RegularExpressionValidator> 
  
 4.CompareValidator: It allows you to make comparisons between two form controls and also compare values contained with 
 these controls to constants that specified by userd. 
  
 New Password: <asp:textbox id="txtNewPass" runat="server"/><br /> 
 Confirm Passowrd: <asp:textbox id="txtConfirmPass" runat="server"/><br /> 
 <asp:CompareValidator id="valCompare" runat="server" 
 ControlToValidate="txtNewPass" ControlToCompare="txtConfirmPass" 
 Operator="Equals" 
 ErrorMessage="* New Password and confirm password are not same" 
 Display="dynamic">* 
 </asp:CompareValidator> 
  
 5.CustomValidator:It allows you to write your own server-side or client-side validations logic and it can be easily applied to your web forms controls. 
 <asp:CustomValidator ID="cv" runat="server"  
 ControlToValidate="txtName" ClientValidationFunction="customvalidationr"  
 ErrorMessage="Please enter correct name"></asp:CustomValidator> 
 <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
 <asp:Button ID="btnSubmit" runat="server" /> 
  







}
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)