Lesson_19 Data binding
-
Upload
adnan-amin -
Category
Documents
-
view
227 -
download
0
Transcript of Lesson_19 Data binding
-
8/7/2019 Lesson_19 Data binding
1/38
WEB ENGINEERING-IIUSING ASP.NET
B Y
A DN A N A M I N
L E C T U R E R / SO F T W A R E P R O G RA M M E R
I N F O R M A T I O N A N D C OM M U N I C A T I O N T E C H N O L O G Y ( I C T D EP T )
W W W . G E O A M I N S . C O M
-
8/7/2019 Lesson_19 Data binding
2/38
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
By: Adnan Amin (Lecturer/Programmer) 2
-
8/7/2019 Lesson_19 Data binding
3/38
DATA BINDING IN ASP.NET 2.0 In ASP.NET 2.0, Microsoft has takenthe concept of data binding and
expanded it to make data binding eveneasier to understand and use.
ASP.NET 2.0 introduces a new layer ofdata abstraction called data sourcecontrols.
It shows how you can use the datasource controls to easily and quicklybind data to data-bound controls.
By: Adnan Amin (Lecturer/Programmer) 3
-
8/7/2019 Lesson_19 Data binding
4/38
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 dataprovider, such as the SQL Data Provider or the OLE DBData Provider.
This means you no longer need to concern yourselfwith the hows and whys of using the data providers oreven coding.
The data source controls do all the heavy duty for you.
You need to know only where your data is and, ifnecessary, how to construct a query for performingCRUD (Create, Retrieve, Update, and Delete) operations.
By: Adnan Amin (Lecturer/Programmer) 4
-
8/7/2019 Lesson_19 Data binding
5/38
The five built-in data source controls in ASP.NET 2.0are each used for a specific type of data access.
Data Source ControlsCont.
Control Name Description
SqlDataSource Provides access to any data source thathas an ADO.net data provider such as
ODBC, OLE DB, SQL Server, Oracle andSQL Server CE providers.
SiteMapDateSource Provides access to site map data for aweb site that is tored by the site mapprovider such as web.sitemap.
XmlDataSource Provides data access to XMl documents.
ObjectDataSource Provides specialized data access tobusiness objects such object oriented
or Classes.By: Adnan Amin (Lecturer/Programmer) 5
-
8/7/2019 Lesson_19 Data binding
6/38
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.
By: Adnan Amin (Lecturer/Programmer) 6
-
8/7/2019 Lesson_19 Data binding
7/38
STEP:1 CREATING CONNECTION Click on the New Connection Button.
By: Adnan Amin (Lecturer/Programmer) 7
-
8/7/2019 Lesson_19 Data binding
8/38
STEP:2
1. Enter the Server name
e.g:
COMPUTER1/SQLEXPRESS
2. Select or Enter a databasename
e.g:
Northwind
Click on Ok Button.
By: Adnan Amin (Lecturer/Programmer) 8
-
8/7/2019 Lesson_19 Data binding
9/38
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:
By: Adnan Amin (Lecturer/Programmer) 9
-
8/7/2019 Lesson_19 Data binding
10/38
STEP4: SPECIFY COLUMNS FORM A TABLE
By: Adnan Amin (Lecturer/Programmer) 10
-
8/7/2019 Lesson_19 Data binding
11/38
CODES CREATING GLOBAL CONNECTION
Open Web.config page.
Typical Global Connection generated by Visual Studio
By: Adnan Amin (Lecturer/Programmer) 11
-
8/7/2019 Lesson_19 Data binding
12/38
CODING FOR CONFIGURE SQL DATA SOURCE
Default.aspx
Add SqlDataSource on to web form.
Typical SqlDataSource control generated by Visual Studio
By: Adnan Amin (Lecturer/Programmer) 12
-
8/7/2019 Lesson_19 Data binding
13/38
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
By: Adnan Amin (Lecturer/Programmer) 13
-
8/7/2019 Lesson_19 Data binding
14/38
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 toit (if already data source created otherwisecreate a new data source).
By: Adnan Amin (Lecturer/Programmer) 14
-
8/7/2019 Lesson_19 Data binding
15/38
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.
By: Adnan Amin (Lecturer/Programmer) 15
-
8/7/2019 Lesson_19 Data binding
16/38
GRID VIEW EXAMPLE
By: Adnan Amin (Lecturer/Programmer) 16
-
8/7/2019 Lesson_19 Data binding
17/38
-
8/7/2019 Lesson_19 Data binding
18/38
ENABLING GRID VIEW COLUMNS SORTING
Sorting of data is one of the most important feature of grid viewserver 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 toTrue.
The grid view control takes care of all the sorting logic/ algorithmfor you internally (no need for coding).
By: Adnan Amin (Lecturer/Programmer) 18
Right clickon DataSource
-
8/7/2019 Lesson_19 Data binding
19/38
Adding sorting to the GridView control
By: Adnan Amin (Lecturer/Programmer) 19
ENABLING GRID VIEW COLUMNS SORTING
-
8/7/2019 Lesson_19 Data binding
20/38
2. ENABLING THE GRID VIEW PAGER
The grids data navigation is another very important feature whichis 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 navigationto 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)
By: Adnan Amin (Lecturer/Programmer) 20
-
8/7/2019 Lesson_19 Data binding
21/38
PAGINATION EXAMPLE
By: Adnan Amin (Lecturer/Programmer) 21
-
8/7/2019 Lesson_19 Data binding
22/38
ENABLE UPDATE FEATURE TO GRID VIEW
To enable or add the update feature to Grid view server controlfollow the following.
Right Click on SqlDataSource control
Then Click on Configure Data Source Click on Next Button. (No need to create new connection)
By: Adnan Amin (Lecturer/Programmer) 22
-
8/7/2019 Lesson_19 Data binding
23/38
Click on Advance button. Then checked generate Insertetc
By: Adnan Amin (Lecturer/Programmer) 23
ENABLE UPDATE FEATURE TO GRID VIEW CONT.
-
8/7/2019 Lesson_19 Data binding
24/38
Finally, click on smart tag of GridView control and Checked the
Enable Editing
Enable Deleting
Enable Selection (if needed)
By: Adnan Amin (Lecturer/Programmer) 24
ENABLE UPDATE AND DELETE FEATURE TO GRID VIEWCONT.
-
8/7/2019 Lesson_19 Data binding
25/38
DETAIL VIEW SERVER CONTROL
The DetailsView server control is a new data-bound control thatenables 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.
By: Adnan Amin (Lecturer/Programmer) 25
Detail View Control
Example
Grid View ControlExample
-
8/7/2019 Lesson_19 Data binding
26/38
FORM VIEW SERVER CONTROL
The Form View control is a new control included with the ASP.net2.0 toolbox.
It is basically functions like the Details View control but it displays
the data in custom templates, which gives much greater controlover how the data is displayed and edit.
By: Adnan Amin (Lecturer/Programmer) 26
-
8/7/2019 Lesson_19 Data binding
27/38
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.
By: Adnan Amin (Lecturer/Programmer) 27
-
8/7/2019 Lesson_19 Data binding
28/38
Right Click on FormView surface area.
Goto Edit Template Click on Edit Item Template.
By: Adnan Amin (Lecturer/Programmer) 28
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
29/38
Design the template as you like (on your choice) using table,label, buttons, textbox controls etc.
By: Adnan Amin (Lecturer/Programmer) 29
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
30/38
-
8/7/2019 Lesson_19 Data binding
31/38
Choose Field binding option then select the database field namefrom the drop down list (choose format, if needed)
Ok, follow the above step for all controls, checked two wayoption.
By: Adnan Amin (Lecturer/Programmer) 31
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
32/38
Dont forget to enter the value for commandName property of thebutton controls. Such as
For Update button commandName : update
For Cancel button commandName : cancel
For Edit button commandName : edit
By: Adnan Amin (Lecturer/Programmer) 32
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
33/38
BROWSERS OUTPUT
By: Adnan Amin (Lecturer/Programmer) 33
Edit item Template mode
-
8/7/2019 Lesson_19 Data binding
34/38
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 willshow Edit Item Template where user can update the recors.
By: Adnan Amin (Lecturer/Programmer) 34
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
35/38
Choose Field binding option then select the database field namefrom the drop down list (choose format, if needed)
Ok, follow the above step for all controls but remember you are inItem Template so dont check the Two way binding (it is forediting).
By: Adnan Amin (Lecturer/Programmer) 35
HOW TO CREATE AND CONFIGURE FORM
VIEW CONTROL (ITEM TEMPLATE) CONTI.
-
8/7/2019 Lesson_19 Data binding
36/38
ADD & CONFIGURE THE DATA LISTCONTROLS
Create Page2.aspx from Add new Item (web site menu)
Add DataList Control from the Data category of toolbox.
Select the Data Source from the Drop Down
List.
By: Adnan Amin (Lecturer/Programmer) 36
-
8/7/2019 Lesson_19 Data binding
37/38
ADD & CONFIGURE THE DETAILVIEWCONTROLS
Create Page3.aspx from Add new Item (web site menu)
Add DetailView Control from the Data category of toolbox.
Select the Data Source from the Drop Down
List.
By: Adnan Amin (Lecturer/Programmer) 37
-
8/7/2019 Lesson_19 Data binding
38/38
ASSIGNMENT
Differentiate DataList, DataGrid, DetailView and FormView
Control.
By: Adnan Amin (Lecturer/Programmer) 38