2022 ChapterThree

Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 25

1

GOLLIS UNIVERSITY

Faculty of ICT…

SEMESTERSEVEN Eng. Khadar ,

 GOLLIS UNIVERSITY,
GOLLIS UNIVERSITY,
CHAPTER THREE
CONTENTS

-Visual Studio Environment


-Webform
-Creating Website Using Vs
-Coding Techniques:
-Controls
-Asp. Net Server Controls
-
VISUAL STUDIO
 Is IDE provided by Microsoft to develop any type of .NET
application
 Example :

 Console Application

 GUI Application

 Website Application

 IDE stands [Integrated Development Environment] is collection

of windows to provide devekioer friendly environment, this


makes development easier and faster by reducing manual
coding
 Visual studio is provided following window
1. Solution explorer window:
This window will display website related folder and files

2. Toolbox window:
 This window will display Controls

3. Properties window:
 This window will display required control
properties
Web Form:
Webform is a template provided by visual studio to create ASP.NET webpages
Webform template will provide 3 views
1. Design View
this view allows developer to arrange controls
2. Source View
this view allows developer to place markup
content(tags) into the webpage this will display
markup content automatically generated by visual studio
3. Code View(cs file)
this view allows developer to place logic part
code into the webpage this will be provided
only for code file techniques
Creating Website Using VS

1. In the start window, choose Create a new project.


Creating an Empty Web Application

 In the Create a new project window, choose C# from the Language list. Next,


choose Windows from the Platform list, and Web from the project types list.
 After you apply the language, platform, and project type filters, choose
the ASP.NET Core Web App template, and then choose Next.
3. In the Configure your new project window, type or
enter HelloWorld in the Project name box. Then, choose Next.
Coding Techniques:
9

 Inline Coding
 Code behind

WebForm or Web Page:


 Designer code
 Business Logic [execution behind the screen]

.aspx page
{
designer Code
Business Logic
}
CodeBihind.aspx
{
-design Code
}
CodeBehind.aspx.cs
{
-business logic
}

GOLLIS UNIVERSITY,
Creating ASP.NET Webpage Into Website

 Go to view menu and choose solution explorer


 Right Click on website name (demosite) and select add new item
 Select Webform
 Name Default.aspx
 Uncheck place code in separate file checkbox
 Click on add button it will display asp.net page using page technique

Arranging Controls Default.aspx

 Go to design view of default.aspx Label1

 Go to view menu and select toolbox


 Expand standard category and select
label control

Design Split Source


 Select label present on default.aspx Press F4(it will
display Properties window)
 Change the label into the following

 Id –lbldemo
 Backgound----
 Font,Size – X-Large
 Placing logic part code into webpage – double click
on default.aspx webform window
Controls
12

 Properties
 Is an attribute of a control which mainly has it’s impact on the look of
the control.
 BackColor, ForeColor, BorderColor,Font
 Methods
 A Method is an action that has to be performed.
 Focus()
 Events
 An event is time period which tells when an action has to be performed.
 Click, TextChanged, CheckedChanged

GOLLIS UNIVERSITY,
Web Forms Controls In ASP.NET(I)
13

 Asp.net is Fully Based on Controls.Before Making any


application ,I will learn First  about the Asp.Net Controls.If
you will understand the Use of Controls then you can easily
make any Application without any problem in Asp.Net.There
are some Types of controls which are used in Asp.Net.
Web Forms Standard controls.
 Navigation Controls
 Validation Controls
 Web Parts controls
 Html Controls

GOLLIS UNIVERSITY,
14

we will understand one by one each Controls with Real


Application.Now I am going to Know  What is Web Forms
Controls In Asp.Net?.
Note:- Whenever you will use Web Forms Controls  in your
Application then First write one Namespace Which is Given
below:
using System.Web.UI.WebControls;
Because All Web Forms Controls comes Under this Namespace.
Web Forms Controls:-
There are some Web Forms Controls which is given below with
Real Time Example:-
GOLLIS UNIVERSITY,
15

 Label Control
 TextBox control
 Button control
 Literal control
 PlaceHolder control
 HiddenField control
 FileUpload control
 Image control
 ImageButton control
 ImageMap control
GOLLIS UNIVERSITY,
 1.) Label Control:-
16

 The Label Control is basically used to display the Information(Text)


on Web Forms.Any end User can not Edit(change) the Label
Information.
Properties of Label Control:-
There are some important properties of Label controls.
 Text:-It is used to change the Label control information(text).
 Font:- It is used to sets the font of the Label text.
 ForeColor:- It is used to sets the text color in the Label.
 Height:- It is used to Specify the height of the Label Control.
 BackColor :-It is used to Sets the Background color of the Label control.
 BorderWidth:-It is used to Sets the Border color of the Label control.
 BorderStyle:-It is used to Sets the Style of the Label control.
 AccessKey:-It is used to Navigate the Web Server control.

GOLLIS UNIVERSITY,
17

 Step :1 First Open Your Visual Studio-->File--


>New-->Web Site-->Select ASP.NET Empty Web
Site-->OK-->Open Solution Explorer-->Right
Click on Web Site-->Add New Item -->Select Web
Form--> click Add-->Now drag and drop Label and
Button control  from Toolbox on  the Web Form as
Given below:

GOLLIS UNIVERSITY,
Step :2 Now Double Click on Click Button and Write the
following codes which is shown below:
18

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class labelcontrol : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Label2.Text = "You can easily display any information inside it";
}
}

GOLLIS UNIVERSITY,
Step :3 Now Run The Program(Press F5) and Press the Click
Button.
19

GOLLIS UNIVERSITY,
2.) TextBox Control:-
20

The TextBox control is used to input the Data(text).Any end user can easily enter the text in this
control.
Properties of TextBox Control:-
There are some important properties of TextBox controls.
Text:-It is used to sets the text in TextBox Control.
 TextMode:- It is used to sets the mode of the TextBox Control as Single Mode,Multiline or

Password.
 Rows:-It is used to sets the number of rows display in a TextBox(Multiline).

 MaxLength:->It is used to sets the maximum number of character alloweded in a TextBox control.

 ReadOnly:-It is used to read the contents by the end used but can not change it.

 Columns:-It is used to sets the width of character in TextBox.

 AutoCompleteType:-It is used to sets a value that indicates the Auto Complete behavior of the

TextBox control.
 AutoPostBack:-It is used to handle the event when the TextBox control lose focus.

 CauseValidation:-It is used to set a value that validate the TextBox control(client,server).

 TextChange:-It is an event.It occurs when the end user change the text of the TextBox control.

GOLLIS UNIVERSITY,
 3.) Button Control:-> The Button control is used to
create an Event and send request to the web server.
21

Properties of Button Control:-


There are some important properties of Button controls.
Text:- It is used to sets the text to be displayed on the Button Control.
 Click:-It is an Event that occurs when the Button is clicked.

 Command:- It is  also an Event that occurs when the Button is

clicked.It is used whenever we are using multiple Button on one page.


 CommandName:-It is used to sets the command Name associated

with the Button control that is passed to the command event.


 OnClientClick:-It is used to sets the client side script that executes

when a Button click event is fired.


 CauseValidation:- It is used to sets the validation that is perform or

not when we click the Button control.

GOLLIS UNIVERSITY,
There are some steps to implement the TextBox and Button controls on  the Web Form which is
given below:
Step :1 First Open Your Visual Studio-->File-->New-->Web Site-->Select ASP.NET Empty Web Site-->OK--
>Open Solution Explorer-->Right Click on Web Site-->Add New Item -->Select Web Form--> click Add--
>Now drag and drop TextBox,Label and Button control  from Toolbox on the Web Form as Given below:
22

Step :2 Now Double Click on Button Control and Write the following  which is given below:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
String str = TextBox1.Text;
Label2.Text = str;
}
}

Step :3 Now Run The program(press F5) and click the Button.


4.) Literal Control:-
23

 t is similar to Label control but there are some differences


and similarities which is given below.
Literal and Label control both are used to display the
text(information) on the web form.
 On Browser side Label control is converted to HTML 'Span' tag
but Literal control is not converted in any HTML tag.
 We can provide formatting to the Label control but not to the
Literal control.
 If we want to show some HTML code and java script code the
we used mainly Literal control ,not Label control.Encoding
Mode is used with Literal control only.

GOLLIS UNIVERSITY,
Properties of Literal Control:-
24

 There are some important properties of Literal controls.


Mode:- IT IS A Literal control property called Mode  which can
be changed as Transform,Encode and Pass Through.
 Text:-It is used to sets the caption displayed in the Literal.
 There are some steps to implement the Literal and
Label controls on  the Web Form which is given below:
Step :1 First Open Your Visual Studio-->File-->New-->Web
Site-->Select ASP.NET Empty Web Site-->OK-->Open Solution
Explorer-->Right Click on Web Site-->Add New Item -->Select
Web Form--> click Add-->Now drag and drop Literal,Label and
Button control  from Toolbox on the Web Form as Given below:

GOLLIS UNIVERSITY,
25

 Step :2 Now Double click on Click button and write the


following codes which is given below:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Literal_and_label_controls_ : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Literal1.Text = "Hello Asp.net Website I am Literal Control";
Label2.Text = "Hello Asp.net Website I am Label Control";
}
} GOLLIS UNIVERSITY,

You might also like