East Africa University

Qardho Campus
Faculty of Information Science & Technology

Semester VIII

ASP.Net

Course Lecturer
Daud Noh Mohamed
COURSE CONTENTS

PART ONE:

CHAPTER ONE: INRODUCTION

CHAPTER TWO: GETTING STARTED

CHAPTER THREE: CREATING ASP.NET WEB PAGES

CHAPTER FOUR: PROGRAMING IN ASP.NET

CHAPTER FIVE: VALIDATION IN ASP.NET

CHAPTER SIX: CASCADING STYLE SHEETS

CHAPTER SEVEN: PRESENTING DYNAMIC DATA

CHAPTER EIGHT: DATA ENTRY SYSTEM

PART TWO:

CHAPTER NINE: SECURITY IN ASP.NET

CHAPTER TEN: ADDING REPORT

CHAPTER ELEVEN: DEPOLYING YOUR WEB

1|Page
 CHAPTER ONE

INTRODUCTION

.NET:

.NET is the result of a complete make-over of Microsoft’s software development products, and
forms part of the company’s new strategy for "Delivering software as a service". The key
features that .NET offers include:

1. .NET Framework
2. .NET Products
3. .NET My Services

.NET FRAMEWORK:

It is an application software platform from Microsoft introduced in 2002.

Purpose: Similar to JEE platform and like Java’s JVM runtime engine.

Byte code(Java) = CLR(.net)

Application: .net run time engine must be installed in the computer in order to run .net
application.

.NET PROGRAMMING LANGUAGES:

Similar to Java because it uses an intermediary byte code language that can be executed on
any hardware platform that has a runtime engine.

Unlike Java it supports multiple programming languages like C# and vb.net

HOW .NET WORKS:

.net compiler generates a Microsoft Intermediate Language (MSIL) byte code, which is
executed by the .net Common Language Runtime Engine (CLR).

.NET FRAMEWORK VERSIONS:

1. .NET framework 1.0

2. .NET framework 2.0  Added enhancements
3. .NET framework 3.0  Windows Programming Interface
4. .NET framework 3.5  added enhancements
5. .NET framework 4  Parallel Processing

2|Page
.NET FRAMEWORK COMPONENTS:

 The user interface (WPF=Windows Presentation Foundation): provides user interface.

 Messaging (WCF= Windows Communication Foundation): enables applications to
communicate with each other locally or remotely.
 Workflow (WWF= Windows Workflow Foundation): is used to integrate applications and
automate tasks.
 User Identity (WCS=Windows CardSpace): provides user authentication system.

.NET LIMITATIONS:

.net main weakness is that Microsoft ignored the:

 Unix OS environments (Does not support Linux)

 And mainframe environment (Can’t work in Mainframe environment).

.NET PRODUCTS:

 Office.net
 Visual Studio.net
 Windows.net(Window Server)

ASP.NET:

Released in January 2002 with 1.0 version of the .net framework it’s successor Microsoft ASP
(Active Server Page) technology.

ASP.net is built on the common language runtime (CLR) enables the user to write ASP.net code
using any supported .net language.

ASP.NET COMPARING WITH CLASSIC ASP

 ASP introduced in 1998 it was Microsoft’s first server-side scripting engine.

 ASP is a technology enables pages to be executed in internet server.
 ASP files extension .asp written in Vbscript
 ASP.net is new generation
 ASP.net pages are compiled which makes then faster than classic ASP.
 ASP.net has better language support a large set of user controls, xml used components
and integrated user authentication.
 ASP.net files extension .aspx written in C# and vb.


DEFINITION:

3|Page
It’s a server-side web application framework designed for web development to provide
dynamic web pages.

ASP.NET FEATURES:

 Works on top of the HTTP protocol

 It is a part of Microsoft .net
 Enables creation, deployment and execution of web applications and services.
 Web application are built using web forms
 Web forms are designed using either VB or C# languages

ASP.NET VERSIONS:

 ASP.NET 1.0  January 2002

 ASP.NET 2.0 November 2005
 ASP.NET 3.5  November 2007
 ASP.NET 4  April 2010

ENVIRONMENTS:

 Visual Studio
 Microsoft Visual Web Developer

PREREQUISITES:-

 Designed for web and application developers who want to build dynamic database-
enabled web sites.
 Useful programming skills …
o HTML …
o Cascading Style Sheets (CSS) …
o Basic Programming …
o SQL (Structured Query Language)

HARDWARE AND SOFTWARE:-

 A Windows-based computer
 Windows Vista or Windows XP (SP2 or Higher)
 For installing Internet Information Services (IIS) Vista Home Premium or Higher ... XP
Professional or Higher … Windows Server 2003 or 2008.
 At least 1 Gigabyte of RAM … two Gigabytes are better.

HOW THE WEB WORKS

4|Page
  The World Wide Web consists of many clients and servers connected over internet.
 Computers communicate with each other using Hyper Text Transfer Protocol (HTTP).
 A client sends a request in HTTP format for a web resource … requests
o Web Page …
o Image File …
o JavaScript … CSS File.
 A server returns a response.
 Each client has a web browser …
o Personal Computers (Internet Explorer, Firefox, Safari).
o Cell phones
o Other devices.
 Each server runs software called an HTTP server.
o Internet Information Server (Windows only)
o Apache (All operating systems).

RETRIEVING STATIC DATA:

5|Page
RETRIEVING DYNAMIC DATA:-

POSSIBLE DYNAMIC WEB SOLUTIONS:-

 Microsoft Active Server Pages (Classic ASP)

 Adobe ColdFusion
 PHP
 Java-based servers (J2EE)
 Microsoft ASP.NET

HOSTING ASP.NET PAGES:-

To view an ASP.NET web page that resides on a web server, we need to request it using a web
browser. The browser sends a request to the web server, The ASP.NET engine processes the
requested page, returns the resulting HTML to the web server, which then sends it back to the
browser, where it is displayed to the user. When you’re developing ASP.NET websites, the
ASP.NET pages you create are saved on your personal computer. To test these pages, then,
your computer must have a web server installed. Fortunately, you do not need to concern
yourself with installing a web server on your computer. Visual Web Developer, the editor we’ll
be using throughout this book to create our ASP.NET websites, includes a lightweight web
server specifically designed for testing ASP.NET pages.
ADVANTAGES OF WEB SERVERS:
Hosting ASP.NET pages locally through the ASP.NET Development Web Server has a number of
advantages:

6|Page
  Testing can be done while offline—Because the request from your browser is being
directed to your own personal computer, you don’t need to be connected to the
Internet to test your ASP.NET pages.
 It’s fast—Local requests are, naturally, much quicker than requests that must travel over
the Internet.
 Advanced debugging features are available—By developing locally, you can use
advanced debugging techniques, such as halting the execution of an ASP.NET page and
stepping through its code line-by-line.
 It’s secure—The ASP.NET Development Web Server allows only local connections. With
this lightweight web server, you don’t need to worry about hackers gaining access to
your system through an open website.

<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>

CHAPTER TWO

GETTING STARTED

(CREATING YOUR FIRST WEB)

In the Visual studio interface in front of Create click on Website

7|Page
  Programming Language to build your Website: C# or vb
 Platform : Windows
 Project: Web

Or go to: File menu New  Project

Click on:

 ASP.NET Website.
 From Location choose the name of your web and the location you will save it.
 From Language choose whether you are using Visual Basic or C Sharp.
 Click OK.

8|Page
We choose Web Form

9|Page
The program will create a web: Default.aspx

Go to: Debug Run without Debugging

This is you first web running in your browser.

THE INTERFACE:

SWITCHING BETWEEN WINDOWS:-

ASP.Net has different environments

10 | P a g e
  Source view—You can either type in the HTML and Web control syntax by hand or drag
the desired HTML elements and Web controls from the Toolbox onto the Source view.
 Design view—This view presents a What You See Is What You Get (WYSIWYG) interface.
You can add text to the page by typing, but HTML elements and Web controls can be
added only by dragging them from the Toolbox and dropping them onto the design
surface.
 Split view—This view shows both the Source and Design views.

EXPLORING VISUAL WEB DEVELOPER INTERFACE

 File Menu: In this menu there are many commands to manipulate your web files like:
New Web Site … Open … Close … Save.
 Edit Menu: In this menu there are commands editing your web … like: Copying … Pasting
…
 View Menu: includes choices of adding particular panels into interface. By default you
see: Solution Explorer .. database explorer and property panels.

You can close any panel you want to remove it from the interface.

11 | P a g e
Also your can drag a panel to any where your want

If your want to return web developer interface to it is default appearance.

Go to: Windows  Reset Window Layout

12 | P a g e
Then everything will return to it’s original position.

Tool bar: Most used commands from the menu are in tool bar .. you can easily use it wihout
opening the menu.

There two main standard toolbars in here

 Formatting toolbar: to format the text

 Standard toolbar: for saving , copying , pasting, Start Debugging and so on.

For example:

Highligh the text on your page and change it as follows:

 Size: x-large
 Style: Bold
 Font face: Tunga
 Heading 1

13 | P a g e
Click on the source your see the text is entered between head1 or h1 as shown here.

THE TOOLBOX

The Toolbox contains HTML elements and Web controls that can be dragged onto the
WYSIWYG designer. By default, the Toolbox is shown on the left side of Visual Web Developer;
if you do not see the Toolbox on your screen, you can display it by going to the View menu,
expanding the Other Windows submenu, and selecting the Toolbox menu item.

There are ten tabs in the Toolbox:

o Standard
o Data
o Validation
o Navigation
o Login
o WebParts
o AJAX Extensions
o Dynamic Data
o HTML

14 | P a g e
 o General

Each tab contains a number of elements underneath it. By default, the Standard tab will be
expanded, which includes items such as Button, Label, LinkButton, TextBox, and so on.

PROPERTIES WINDOW

Every control in the toolbox has it’s own properties and those properties can be modified in
the properties window.

SOLUTION EXPLORER:

This window locates in the top right side of the window and holds the web files, also the new
items can be added from here.

WORKING WITH WEB PAGES AND OTHER CONTENT

A website is a repository of related files and subdirectories. Websites typically contain files of
the following types:

 Static web pages—An HTML page is a static web page. Unlike an ASP.NET page, it
contains only HTML content—no Web controls and no source code. As its name implies,
the content of these types of files is static and cannot be altered based on user input,
server-side data, or other criteria.
 ASP.NET pages—ASP.NET pages are the dynamic web pages in your site. They are
implemented as two files: PageName.aspx, which contains the HTML portion, and
PageName.aspx.cs, which contains the source code portion.
 Image files—Most websites have various images, logos, and clip art. These image files
typically are stored in the website, either in the root directory or in an Images folder.
 Configuration files—ASP.NET websites contain a configuration file named web.config
that provides server-side setting information.

15 | P a g e
  Style sheet files—Style sheets are files that instruct the browser how to format and
display different types of content. For example, in your site you might want all content
displayed in the Arial font and content within <h1> tags displayed in italics. You can
specify this aesthetic information through cascading style sheet (CSS) rules defined in
style sheet files.

UNDERSTANDING DEVELOPING WEB SERVER:-

Web Developer is enabling you to run and test your web when IIS is not installed in your
computer.

When you create your first web and debug it, your web will be shown using the browser
installed on your computer like Internet Explorer or Firefox.

The URL begins http://: This is the protocol of web pages

Local host: Automatic name for web server that is on your local system.

4913: Numeric value called port number when you requesting a page from internet you use
code number 80 because it is default HTTP port … Secured HTTP port is 443. This is dynamic
port number, you can change it

When you are deploying your ASP.NET web for production that is for use by your users you
want to install and use IIS.

16 | P a g e
WHAT WE MEAN DYNAMIC PAGE:-

Dynamic pages read data from separate page or file … the code or data you are working with is
not on the page shown but the web developer reads it from another file or page and show you
from the page you opened.

CREATING DYNAMIC PAGE READING FROM C#

1. Add new page into your web by going Project Add New Item

2. Choose "C#" and Then "Web" and then "Web Form"

17 | P a g e
 4. Web forms are added in your Project Explorer

ASPX VS ASPX.CS PAGES

ASPX files usually will have the UI and will which is usually HTML tags, some ASP.NET server
control embed code (which ultimately produce some HTML markups). ASPX.CS file (usually
called "code-behind") will have server-side coding in C#.

Example:

1. in .aspx.cs write this code

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

protected string myvar= "Welcome! This is my first page in asp.net";

2. in .aspx write this code

<div>

<% =myvar %>

</div>

THE DATABASE FOR ASP.NET

 Many database products are available

o MySQL (Free)
o Oracle
o Microsoft Access
 SQL Server is best suited for use with ASP.NET
o Highly scalable (Unless Microsoft Access)

18 | P a g e
 o ASP.NET already includes all required drivers (software for communicating with
the database)
o Integrated with Windows security model for easy authentication.

<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>

CHAPTER THREE

CREATING ASP.NET WEB PAGES

A master page provides the layout and functionality to other pages. Creating a master page in
ASP.NET is very easy. Let's start creating the master page step by step.

ADDING MASTER PAGE IN YOUR WEB

Go to:

Website  Add New Item

From this window choose MasterPage as shown below.

19 | P a g e
WRITING SCRIPTING FILE INSIDE A PAGE:

Add new form page and use the information shown as the page shown below:

 Type: web form

 Name: PageWithCode.aspx
 Language: Visual C#
 Place code in separate file: Remove the check

Open the source code and add:

 Title as shown here

 Header as shown here:

 Label: change the ID property of label to: mylabel

 Button: Change the text property to: Click Me!
 Double click on the button and write this code

MyLabel.Text = "Welcome Guest!";

 Run the program and click the button

20 | P a g e
ADDING CONTROLS TO THE PAGE:-

When adding web page controls you have two options:

 Adding HTML controls(Static) or

 Adding ASP.NET web server controls allows you to react with particular events using
server side code.

DATA ENTRY FORM:

 Add header into a form … Write: “Author Information”. And press enter to go the next
paragraph.

 This looks like this

 Add table to your form …

 The table will have two columns and four rows …

21 | P a g e
  Add three labels , write them First Name, Last Name, Date of Birth respectively and
three textbox inside the cells of the table as shown below …

 Add three textboxes

 Finally add button to the form

22 | P a g e
  Change the text property of the button to: submit

 Save your work by pressing: ctrl+S and run the page

 Write information and click Submit button

23 | P a g e
  The form is submitted to the server and still holds and displaying the data I typed in it …
and that is the main difference between ASP.NET controls and basic HTML controls.
 Right click on anywhere on your page and choose: View Page Source.

24 | P a g e
25 | P a g e
HANDLING POST BACK DATA IN WEB FORM PAGE:-

 Add a Panel container

 Change the ID property of the textboxes as follows
o textbox1=fnameInput
o textbox2=lnameInput
o textbox3=dobInput

 Add three labels inside the panel … After you add a label press Enter to add another.

26 | P a g e
  Change the IDs of the labels as follows:
o Label1=fnamelabel
o Label2=lnamelabel
o Label3=doblabel
 Double click on the submit button and write this code
fnameLabel.Text = fnameInput.Text
lnameLabel.Text = lnameInput.Text
dobLabel.Text = dobInput.Text

 Run the program, insert information and click submit button

27 | P a g e
The second approach: You can use page load function

Page load function loads pages to the browser

If you are using C# this is the code

USING DATA BINDING EXPRESSIONS:-

This is also used to get data out of the server and displaying it on the screen.

Controls you need it:-

Control ID Text Remarks

Label1 First Name
Label2 Last Name
Label3 Date of Birth
Textbox1 fnameInput
Textbox2 lnameInput
Textbox3 dobInput
Button Submit
Panel
Label4 fnameLabel Remove the name in the text property …
therefore the ID value will appear
Label5 lnameLabel Remove the value in the text property …
therefore the ID value will appear
Label6 dobLabel Remove the value in the text property …
therefore the ID value will appear
The web form looks like this:

28 | P a g e
Note: Text in front of the labels … like First Name, Last Name, and Date of Birth is not labels it is
written inside the panel.

 Go to the code window and write the following codes

<asp:Panel ID="Panel1" runat="server">
First Name:
<asp:Label ID="fnameLabel" runat="server"
Text="<%# fnameInput.Text %>"></asp:Label>
<br />
Last Name:
<asp:Label ID="lnameLabel" runat="server"
Text="<%# lnameInput.Text %>"></asp:Label>
<br />
Date Of Birth:
<asp:Label ID="dobLabel" runat="server"
Text="<%# dobInput.Text %>"></asp:Label>
</asp:Panel>
 As shown here:

 Click anywhere on the page and write this code for data binding in the page load

29 | P a g e
  Run the page and enter data … click on Submit button

<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>

CHAPTER FOUR

PROGRAMMING IN ASP.NET

PROGRAMMING IN ASP.NET

The primary language we use in ASP.Net Visual Basic.net and C# are syntactically very different
from each other but they both use the underline .net class library.

EXAMPLE OF MAIN SIMILARITIES AND DIFFERENCES:

Create a page with two panels, textbox (To make it multiple lines choose TextMode property as
MultipleLines) and two buttons … put the textbox in the first panel and the two buttons in the
second panel.

30 | P a g e
Write a function for jumping the new line when writing the textbox

protected void output(String value)

{
TextBox1.Text += value + Environment.NewLine;
}

As shown here:

In run code button write the this code

protected void Button1_Click(object sender, EventArgs e)

{
output("Helo world");
}

In the Clear button write this code

protected void Button2_Click(object sender, EventArgs e)

{
TextBox1.Text = "";
}

As shown here:

Run the code and click on the run button many times then click on clear button

31 | P a g e
VARIABLES IN C#

All programming languages support the concept of variable … a place to hold data in memory.

You start variable data type … then variable name then semi colon or the equal sign with
variable value between double quotations and then semi colon.

String localvar; or string localvar="Hello World";

Use our last program and write this code at run button.

protected void Button1_Click(object sender, EventArgs e)

{
string localvar = "My local variable in C#";
output(localvar);
}

LOOPING CONCEPT IN C#:-

protected void Button1_Click(object sender, EventArgs e)

{
for (int counter = 0; counter < 3; counter++)
{

32 | P a g e
 output("The value of counter is: "+counter);
}
}
The output:

While loop:

Note: If the counter is declared inside the for loop expression the counter variable will expire
when the for loop is finished .. Therefore the counter variable is to be declared before the for
loop expression.

33 | P a g e
The output:-

FUNCTIONS:

As ASP.net web page become more complex it is useful to add breakout functionality and
separate subroutines for functions. C# supports this feature.

First we begin with the access modifier

The access modifier is determining the availability of the function.

 If the function is written in the same page which it is called then declare it as Private.
 If the function is available from this page and any other page differ from this page (In
object oriented term=sub classes of this page) declare it as protected.
 If you want the function is callable anywhere in the application declare it as public.

1. Create this function

protected int AddVal(int val1, int val2)

{
return val1+val2;
}

2. Call the function in the run button

protected void Button1_Click(object sender, EventArgs e)

{
int total=AddVal(5, 8);
output("The total is: " + total);
}

34 | P a g e
The output:

COMMENTING CODE:

C# support the ability to add code to your code.

 You can use comment to document features on your code that may not easy to figure
out.
 Or temporarily block a certain code from executing

35 | P a g e
First: commenting C# code:

 You can use beginning of line comment: that is double slash characters (//) as you
studied in C++ and Java. This prevents a certain line of code to be executed.
 Or you can use block comment: the block comment starts with slash and asterisk and
ends with asterisk slash. (/* …………….. */)

COMMENT , UNCOMMENT FROM THE TOOLBAR

Also you can choose uncomment to remove the comment.

Note: Ctrl+K Ctrl+C is commenting from the keyboard … Ctrl+K Ctrl+U is uncomment from the
keyboard.

<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>

CHAPTER FIVE

VALIDATION IN ASP.NET

BACKGROUND:

Whenever we have an application that expects user input, then it becomes important to
ensure the validity of the data input by the user. We might have scenarios when some data is
mandatory for the user to enter. There are scenarios when the user data has to be in some
particular format example email ID. There could be scenarios when we want the data to be in
some range example date input.

36 | P a g e
So for all the above mentioned scenarios, if we take the user input without validation, then
chances are that we will end up having wrong data with us (perhaps in database). If it is a bad
day for us then possibly our application might also end up behaving in an unexpected manner
and even crash on us (like if we try to convert a non numeric string to int). Worst case
scenario, the user will use the input field to perform SQL injection and cause serious damage to
our database. So it is always a good idea to have validation in place whenever we are taking
input from the user.

TYPES OF VALIDATION:-

There are two ways we can perform validation:

 Client side validation

 Server side validation

CLIENT SIDE VALIDATION:-

Client side validation is something that will happen on users' browser. The validation will occur
before the data gets posted back to server. It is a good idea to have client side validation as the
user gets to know what needs to be changed immediately, i.e., no trips to servers are made. So
from the users' point of view, it gives him fast response and from the developers' point of view,
it saves valuable resources of server.

SERVER SIDE VALIDATION:-

Server side validation occurs at server. The benefit of having server side validation is that if the
user somehow bypasses the client side validation (accidentally or deliberately), then we can
catch the problem on the server side. So having server side validation provides more security
and ensures that no invalid data gets processed by the application.

Server side validation is done by writing our custom logic for validating all the input. ASP.NET
also provides us some controls which will facilitate the server side validation and provides a
framework for the developers to do the same.

NOTE: Web developer may choose to go with any one type of validation but usually it is a good
idea to have client side validation and same validation on server side too. It sure takes some
resources of server to validate the already validated data (on client side) but it ensures security
and that is always good.

VALIDATION CONTROLS IN ASP.NET

The validation controls provided by ASP.NET are:

 RequiredFiledValidator

37 | P a g e
  CompareValidator
 RangeValidator
 RegularExpressionValidator
 CustomValidator
 ValidationSummary

We can tweak these validation control's properties for how to perform validation but first let us
look at some properties common to all these controls.

 ControlToValidate: ID of the control which should be validated by this control.

 ErrorMessage: This message will be displayed to the user when validation fails. This
should always be something which user can read and act upon.
 Text: This string will be visible where the validation control is placed when
validation fails. Usually it is a good idea to set it to "*".

HOW TO ADD VALIDATIONS:-

The toolbox has a validation part double any validation control you want to add into your page

VALIDATION SUMMARY:

It is a good idea to look at this control first. ValidationSummary control is a control which
displays the error messages for all the validation controls on the page in one place. If we want
to have this control display the error messages for some particular validation controls (possibly
because we have multiple ValidationSummary on page), then we can use ValidationGroup
property of the controls. Let's move ahead and see how validation summary will be useful for
us.

38 | P a g e
REQUIREDFIELDVALIDATOR:

This validation control will be used when we are mandating the user input for any particular
field. Let's say we have a simple form with name field and we don't want this to be empty. so
what we can do is add a RequiredFieldValidator to the page, set the
ControlToValidate to the ID of the name input field, set the error message property.

When we try to do a postback without entering name, then the postback will not happen and
the "*" will be displayed in place to our validation control. The ValidationSummary we
already added will display the full error message.

39 | P a g e
COMPAREVALIDATOR:-

This control will compare the value of its ControlToValidate with

ControlToCompare. It uses the comparison operators to do the same. Now let us say we
have a hypothetical scenario where we want the same name to be entered twice (Not so
hypothetical if it would be password) then we can have a CompareValidator in place with
the following properties:

40 | P a g e
RANGEVALIDATOR:-

In scenarios where we want to ensure that the value entered by the user is in some predefined
range, we can use this control. Let us try to add this control on our page and use this to validate
the age of the user. We are saying the valid age is between 18 to 50.

When we run the page:

41 | P a g e
If we look at the timestamp we added on the page, we can verify that the validation is
happening on the client side and no postback is happening to the server. If we need to change
this to do this validation in server side, then we will have to set the EnableClientScript property
of the validation control to false.

REGULAR EXPRESSION VALIDATOR:

RegularExpressionValidator comes in handy when we want input data to be in

some specific format. Let us try to do that on our page by asking the user for his email ID. We
will be using the RegularExpressionValidator for validating the format of email id.

42 | P a g e
Write this code in the validation expression

\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

Let us run the page.

<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>

CHAPTER SIX

Cascading Style Sheets

(CSS)

UNDERSTANDING CSS:-

 CSS stands for Cascading Style Sheet

 CSS is used to apply common look and feel for your web application

ADVANTAGES OF USING CSS:-

 It gives uniform look and feel to web application

 Ease of maintenance

43 | P a g e
TYPES OF CSS:-

1. Element
2. Class
3. ID

FIRST: CREATING ELEMENT CSS:-

For example: if you want to create a CSS for header of the page

HOW TO ADD CASCADING STYLE SHEETS:-

Go to: Website Add New Item

Choose: StyleSheet … name it as you like … select the language … in here my css name is:
MyStyle … and the language is C# .. click Add button.

Here it is added in the Solution Explorer

44 | P a g e
Go to Server Explorer and double click your CSS file (Me: MyStyle.css)

Put the curser between the brackets

USING THE NEWLY CREATED CSS:-

Go to the code window of your page and write this line of code to connect the CSS

<link href="MyStyle.css" rel="Stylesheet" type="text/css" />

Run the page and you will see the changes Insha Allah.

Also you can add CSS from Properties Window

45 | P a g e
 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>

CHAPTER SEVEN

PRESENTING DYNAMIC DATA

PRESENTING DATA IN GRIDVIEW CONTROL:-

First: Open new project and create database in SQL Server:

How to create SQL Server database

Go to: Project Add New Item

Choose “SQL Server Database” give name your database, select language and click “Add”.

46 | P a g e
Go to Server Explorer:

If the server explorer is not present in you IDE

Go to: View Server Explorer

Open your database in Server Explorer by clicking the + sign and Right click on the tables and
choose “Add New Table”

47 | P a g e
Add three columns: No, Name, Faculty

Open “Identity Specification” in column Property by clicking the + sign and choose “Yes” in (Is
Identity) property.

Click “Save” and name your table as you like

48 | P a g e
Add some Students to the table, to do this right-click on the newly created table and select
“Show Table Data”

Don’t try to enter values in No field

When you write the header press enter to move to the next paragraph.

Drag your table and drop into the paragraph

49 | P a g e
Run the page and this is the result

To see the code created by ASP.NET click Source

50 | P a g e
To remove “No” column comment or remove the part of your code holding it

Now this is my comment

Now it is not displayed in the browser

51 | P a g e
To sort the names ascending add this SQL command as shown below.

And this is the result

52 | P a g e
The [square bracket] denotes the phrase inside the bracket is column (field).

EDITING GRIDVIEW:

First: changing column header text

To change the column header: in the top right corner control you can see icon with right point
arrow … when you click it, it opens the GridView tasks: choose “Edit Columns”.

Choose: field  HeaderText

Write the new name and click OK

53 | P a g e
This is the result

54 | P a g e
CHANGING THE VIEW OF THE GRIDVIEW:-

Now choose “Auto Format”

Auto Format allows you to add a number of visual properties into your GridView with some
predefined schemes.

Choose the one of the following schemes

ADDING PAGE NUMBER TO THE GRIDVIEW:-

Highlight a column and in the properties window set allow paging =True

55 | P a g e
Reduce the page size if you choose 5 for example the page displays only five rows every time.

This is the result:

Now it is numeric you can change it.

56 | P a g e
For example: Change the mode to: NextPreviousFirstLast

This is the result

EDITING DATA IN THE DATABASE IN THE RUN TIME:-

The GridView enables you a capability to modify the data in the database in the run time.

Select the GridView .. go to the properties window and set: AutoGenerateEditButton

57 | P a g e
Run the page and click on the Edit button … change anything you like then click Update button.

If can except specific column from the editing

For example: I want to make faculty field be not editable

58 | P a g e
Set the “Read Only” property as true.

Go to the smart tag and select Edit Column from the panel.

Choose field of “Faculty”, set the “Read Only” property as True .. and click “OK”.

Now the field of faculty is not editable.

59 | P a g e
CREATING DATALIST:-

Go to your database, drag the table, and drop it into your page.

Then remove the GridView

60 | P a g e
Now we want to put the DataSource down the paragraph to insert the DataList control into the
paragraph area.

Like this

This is the result

Go to the toolbox and add the DataList into the page inside the paragraph.

Choose “SqlDataSource1” from the Choose Data Source in smart tag panel.

61 | P a g e
Run the page

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

CHAPTER EIGHT

DATA ENTRY SYSTEM

USING DETAILSVIEW:

Enables the user to modify the data in the server-side.

Create database with table as shown before

Drag the table into your page

62 | P a g e
This is a GridView we studied before therefore delete the GridView by clicking on it and press
Delete key from the keyboard … and leave SQLDataSource

Double click the DetailsView control on the toolbox to add it into your page.

This is not connected to any data source open: Choose Data Source in Smart Tag and choose
SqlDataSource

63 | P a g e
If you can’t see the columns of your table as shown above, click on “Refresh Schema”.

Add page number by checking: Enable Paging

64 | P a g e
And this is the result

EXERCISE:

Change “Magac” to “Name” and “Cinwaan” to “Address” first from the smart tag and second
from the code window.

65 | P a g e
How to insert data into the table in the server-side

In the DetailsView’s smart tag choose: Edit Fields …

Open commandfield, select: New, Insert, Cancel and click “Add”.

66 | P a g e
You will see the new button is added to your DetailsView

Press F5 to run the page and click Add button

Open your table in the database and check if the new name is added.

67 | P a g e
 <<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>

68 | P a g e