1 / 55

User Controls II

User Controls II. Chapter 11. 1. Objectives. You will be able to Create a realistic reusable user control. Use data binding in a user control. Change the page content displayed by a user control from the code-behind file of the page that contains the user control. A Real User Control.

syshe
Download Presentation

User Controls II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Controls II Chapter 11 1

  2. Objectives • You will be able to • Create a realistic reusable user control. • Use data binding in a user control. • Change the page content displayed by a user control from the code-behind file of the page that contains the user control.

  3. A Real User Control • Reusable Eyeglass Prescription Display • User control shows Rx as a table. • Needed in several places in a real web app. • This is a minor simplification of the real one. • User control gets Rx data from a SQL Server database. • Uses Data Binding with SqlDataSource. • SELECT command has parameter for Rx ID. 3

  4. Reality Check • This is just an example. • Demonstrating the use of data binding in a nontrivial user control. • A real user control like this would probably use low level ADO classes and methods. • There is a high performance cost for data binding multiple controls as done in this example.

  5. Eyeglass Rx User Control 5

  6. The Database Tables • Tables • Rx • Used by the user control. • Patients • Will not be used this semester. • Download SQL scripts to build your own copies of these tables: • http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/Eyeglass_Rx_User_Control/ • File create_prescriptions.sql 6

  7. Creating Table Rx 7

  8. Table Rx Definition 8

  9. Table Rx Contents 9

  10. Demo Web Site • Container page has a databound dropdown list for Rx IDs. • All Rx IDs in table Rx • User control displays a single Rx • HTML table cells data bound to SQL Data Source • Query for table Rx specifies Rx ID in WHERE clause. • When user selects an ID from the dropdown list, app displays that Rx in the user control. • Client code sets a property of the user control to specify Rx ID. • User control updates its SELECT command. • Rebinds to fill HTML table with values from the specified Rx in the database table.

  11. Demo Web Site • Create a new ASPX web site for demo of the Eyeglass Rx user control. • Rx_Demo • Add a SqlDataSource • This one for Rx IDs to populate the dropdown list. • Put it below the form in Default.aspx 11

  12. The SqlDataSource

  13. In Design View

  14. Configure the SQL Data Source 14

  15. Configure the SQL Data Source

  16. Configure the SQL Data Source

  17. Configure the SQL Data Source 17

  18. Configure the SQL Data Source 18

  19. Add a DropDownList • Inside the div • ID: ddlRxID • DataSourceID: SqlDataSource1 • DataTextField: RxID • DataValueField: RxID • Enable AutoPostback • AppendDataBoundItems = true • Add dummy initial item • Select Rx 19

  20. Configure the DropDownList

  21. The DropDownList 21

  22. Initial Dummy Item 22

  23. Add Label • Add a label beside the dropdown list. • Used for messages to the user • Double click on the dropdown list • Visual Studio adds an event handler

  24. Rx ID Selected Event Handler • Start with a stub: protected void ddlRxID_SelectedIndexChanged(object sender, EventArgs e) { lblMessage.Text = "Rx ID " + ddlRxID.SelectedValue + " selected"; } Try it!

  25. Default.aspx

  26. Selecting Rx 10

  27. After Rx 10 Selected

  28. User Control Eyeglass_Rx • User control Eyeglass_Rx will display one eyeglass prescription • Values from database table Rx. • Identified by RxID • Website > Add new item. • Web User Control • Name: Eyeglass_Rx.ascx • Language: Visual C# 28

  29. User Control Eyeglass_Rx 29

  30. Eyeglass_Rx.ascx Initial File Source View <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Eyeglass_Rx.ascx.cs" Inherits="Eyeglass_Rx" %> Note Control vs Page Add an HTML Table 30

  31. Eyeglass_Rx.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Eyeglass_Rx.ascx.cs" Inherits="Eyeglass_Rx" %> <table style="border:solid 1px"> <tr> <td style="border:solid 1px"> . </td> <td style="border:solid 1px">Sphere</td> <td style="border:solid 1px">Cyl</td> <td style="border:solid 1px">Axis</td> <td style="border:solid 1px">Prism</td> <td style="border:solid 1px">Base</td> <td style="border:solid 1px">Add</td> <td style="border:solid 1px">Seg</td> <td style="border:solid 1px">PD</td> <td style="border:solid 1px">NPD</td> </tr> 31

  32. Eyeglass_Rx.ascx <tr> <td style="border:solid 1px"> OD</td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> </tr> 32

  33. Eyeglass_Rx.ascx <tr> <td style="border:solid 1px"> OS</td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> <td style="border:solid 1px"></td> </tr> <table> 33

  34. User Control Eyeglass_Rx Design View 34

  35. Building the User Control • Add a SqlDataSource. • Below the table. • Configure it for your scorpius database. • Set the SELECT command. SELECT * FROM Rx WHERE RxID=@RxID 35

  36. Configure SqlDataSource We can use the same connection that we created for the .aspx page. 36

  37. Configure SqlDataSource Click WHERE

  38. Configure SqlDataSource Click Add 38

  39. Configure SqlDataSource Click OK

  40. Configure SqlDataSource Click Next

  41. Configure SqlDataSource Click Test Query then fill in Value

  42. Query Test Value is parameter value for the Query Test Click OK

  43. Query Test Result Click Finish

  44. Building the User Control • Add a Repeater • Above the table • Add an ItemTemplate inside the Repeater. • We are using the Repeater just to provide a container that we can bind to a SqlDataSource. • There will always be exactly one Rx. • We select on the RxID, which is the Primary Key. • Guaranteed to be unique. 44

  45. Repeater

  46. Make the ItemTemplate enclose the table

  47. Configure the Repeater

  48. Add Data Bindings for Second Row <tr> <td style="border:solid 1px"> OD</td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RSphere").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RCylinder").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RAxis").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RPrism").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RBase").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RAdd").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RSeg").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RPD").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "RNPD").ToString() %></td> </tr> 48

  49. Add Data Bindings for Third Row <tr> <td style="border:solid 1px"> OS</td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LSphere").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LCylinder").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LAxis").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LPrism").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LBase").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LAdd").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LSeg").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LPD").ToString() %></td> <td style="border:solid 1px"> <%# DataBinder.Eval(Container.DataItem, "LNPD").ToString() %></td> </tr> 49

  50. Style the Table <table style="border:solid 1px; background-color:LightYellow; padding:2; border-collapse: collapse"> 50

More Related