Lesson - 19 Data Binding

WEB ENGINEERING-II
USING ASP.NET
BY
ADNAN AMIN
LECTURER / SOFTWARE PROGRAMMER
INFORMATION AND COMMUNICATION TECHNOLOGY (ICT DEPT)
WWW.GEOAMINS.COM
OVERVIEW
• Data Binding in ASP.net 2.0
• Data Source Controls
• Configuring sql data source
• Codes Creating connection
• Coding for Configuring sql data source
• Add & configure the datagrid controls
• Important features for datagrid control
• Add & configuring the datalist controls
• Add & configuring the DetailView controls
• Add & configuring the Formview controls
2
By: Adnan Amin (Lecturer/Programmer)
DATA BINDING IN ASP.NET 2.0
• In ASP.NET 2.0, Microsoft has taken
the concept of data binding and
expanded it to make data binding even
easier to understand and use.
• ASP.NET 2.0 introduces a new layer of
data abstraction called data source
controls.
• It shows how you can use the data
source controls to easily and quickly
bind data to data-bound controls.
3
DATA SOURCE CONTROLS
 ASP.NET 2.0 introduces an additional layer of
abstraction through the use of data source controls.
 These controls abstract the use of an underlying data
provider, such as the SQL Data Provider or the OLE DB
Data Provider.
 This means you no longer need to concern yourself
with the hows and whys of using the data providers or
even coding.
 The data source controls do all the heavy duty for you.
 You need to know only where your data is and, if
necessary, how to construct a query for performing
CRUD (Create, Retrieve, Update, and Delete) operations.
4
Data Source Controls Cont.
The five built-in data source controls in ASP.NET 2.0

are each used for a specific type of data access.
Control Name Description
SqlDataSource Provides access to any data source that

has an ADO.net data provider such as
ODBC, OLE DB, SQL Server, Oracle and
SQL Server CE providers.
SiteMapDateSource Provides access to site map data for a
web site that is tored by the site map
provider such as web.sitemap.
XmlDataSource Provides data access to XMl documents.
ObjectDataSource Provides specialized data access to

business objects such object oriented
or Classes.
5
CONFIGURING SQL DATA SOURCE
• First Create a new web site.
• Add Web form from Website menu by clicking Add New Item.
• Add SqlDataSource Server Control from the ToolBox.
• Drag and Drop onto Web Form.
• Click on Configure Data Source
from the Pop up menu.
6
STEP:1 CREATING CONNECTION
• Click on the New Connection Button.
7
STEP:2
1. Enter the Server name
e.g:
COMPUTER1/SQLEXPRESS
2. Select or Enter a database

name
e.g:
Northwind
Click on Ok Button.
8
STEP3: SAVE THE CONNECTION STRING TO THE APPLICATION
CONFIGURATION FILE
Enter Any name for new connection or just Click on the check box.
Yes, save this connection as:
9
STEP4: SPECIFY COLUMNS FORM A TABLE
10
CODES CREATING GLOBAL CONNECTION
Typical Global Connection generated by Visual Studio
• Open Web.config page.

<configuration>
<appSettings/>
<connectionStrings>
<add
name="NorthwindConnectionString"
connectionString="Data Source=COMPUTER1\SQLEXPRESS;
Initial Catalog=Northwind;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
</configuration>
11
CODING FOR CONFIGURE SQL DATA SOURCE
Typical SqlDataSource control generated by Visual Studio
Default.aspx
Add SqlDataSource on to web form.
<body>
<asp:SqlDataSource
ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [EmployeeID], [FirstName],
[BirthDate], [HireDate], [City], [Country] FROM [Employees]">
</asp:SqlDataSource>
</body>
12
QUICK OVERVIEW
Microsoft introduced a new set of server controls designed
to make developers more productive.
These controls are the following…
• GridView Data control
• DataList control
• DetailView control
13
1. GRID VIEW
• One of the most popular control of asp.net is
GridView Server Control.
• You could display an entire collection of data,
easily add sorting and paging, also can perform
editing.
• Just drag and drop GridView control on to web
form, it will ask for data source, just assigned to
it (if already data source created otherwise
create a new data source).
14
ADD & CONFIGURE THE GRIDVIEW CONTROLS
• Create Page1.aspx from Add new Item (web site menu)

• Add DataGrid Control from the Data category of toolbox.
• Select the Data Source from the Drop Down
List.
15
GRID VIEW EXAMPLE
16
IMPORTANT FEATURES
OF GRID VIEW CONTROL
There are the following important built in features of the grid
view server control in asp.net.
1. Enabling Grid View column sorting

2. Enabling Grid View pagination
17
ENABLING GRID VIEW COLUMNS SORTING
• Sorting of data is one of the most important feature of grid view
server control in asp.net.
• Sorting of data is a built in property of grid view control, to enable
column sorting in a grid, you just set the AllowSorting attribute to
True.
• The grid view control takes care of all the sorting logic/ algorithm
for you internally (no need for coding).
Right click
on Data
Source
18
ENABLING GRID VIEW COLUMNS SORTING
Adding sorting to the GridView control

<asp:GridView
ID=”GridView1”
Runat=”server”
DataSourceID=”SqlDataSource1”
DataKeyNames=”CustomerID”
AllowSorting=”True”
>
……………
……………
</asp:GridView>
19
2. ENABLING THE GRID VIEW PAGER
• The grid’s data navigation is another very important feature which
is called Grid View Paging.
• The grid view makes it even easier with its AllowPaging attribute.
• By default a number record per page is 10 and add page navigation

to the bottom of the grid.
• The grid navigation is refer to

• First page
• Last page
• Next pages
• Previous pages
• Division of the all records per page size (such as 10 record etc)
20
PAGINATION EXAMPLE
21
ENABLE UPDATE FEATURE TO GRID VIEW
• To enable or add the update feature to Grid view server control
follow the following.
• Right Click on SqlDataSource control
• Then Click on Configure Data Source
• Click on Next Button. (No need to create new connection)
22
ENABLE UPDATE FEATURE TO GRID VIEW CONT.
• Click on Advance button. Then checked generate Insert……etc
23
ENABLE UPDATE AND DELETE FEATURE TO GRID VIEW
CONT.
• Finally, click on smart tag of GridView control and Checked the

• Enable Editing
• Enable Deleting
• Enable Selection (if needed)
24
DETAIL VIEW SERVER CONTROL
 The DetailsView server control is a new data-bound control that
enables you to view a single data record at a time in very detail.
 Although the GridView control is an excellent control for viewing
a collection of data.
 To start using the DetailsView, drag the control onto the web form.
Grid View Control

Example
Detail View Control
25
Example
FORM VIEW SERVER CONTROL
 The Form View control is a new control included with the ASP.net
2.0 toolbox.
 It is basically functions like the Details View control but it displays
the data in custom templates, which gives much greater control
over how the data is displayed and edit.
26
HOW TO CREATE AND CONFIGURE
FORMVIEW CONTROL
 Drag & Drop the FormView server control onto web form.
 Click on smart tag of FormView Control then select the
sqlDataSource from the listbox.
27
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.
 Right Click on FormView surface area.

 Goto Edit Template  Click on “Edit Item Template”.
28
 Design the template as you like (on your choice) using table,
label, buttons, textbox controls etc.
29
 For example, I want to connect textbox control with data source

field, so just follow the steps for each control.
 Click on the textbox control then click on smart tag  Edit
binding.
30
 Choose Field binding option” then select the database field name
from the drop down list (choose format, if needed)
 Ok, follow the above step for all controls, checked two way option.
31
 Don’t forget to enter the value for commandName property of the

button controls. Such as
 For Update button commandName : update
 For Cancel button commandName : cancel
 For Edit button commandName : edit
32
BROWSER’S OUTPUT Edit item Template mode
33
VIEW CONTROL (ITEM TEMPLATE) CONTI.
 After the “Edit Item template” work, follow the below steps.
 Right Click on FormView surface area.
 Goto Edit Template  Click on “Item Template”.
 Design the template by adding labels controls and table.
 Item Template vs Edit item Template :
 it will be display as read only, after clicking the edit button it will
show “Edit Item Template” where user can update the recors.
34
VIEW CONTROL (ITEM TEMPLATE) CONTI.
 Choose Field binding option” then select the database field name
from the drop down list (choose format, if needed)
 Ok, follow the above step for all controls but remember you are in
“Item Template” so don’t check the Two way binding (it is for
editing).
35
ADD & CONFIGURE THE DATA LIST
CONTROLS
• Add DataList Control from the Data category of toolbox.
List.
36
ADD & CONFIGURE THE DETAILVIEW
CONTROLS
• Add DetailView Control from the Data category of toolbox.
List.
37
ASSIGNMENT
Differentiate DataList, DataGrid, DetailView and FormView
Control.
38

Lesson - 19 Data Binding

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lesson - 19 Data Binding

Caricato da

Copyright:

Formati disponibili

WEB ENGINEERING-II

The five built-in data source controls in ASP.NET 2.0

Control Name Description

SqlDataSource Provides access to any data source that

ObjectDataSource Provides specialized data access to

2. Select or Enter a database

• Open Web.config page.

• Create Page1.aspx from Add new Item (web site menu)

1. Enabling Grid View column sorting

Adding sorting to the GridView control

• By default a number record per page is 10 and add page navigation

• The grid navigation is refer to

• Click on Advance button. Then checked generate Insert……etc

• Finally, click on smart tag of GridView control and Checked the

Grid View Control

Detail View Control

 Right Click on FormView surface area.

 For example, I want to connect textbox control with data source

 Don’t forget to enter the value for commandName property of the

Potrebbero piacerti anche