Effective Data Utilization in Web Development

Unit 8.2 Learning Objectives How data can be used The Money Ball Example Accessing Data in Views Accessing data in Graphical Web Controls Working with Templated Data Working with Hidden Cells Group Exercise

Example: Moneyball Batting average Stolen bases Runs batted in On-base % Slugging % On-base + Slugging (OPS) How Data can be used

Databases Database creation and use MS Visual Web Developer Database and Query Development MS SQL Server Business Intelligence Microsoft BI, IBM Cognos Real world Application Money Ball

Collections of Rows GridViews and DetailsViews contain a collection of Rows Each Row contains a collection of Cells Cells Rows gvFees dvFee

Locations of Cells 0 1 DetailsView dvFee The Fee amount (i.e. 7.5000) dvFee.Rows[2].Cells[1] 0 1 2 GridView: gvFees ( Select is Column 0) The FID of (i.e. 1) is in gvFees.Rows[0].Cells[1] The Weight Fee (i.e. 12.5) is in gvFees.Rows[2].Cells[3] 0 1 2 3 0 1 2

Types of Cells: Standard and Templated Standard cells Templates Come from Database Yes, always sometimes Created manually Never Always in ItemTemplates Data type String web control (e.g. DDL) Used for Display, edit Insert, display, edit, validation Accessed by Cell Location Cell Location + FindControl

Accessing Data in Standard Cells If The cell does NOT contain a CheckBox, AND It has NOT been converted to a Template Then Your data is in the Text property of the Cell Example: Label lblFees = new Label(); lblFee.Text = gvFees.Rows[3].Cells[2].Text; Otherwise Use the FindControl utility Example: Label lblFees = gvFee.Rows[3].Cells[2].FindControl( lblFee ) as Label;

Basic Templates Guidelines To create/use templates, remember three things 1. Web control type (e.g. Label) 2. Its name (e.g. lblFeeDescription ), 3. Its location (e.g. in ItemTemplates ). Why use to Templates To add validators To insert new values into the database

Template Example: DetailsView To use templated data, convert them directly into labels.

Hiding data in DetailViews

The Data is NOT where you think it is 0 1 0 1 2 dvFee.Rows[2].Cells[1] 0 Invisible field is still here 1 0 1 2 What is the location of the fee?

How to tell Examine at the SelectedFields window Fee Description is still the second field (it is row 1) And the Fee is still the third field (row 2) 0 1 2

Finding Data in GridViews All Data is located in the row selected by the user The SelectedIndex is used to index the row and is -1 if no row is selected

All rows of a GridView Use a special loop called foreach Loops through a collection of rows One row at a time The type of object being extracted from the collection The collection being looped through

Unit 8 L2 For this exercise we are going to modify your Unit 5 L2 assignment, replacing the fees ListBox with a fees GridView 1. Start by Opening your ASPPub and copying your yournameU5L2.aspx files into the Unit8 folder. 2. Rename the files to yournameU8L2 3. Change the page heading from UNIT 5 L2 to UNIT 8 L2 WORKING GRIDVIEW

Unit 8 L2 - 2 4. Delete the fees ListBox and put a GridView in its place. Give the GridView the (ID) of gvFees 5. Click on the GridView s SmartMenu, click the dropdown next to Choose Data Source and select <New data source> Select SQL Database and change its ID to sdsFees Click OK and select the connection you created in U8L1

Unit 8 L2 - 3 Click Next, select the Fees table and select all the fields individually Click Next and click Text Query to see the records in the table, then click Finish 6. Apply an Auto Format to the Gridview and change its width to 300px. 7. Select Edit Columns from the GridViews SmartMenu Select TemplateField from Available Fields and press Add

Unit 8 L2 4 Click the Up Arrow key to move the TemplateField to the top of the Selected fields list Select FID from Selected fields and change its Visible property to false Select the FeeDescription field change its HeaderText property to Description Change its Styles, HeaderStyle, HorizontalAlign to Left Select the Fee field and change its DataFormatString to {0:f2}

Unit 8 L2 - 5 Click OK and then EditTemplates, you should be looking at your new ItemTemplate Add a CheckBox to the ItemTemplate Change its (ID) to ckbSelect Change its Text to Select End Template Editing You should have something that looks something like this

Unit 8 L2 - 6 8. Delete the WHILE loop button and all its associate code (the easiest way to do this may be do double-click the button to get to the code, select all the click method code and delete it, switch back to design view and delete the button) 9. Delete the FOR loop button and all its associate code 10.Double-click the sales tax button and locate and delete the code used in Unit 5 to process the ListBox (leave the lines that calculate the tax and those that write to the Label)

Unit 8 L2 - 7 11. In place of the ListBox code write a foreach loop to process the GridView rows: foreach (GridViewRow gvRow in gvFees.Rows) { Code: Find the CheckBox. Remember the data type & cast it (below) Code: Is it Checked? Code: Locate the Fee (remember, the invisible FID field still takes up a Cell!) Code: add it to decFees } 12. Wrap up Sales tax and Switch statement is not critical for this Other than that, please make it look like the sample page Try A sales with no fees Try A sales with one or more fees

Unit 8 L2 - 8 13.Once you are sure that your calculations work Add code to reset the checkboxes This should be a foreach loop that Locates the CheckBox in the GrideViewRow and Sets its Checked property to false 14. Test the page with the same data as before to be sure you get the same answers and that the checkboxes are reset Once you are sure the page works, link it to your MIS3200 profile page and save your complete ASPPub to ASPNET as you have done before Post a link to your MIS3200 portfolio page in the dropbox

Think About It! A DetailsView and a GridView always look like tables. Think of some applications where you might want to display data in a different way. A FormView shows one record at a time, like the DetailsView, but it isn t divided into Rows and Cells. How do you think you would access data in a FormView.