Overview of ASP - NET Web Application

2017S2
ITP213
EADP
ITP213 @ 2017S1
Enterprise Application Development
LECTURE 01
OVERVIEW OF ASP.NET WEB DEVELOPMENT
ENTERPRISE APPLICATIONS DEVELOPMENT PROJECT COPYRIGHT © 2017 SIT 1
Learning Outcome
Develop simple web application using Microsoft ASP.NET technology
Use Visual Studio to create web form
Introduce web form
◦ Use various web server controls
◦ Set properties of web server control
Install Visual studio on student laptop
Copyright ©2016 SIT 1
2017S2 ITP213
EADP
Microsoft .NET
Microsoft .NET platform provides a wide range of application development
ranging from mobile to large‐scale enterprise application development.
The .NET platform provides developers with various technologies that meet
the requirements in developing enterprise application.
◦ User presentation to many different types of devices (web browser or mobile devices).
◦ Database access (transaction, optimistic locking etc).
◦ Testing and performance tuning.
◦ Web service integration across different OS, different programming language
.NET Framework
The .NET Framework is a platform created by Microsoft for developing
applications.
• It supports Multiple Language
• It has IDE (Integrated Development Environment).
• Framework is a set of utilities or can say building blocks of your application system.
• The utilities support:
Windows Forms, Web Form, MVC and Web API
Bootstrap, a layout and theming framework that provides responsive design and theming
capabilities
ADO.NET to build components that efficiently manage data from multiple data sources.
ASP.NET Identity manages website user profile and also supports log‐ins to authentication
providers such as Facebook, Twitter, and others
Latest Framework is ASP.NET 4.7
4
ENTERPRISE APPLICATIONS DEVELOPMENT PROJECT COPYRIGHT © 2017 SIT
2017S2 ITP213
EADP
.NET Framework 4.5 Architecture
Visual Studio 2013
Introducing Visual Studio (VS)
VS is a Visual Development tool which provides a rich environment
with the following features:
◦ Page Design : Create Web Pages with drag and drop facilities
◦ Debugging Tools : Provides rich debugging facilities
◦ IntelliSense : Provides automatic statement completion and automatically lists
information such as function parameters
2017S2 ITP213
EADP
Visual Studio Environment Reset
Reopen Menu and Tool Bar window
view layout
ToolBox
Window
Solution
Explorer
X: close window. Window
You can display the
needed window
from the view menu IDE Main Window
option. • Form Designer
Pin icon: Toggle pin
icon to unhide or • Code Editor
hide the window. Properties
Hide allow you to Window
have larger window
to ease coding.
Down arrow give
option to change
window layout. You
can reset to default
layout from
Window menu Toggle between
Design view and source view
Solution Explorer
A solution can consists of one or more projects
Each project can have one or more files
◦ Web Page
◦ Config file
◦ Class file Solution
◦ CSS
◦ Javascript
Project
◦ etc
Web Form
Config file
2017S2 ITP213
EADP
C# Application files types
File Type Extension Description
Web Page .aspx Hold the definition of the web form and its controls
Web Page .aspc.cs Holds definition code methods that you write for a form
backend
HTML page .html To display static HTML in website
Web .config Provide global configuration information used throughout the project
Configuration
Master Page .master To define global look and feel of web site
Images .img Image files
Java script .js Contains client side script code which browser requests as needed
Solution .sln The solution maintains the state information for projects in .sln.
Web Form
An ASP.NET page can compose of
◦ Static HTML tag and
◦ Web Controls
Both control can be added via
◦ Source view
◦ Type the HTML and Web Control Syntax
◦ Design view
◦ Drag and drop the desired HTML elements and Web control from Toolbox
◦ This view presents a What You See Is What You Get (WYSIWYG) interface.
◦ Split view
◦ Show both the Source and Design View
2017S2 ITP213
EADP
Toolbox
Allow you to drag and drop the controls to the
web page
There are ten tabs in the Toolbox
By default, the standard tab will be expanded
tabs
Standard tab refers to .NET web control
HTML tab to create static information
If the Toolbox is accidentally close, reopen it
from View Menu
ASP.NET Server Control
Almost all Web forms contains Web server controls to build
dynamic interfaces
◦ Standard controls such as textbox, label, checkbox, button etc
◦ Data controls
◦ Validations controls such as required field
◦ Site navigation control to move around the site
◦ Login control to validate & manage users
◦ Ajax Extensions to refresh portion of page
2017S2 ITP213
EADP
ASP.NET Server Control
Web Server Controls are .NET classes used in Web Forms.
ASP.NET Web Form have a file extension of .aspx
The file contains a form element with attribute to specify that it is an ASP.NET
Web form:
<form runat=“server”>
All the server controls can be controlled programmatically with ASP.NET
Web Server controls when processed by ASP.NET will eventually generate
HTML output to the browser.
Web Server Controls, as the name implies, are processed at the server, not
client end,
Typical Source Code of ASP Web Form
Page directive provides information about Page.
Language attribute indicates programming language.
CodeBehind provides name of the file that contain
page’s source code.
Mixture of Web Server
HTML Control and HTML tag in a
web form
Web Server
Control
2017S2 ITP213
EADP
Anatomy of Web Forms
Web Server controls when processed by ASP.NET will eventually generate HTML output to the browser
The HTML Received By The Browser
When page is
Anatomy of Web Form
requested
ASP.NET engine execute ASP source
code and return html to browser. A
hidden field is added in the mark up
. It stores all the state information of
every control in the web page in a
compressed format
2017S2 ITP213
EADP
Web Server Control and HTML
Web server TextBox control is equivalent to <input type=“text”> HTML
element
Web server Button control is equivalent to the HTML button element
Web server controls all include runat=“server” attribute
Web server controls can be programmatically accessed and manipulated on the
server with an ASP.NET program
HTML elements can only be accessed & manipulated on the client with
JavaScript
Web Server Control Properties…..
Each web server control have many properties.
Properties could be set during design view or changed
programmatically.
By pointing to a particular web server control in design
view, all the properties of the particular control is shown in
properties window
2017S2 ITP213
EADP
Web Server Control Properties…..
Web Server Application development is basically to get or set the web server control properties
programmatically.
Visual Studio editor provides IntelliSense to assist in coding efficiently.
Property icon
Method icon
Event Handler icon
Web Server Control and Properties…..
Each Control has a property of ID. Other common properties are
Control Properties Remark
TextBox Id A meaningful name to identify the control to ease the coding
Text Content to be shown in browser
TextMode Text box can be single line, multiline, range or password etc
Enabled Enabled set to false, make the text box not editable
Label Text Content to be shown in browser

Visible Visible set to false, the label become not visible
Button Id A name use to identify button control
Text Content of the buttonto be shown in browser eg Go
Enable Set to True to be clickable
2017S2 ITP213
EADP
Install Visual Studio 2015
Download the software from Microsoft Imagine Premium in NYP SIT portal
Install the software outside the campus
Watch the video
◦ Download and Install Visual Studio 2015
◦ https://www.youtube.com/watch?v=TlCnOxVJOKI
Summary
Familiar with VS Environment
Acquired skill to develop simple web page

Overview of ASP - NET Web Application

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Overview of ASP - NET Web Application

Uploaded by

Copyright:

Available Formats

2017S2

Label Text Content to be shown in browser

You might also like