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


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


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.



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.



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


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.



7/38

STEP:1 CREATING CONNECTION Click on the New Connection Button.



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.



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:



10/38

STEP4: SPECIFY COLUMNS FORM A TABLE



11/38

CODES CREATING GLOBAL CONNECTION

Open Web.config page.

Typical Global Connection generated by Visual Studio



12/38

CODING FOR CONFIGURE SQL DATA SOURCE

Default.aspx

Add SqlDataSource on to web form.

Typical SqlDataSource control generated by Visual Studio



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



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).



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.



16/38

GRID VIEW EXAMPLE



17/38


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).


Right clickon DataSource


19/38

Adding sorting to the GridView control


ENABLING GRID VIEW COLUMNS SORTING


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)



21/38

PAGINATION EXAMPLE



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)



23/38

Click on Advance button. Then checked generate Insertetc


ENABLE UPDATE FEATURE TO GRID VIEW CONT.


24/38

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

Enable Editing

Enable Deleting

Enable Selection (if needed)


ENABLE UPDATE AND DELETE FEATURE TO GRID VIEWCONT.


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.


Detail View Control

Example

Grid View ControlExample


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.



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.



28/38

Right Click on FormView surface area.

Goto Edit Template Click on Edit Item Template.


HOW TO CREATE AND CONFIGURE FORM

VIEW CONTROL (EDIT ITEM TEMPLATE) CONTI.


29/38

Design the template as you like (on your choice) using table,label, buttons, textbox controls etc.





30/38


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.





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





33/38

BROWSERS OUTPUT


Edit item Template mode


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.



VIEW CONTROL (ITEM TEMPLATE) CONTI.


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).



VIEW CONTROL (ITEM TEMPLATE) CONTI.


36/38

ADD & CONFIGURE THE DATA LISTCONTROLS


Add DataList Control from the Data category of toolbox.


List.



37/38

ADD & CONFIGURE THE DETAILVIEWCONTROLS


Add DetailView Control from the Data category of toolbox.


List.



38/38

ASSIGNMENT

Differentiate DataList, DataGrid, DetailView and FormView

Control.


Documents

Lesson_19 Data binding