0% found this document useful (0 votes)
24 views18 pages

Ctrls

The document provides an overview of various ASP.NET Web Forms controls, including Label, TextBox, Button, HyperLink, RadioButton, LinkButton, and FileUpload. Each control is described with its purpose, properties, and example code for implementation. It emphasizes the server-side nature of these controls and their usage in creating interactive web forms using Visual Studio.
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)
24 views18 pages

Ctrls

The document provides an overview of various ASP.NET Web Forms controls, including Label, TextBox, Button, HyperLink, RadioButton, LinkButton, and FileUpload. Each control is described with its purpose, properties, and example code for implementation. It emphasizes the server-side nature of these controls and their usage in creating interactive web forms using Visual Studio.
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
You are on page 1/ 18

ASP.

NET Web Forms Label


This control is used to display textual information on the web forms. It is mainly used
to create caption for the other controls like: textbox.

To create label either we can write code or use the drag and drop facility of visual
studio 2017.

This is server side control, asp provides own tag to create label. The example is given
below.

< asp:LabelID="Label1" runat="server" Text="Label" ></asp:Label>

This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the label.

TabIndex The tab order of the control.

BackColor It is used to set background color of the label.

BorderColor It is used to set border color of the label.

BorderWidth It is used to set width of border of the label.

Font It is used to set font for the label text.

ForeColor It is used to set color of the label text.

Text It is used to set text to be shown for the label.

ToolTip It displays the text when mouse is over the label.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

Example
// WebControls.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehin
d="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
margin-left: 0px;
}
.auto-style3 {
width: 121px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h4>Provide the Following Details:</h4>
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="Label1" runat="server" Text="User Name"></
asp:Label></td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="auto-
style2"></asp:TextBox></td>
</tr>
<tr>
<td class="auto-style3">
<asp:Label ID="Label2" runat="server" Text="Upload a File"></
asp:Label></td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>

ASP.NET Web Forms TextBox


This is an input control which is used to take user input. To create TextBox either we
can write code or use the drag and drop facility of visual studio IDE.

This is server side control, asp provides own tag to create it. The example is given
below.

< asp:TextBoxID="TextBox1" runat="server" ></asp:TextBox>

Server renders it as the HTML control and produces the following code to the browser.

<input name="TextBox1" id="TextBox1" type="text">

This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.


ToolTip It displays the text when mouse is over the control.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

MaxLength It is used to set maximum number of characters that can be entered.

Readonly It is used to make control readonly.

Example
// WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehin


d="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="labelId" runat="server">User Name</asp:Label>
<asp:TextBox ID="UserName" runat="server" ToolTip="Enter User Name"></
asp:TextBox>
</div>
<p>
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="Sub
mitButton_Click" />
</p>
<br />
</form>
<asp:Label ID="userInput" runat="server"></asp:Label>
</body>
</html>

Code Behind
// WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormsControlls
{
public partial class WebControls : System.Web.UI.Page
{
protected void SubmitButton_Click(object sender, EventArgs e)
{
userInput.Text = UserName.Text;
}
}
}

ASP.NET Web Forms Button


This control is used to perform events. It is also used to submit client request to the
server. To create Button either we can write code or use the drag and drop facility of
visual studio IDE.

This is a server side control and asp provides own tag to create it. The example is
given below.

< asp:ButtonID="Button1" runat="server" Text="Submit" BorderStyle="Solid" ToolTi


p="Submit"/>

Server renders it as the HTML control and produces the following code to the browser.

<input name="Button1" value="Submit" id="Button1" title="Submit" style="border-


style:Solid;" type="submit">

This control has its own properties that are tabled below.

Property Description
AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

Example
// WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehin


d="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Click here" OnClick="Butt
on1_Click" />
</div>
</form>
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</body>
</html>

Code Behind
// WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormsControlls
{
public partial class WebControls : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You Clicked the Button.";
}
}
}

Output:

It produces the following output.


This button displays a message when clicked, as shown below.

ASP.NET Web Forms HyperLink


It is a control that is used to create a hyperlink. It responds to a click event. We can
use it to refer any web page on the server.

To create HyperLink either we can write code or use the drag and drop facility of
visual studio IDE. This control is listed in the toolbox.

This is a server side control and ASP.NET provides own tag to create it. The example
is given below.

< asp:HyperLinkID="HyperLink1" runat="server" Text="JavaTpoint" NavigateUrl="w


ww.javatpoint.com" ></asp:HyperLink>

Server renders it as the HTML control and produces the following code to the browser.

<a id="HyperLink1" href="www.javatpoint.com">JavaTpoint</a>

This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

Visible To set visibility of control on the form.

Height It is used to set height of the control.


Width It is used to set width of the control.

NavigateUrl It is used to set navigate URL.

Target Target frame for the navigate url.

Example
// user-form.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user-


form.aspx.cs"
Inherits="asp.netexample.user_form" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HyperLink ID="HyperLink1" runat="server" Text="JavaTpoint" Navigat
eUrl="www.javatpoint.com"></asp:HyperLink>
</div>
</form>
</body>
</html>

ASP.NET Web Forms RadioButton


It is an input control which is used to takes input from the user. It allows user to
select a choice from the group of choices.

To create RadioButton we can drag it from the toolbox of visual studio.

This is a server side control and ASP.NET provides own tag to create it. The example
is given below.

< asp:RadioButtonID="RadioButton1" runat="server" Text="Male" GroupName="gen


der"/>

Server renders it as the HTML control and produces the following code to the browser.
<input id="RadioButton1" type="radio" name="gender" value="RadioButton1" /
><labelforlabelfor="RadioButton1">Male</label>

This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

GroupName It is used to set name of the radio button group.

Example
In this example, we are creating two radio buttons and putting in a group named
gender.

// WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehin


d="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="RadioButton1" runat="server" Text="Male" GroupN
ame="gender" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="Female" Group
Name="gender" />
</div>
<p>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1
_Click" style="width: 61px" />
</p>
</form>
<asp:Label runat="server" id="genderId"></asp:Label>
</body>
</html>

Code Behind
// WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormsControlls
{
public partial class WebControls : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
genderId.Text = "";
if (RadioButton1.Checked)
{
genderId.Text = "Your gender is "+RadioButton1.Text;
}
else genderId.Text = "Your gender is "+RadioButton2.Text;

}
}
}

ASP.NET LinkButton
It is a server web control that acts as a hyperlink. It is used to display a hyperlink-
style button control on the web page. ASP.NET provides a tag to create LinkButton
and has following syntax.

ASP.NET LinkButton Syntax


<asp:LinkButton
AccessKey="string"
ID="string"
OnClick="Click event handler"
OnClientClick="string"
OnCommand="Command event handler"
OnDataBinding="DataBinding event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnUnload="Unload event handler"
PostBackUrl="uri"
runat="server"
/>

ASP.NET LinkButton Example


// LinkButtonExample.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="LinkButtonExample.aspx.cs" Inherits="LinkButtonExample.LinkButtonE
xample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>It is a hyperlink style button</p>
</div>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Clic
k">javatpoint</asp:LinkButton>
<p>
<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</form>
</body>
</html>

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LinkButtonExample
{
public partial class LinkButtonExample : System.Web.UI.Page
{
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = "Welcome to the javatpoint";
}
}
}

ASP.NET Web Forms FileUpload


It is an input controller which is used to upload file to the server. It creates a browse
button on the form that pop up a window to select the file from the local machine.

To implementFileUpload we can drag it from the toolbox in visual studio.

This is a server side control and ASP.NET provides own tag to create it. The example
is given below.

< asp:FileUpload ID="FileUpload1" runat="server"/>

Server renders it as the HTML control and produces the following code to the browser.

<input name="FileUpload1" id="FileUpload1" type="file">

This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.


AllowMultiple It is used to allow upload multiple files by setting true or false.

Example
Here, we are implementing file upload control in web form.

// WebControls.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehin


d="WebControls.aspx.cs"
Inherits="WebFormsControlls.WebControls" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Browse to Upload File</p>
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<p>
<asp:Button ID="Button1" runat="server" Text="Upload File" OnClick="But
ton1_Click" />
</p>
</form>
<p>
<asp:Label runat="server" ID="FileUploadStatus"></asp:Label>
</p>
</body>
</html>

Code
// WebControls.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormsControlls
{
public partial class WebControls : System.Web.UI.Page
{
protected System.Web.UI.HtmlControls.HtmlInputFile File1;
protected System.Web.UI.HtmlControls.HtmlInputButton Submit1;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if ((FileUpload1.PostedFile != null) && (FileUpload1.PostedFile.ContentLength
> 0))
{
string fn = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName);

string SaveLocation = Server.MapPath("upload") + "\\" + fn;


try
{
FileUpload1.PostedFile.SaveAs(SaveLocation);
FileUploadStatus.Text = "The file has been uploaded.";
}
catch (Exception ex)
{
FileUploadStatus.Text = "Error: " + ex.Message;
}
}
else
{
FileUploadStatus.Text = "Please select a file to upload.";
}
}
}
}

ASP.NET Upload Multiple Files


ASP.NET FileUpload control provides AllowMultiple property to upload multiple files
to the server. This property takes either true or false value.
The <asp:FileUpload> tag is used to create a browse button that allows us to
upload file. Let?s create an example to upload multiple files.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace UploadMultipleExample
{
public partial class UploadMultipleFilesExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if ((FileUpload1.PostedFile != null) && (FileUpload1.PostedFile.ContentLength
> 0))
{
var count = 0;
foreach (HttpPostedFile uploadedFile in FileUpload1.PostedFiles)
{
string fn = System.IO.Path.GetFileName(uploadedFile.FileName);
string SaveLocation = Server.MapPath("upload") + "\\" + fn;
try
{
uploadedFile.SaveAs(SaveLocation);
count++;
}
catch (Exception ex)
{
FileUploadStatus.Text = "Error: " + ex.Message;
}
}
if (count > 0)
{
FileUploadStatus.Text = count + " files has been uploaded.";
}
}
else
{
FileUploadStatus.Text = "Please select a file to upload.";
}
}
}
}

You might also like