1. 1 Data Bound Controls II Chapter 15 - 16

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

3. 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. 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. 5 Script create_customers.sql

6. 6 Executing the Script Set up VPN connection.

7. 7 Check the Table in Visual Studio

8. 8 Show Table Data

9. 9 Table Customers

10. 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. 11 Set Primary Key Right-click here Select Set Primary Key

12. 12 Set Primary Key

13. 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. 14 The GridView Control Displays data in a grid Think Excel spreadsheet http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.aspx http://msdn.microsoft.com/en-us/magazine/cc163933.aspx Binds to a Data Source control Many properties! Control appearance and behavior

15. 15 Create a New Web Site

16. 16 Rename the.aspx file

17. 17 Drag a SqlDataSource to the Page

18. 18 Configure the DataSource Click here

19. 19 Set Up a new Connection Click here

20. 20 Add Connection Click here

21. 21 Configure the DataSource Click here

22. 22 Save the Connection String Say “yes”

23. 23 Specify the Query

24. 24 Test the Query Click here

25. 25 Query Result Click here

26. 26 The SqlDataSource Ready for Action The SqlDataSource control holds the connection and query information that will be used by a data bound control.

27. What We Wrote

28. $ Expressions 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.

29. web.config

30. $ Expressions The expression builder ConnectionStrings will return the connection string with name wpusr40 from the 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. 31 Drag a GridView onto the Page

32. 32 Bind to the SqlDataSource Click here to select data source

33. 33 Bind to the SqlDataSource Select SqlDataSource1

34. 34 The GridView The GridView is now specific for the data source.

35. Try it!

36. Zoom Out and Resize the Window 36

37. 37 Enable Paging

38. 38 View the Source

39. Paging Enabled 39

40. 40 Make it look nicer. Click on the GridView’s smart tag and select Auto Format. Explore the choices

41. 41 Enable Sorting

42. 42 Run the App! Note the page selections. Click on the column headings to sort by that column.

43. 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. 44 Paging Disabled

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

46. 46 The SqlDataSource

47. 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. 48 Add Update Capability

49. 49 Add Update Capability Click here.

50. 50 Add Update Capability Click here.

51. 51 Add Update Capability Click here.

52. 52 Add Update Capability Click here.

53. 53 Add Update Capability Click here. Click here to test.

54. 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. 55 Adding Update Capability Select Enable Editing and Enable Deleting

56. 56 Source View

57. 57 Try it! Click on “Edit” link to edit a row.

58. 58 Doing Edits Edit textboxes then click “Update”.

59. 59 Updated Field

60. 60 Back in Visual Studio Server Explorer

61. 61 Buttons Instead of Links Click the GridView smart tag and select Edit Columns

62. 62 Buttons Instead of Links Click here.

63. 63 Buttons Instead of Links 1. Select “CommandField” 2. Select Button from dropdown list. 3. Click OK

64. 64 Visual Studio Design View

65. 65 The App in Action