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.

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.

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

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 5

Eyeglass Rx User Control

6 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

7 7

Creating Table Rx

8 8

Table Rx Definition

9 9

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 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 14

Configure the SQL Data Source

15


16


17 17


18 18


19 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 21

The DropDownList

22 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 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 29

User Control Eyeglass_Rx

30 30

Eyeglass_Rx.ascx

Initial FileSource 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" %>

<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

Eyeglass_Rx.ascx

32 32

Eyeglass_Rx.ascx

<tr>

<td style="border:solid 1px"> OD</td>

<td style="border:solid 1px"></td>









</tr>

33 33

Eyeglass_Rx.ascx

<tr>

<td style="border:solid 1px"> OS</td>










</tr>

<table>

34 34

User Control Eyeglass_Rx Design View

35 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

36 36

Configure SqlDataSource

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

37


Click WHERE

38 38


Click Add

39


Click OK

40


Click Next

41


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


<%# DataBinder.Eval(Container.DataItem, "RCylinder").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RAxis").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RPrism").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RBase").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RAdd").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RSeg").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RPD").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "RNPD").ToString() %></td>

</tr>

49 49

Add Data Bindings for Third Row

<tr>

<td style="border:solid 1px"> OS</td>


<%# DataBinder.Eval(Container.DataItem, "LSphere").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LCylinder").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LAxis").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LPrism").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LBase").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LAdd").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LSeg").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LPD").ToString() %></td>


<%# DataBinder.Eval(Container.DataItem, "LNPD").ToString() %></td>

</tr>

50 50

Style the Table

<table style="border:solid 1px; background-color:LightYellow;

padding:2; border-collapse: collapse">

51 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 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 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 54

Add the User Control to Default.aspx

55 55

User Control Eyeglass_Rx.ascx In Use

End of Presentation

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.

Documents

table rx slide

eyeglass rx user control

rx data

table rx user control

table rx definition

rx ids

dropdownlist slide

selected slide