11 User Controls II Chapter 11

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.

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

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.

55 Eyeglass Rx User Control

66 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: Downloads/Eyeglass_Rx_User_Control/ Downloads/Eyeglass_Rx_User_Control/ File create_prescriptions.sql

77 Creating Table Rx

88 Table Rx Definition

99 Table Rx Contents

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

12 The SqlDataSource

13 In Design View

14 Configure the SQL Data Source

15 Configure the SQL Data Source

16 Configure the SQL Data Source

17 Configure the SQL Data Source

18 Configure the SQL Data Source

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

20 Configure the DropDownList

21 The DropDownList

22 Initial Dummy Item

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#

29 User Control Eyeglass_Rx

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

31 Control Language="C#" AutoEventWireup="true" CodeFile="Eyeglass_Rx.ascx.cs" Inherits="Eyeglass_Rx" %>. Sphere Cyl Axis Prism Base Add Seg PD NPD 31 Eyeglass_Rx.ascx

32 Eyeglass_Rx.ascx OD

33 Eyeglass_Rx.ascx OS

34 User Control Eyeglass_Rx Design View

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

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

37 Configure SqlDataSource Click WHERE

38 Configure SqlDataSource Click Add

39 Configure SqlDataSource Click OK

40 Configure SqlDataSource Click Next

41 Configure SqlDataSource Click Test Query then fill in Value

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

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.

45 Repeater

46 Make the ItemTemplate enclose the table

47 Configure the Repeater

48 Add Data Bindings for Second Row OD

49 Add Data Bindings for Third Row OS

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

51 Setting the Rx ID The SqlDataSource in the user control has a command parameter for the RxID Need to be able to set it from our C# code in the page-behind file for the container page. ddlRxID SelectedIndexChanged Event Handler Define a property in Eyeglass_Rx.ascx Settable from the outside world. Update the command parameter and rebind the table to the data source whenever the Rx ID property is set.

52 Eyeglass_Rx.ascx.cs using System; using System.Configuration; using System.Data; using System.Web; using System.Web.UI.WebControls; public partial class Eyeglass_Rx : System.Web.UI.UserControl { private int rxid; public int Rxid { set { rxid = value; Rebind(); } } private void Rebind() { // Update the command parameter of the SELECT command SqlDataSource1.SelectParameters[0].DefaultValue = rxid.ToString(); Repeater1.DataBind(); } Setting the Rxid property refills the table data.

53 Setting the User Control's Rxid Property protected void ddlRxID_SelectedIndexChanged( object sender, EventArgs e) { Eyeglass_Rx1.Rxid = int.Parse(ddlRxID.SelectedItem.Value); } Default.aspx.cs Replace the stub with the real event handler.

54 Add the User Control to Default.aspx

55 User Control Eyeglass_Rx.ascx In Use End of Presentation