1 data bound controls ii chapter 15 - 16. 2 objectives you will be able to use a data source control...
TRANSCRIPT
1
Data Bound Controls II
Chapter 15 - 16
2
Objectives
You will be able to Use a Data Source control to get
data from a SQL database and make it available to display components
Use a GridView control to display data from a Data Source control. All without writing any C# code.
Data Binding
Permits us to bind a control to a data source. Example: SQL Server database table. Many others.
Control automatically shows data from the data source. No C# code required.
Can update the data source with new values input by the user.
4
The Northwind Traders Database
We will use the Customers table from the Northwind Traders database for an example today. Need own copy so that we can modify it.
Download script from the class web site: http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads
/ File create_customers.sql
Put the file into a convenient folder.
5
Script create_customers.sql
6
Executing the Script
Set up VPN connection.
7
Check the Table in Visual Studio
8
Show Table Data
9
Table Customers
10
Set Primary Key
In order to update the table, it must have a Primary Key. Set in the standard Northwinds
Database version of the table. Not in our copy.
View Server Explorer Expand Customers table
Open Table Definition
11
Set Primary Key
Right-click hereSelect Set Primary Key
12
Set Primary Key
13
Data Source Controls
Family of ASP.NET controls with similar functionality and identical interfaces
Connection information Query information Parameters
Avoid need to write low level code to access the database.
Bind to display controls to show the data on a web page.
14
The GridView Control
Displays data in a grid Think Excel spreadsheet http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.a
spx http://msdn.microsoft.com/en-us/magazine/cc163933.aspx
Binds to a Data Source control
Many properties! Control appearance and behavior
15
Create a New Web Site
16
Rename the .aspx file
17
Drag a SqlDataSource to the Page
18
Configure the DataSource
Click here
Click here
19
Set Up a new Connection
Click here
20
Add Connection
Click here
21
Configure the DataSource
Click here
22
Save the Connection String
Say “yes”
23
Specify the Query
24
Test the Query
Click here
25
Query Result
Click here
26
The SqlDataSource Ready for Action
The SqlDataSource control holds the connection and query information that will be used by a data bound control.
What We Wrote
$ Expressions
<%$ ConnectionStrings:wpusr40 %>
Will be evaluated by the server as the .aspx file is processed.
Invokes an expression builder ConnectionStrings in this case.
Does not emit HTML. Used only to set a property value of the
enclosing ASPX object SqlDataSource in this case.
web.config
$ Expressions
<%$ ConnectionStrings:wpusr40 %>
The expression builder ConnectionStrings will return the connection string with name wpusr40 from the <connectionStrings> section of web.config.
That string will be the value of the ConnectionString property of SqlDataSource1.
Equivalent to writing
SqlDataSource1.ConnectionString = WebConfigurationManager.ConnectionStrings["wpusr40"].ConnectionString;
in Page_Load.
31
Drag a GridView onto the Page
32
Bind to the SqlDataSource
Click here to select data source
33
Bind to the SqlDataSource
Select SqlDataSource1
34
The GridView
The GridView is now specific for the data source.
Try it!
Zoom Out and Resize the Window
36
37
Enable Paging
38
View the Source
Paging Enabled
39
40
Make it look nicer.
Click on the GridView’s smart tag and select Auto Format. Explore the choices
41
Enable Sorting
42
Run the App!
Note the page selections.
Click on the column headings to sort by that column.
43
Compare Paging to Scrolling
Back in the design view Click on the GridView’s smart tag and
unselect Enable Paging.
Build and run the app again. Try the scroll bar.
44
Paging Disabled
45
Adding Insert, Update, and Delete
Currently we can only display the table contents. No capability to modify the database.
Look at the source. Find <asp:SqlDataSource ... >
46
The SqlDataSource
47
Add Update Capability
To add the capability of updating the database, go back to design view. Click the smart tag on SqlDataSource1. Click Configure Data Source
48
Add Update Capability
49
Add Update Capability
Click here.
50
Add Update Capability
Click here.
51
Add Update Capability
Click here.
52
Add Update Capability
Click here.
53
Add Update Capability
Click here.
Click here to test.
54
Back in Design View
Click on the GridView and then click on the smart tag
which will appear at the upper right corner.
55
Adding Update Capability
Select Enable Editing and Enable Deleting
56
Source View
57
Try it!
Click on “Edit” link to edit a row.
58
Doing Edits
Edit textboxes then click “Update”.
59
Updated Field
60
Back in Visual Studio Server Explorer
61
Buttons Instead of Links
Click the GridView smart tag and select Edit Columns
62
Buttons Instead of Links
Click here.
63
Buttons Instead of Links
1. Select “CommandField”
2. Select Button from dropdown list.
3. Click OK
64
Visual Studio Design View
65
The App in Action