Home > 2011 Winter BTI420 > BTI420 Lab 4

BTI420 Lab 4

February 11, 2011 Leave a comment Go to comments

Lab 4 enables you to get started with the Entity Framework in an ASP.NET Web Forms app. It is due on Friday, February 18.

.

BTI420 Lab 4 – due Fri Feb 18

Assigned: During Week 5

Due date: Friday, February 18, 2010, at 11:40am

Grade value: 3% of your final course grade

Grading method: The following will be checked:

  • Your “labs/lab4.aspx” page
  • Correct interactive operation of the page’s logic
  • Implementation of the specifications
  • Code writing quality, including commenting

.

Objective(s)

Get a copy of the Northwind sample database tables into your personal database

Create an Entity Framework data model, and use it for read-only operations

Display data on a variety of data display controls

Show that you understand how to use the data model to get data

Use the String.Format() static method to properly format numeric and date/time data

.

Introduction to the problem that you will solve

Your page will display the details of a Northwind Traders “sales order” to a customer.

The page’s user will be able to select a sales order, and then its details will appear. The data comes from related entities.

.

A working example of Lab 4 is here. You DO NOT have to exactly copy the appearance and functionality. Your lab MAY look and work a bit different.

.

Specifications

Re-use the “labs.master” master page, which you first created for the previous lab exercise.

Create lab4.aspx in your labs folder, and it will use your “labs.master” master page.

Copy the Northwind sample database’s tables into your own personal warp-based database, by using the script in the following document:

Copy Northwind Tables

Very important note: The document was modified and re-posted on Sunday, February 13, 2011, at 9:30am ET. If you downloaded an earlier version of the document, you will have to get it again, and run its included script again.

.

Create an Entity Framework data model. Use these names:

  • Model (edmx) source code file: Lab4.edmx
  • Entity container: Lab4Entities
  • Model namespace: Lab4Model

.

Build the page (which should end up looking similar to the Lab 4 example), by following this suggested sequence:

  1. Add a working GridView to your page, which shows data from the nwOrderDetails object set
  2. Add a working DropDownList to your page, which shows the OrderID from the nwOrders object set
  3. Tie the previous data display controls together in a master (DropDownList) – detail (GridView) arrangement
  4. Add the remaining data from a specific “sales order”, and display it in a viewer-friendly format

.

Guidance on each of these steps is offered below.

.

1. Add a working GridView to your page, which shows data from the nwOrderDetails object set

Add a GridView to your page. Add an EntityDataSource control, and configure it to use the nwOrderDetails EntitySetName.

At this point in time, order details for all sales orders will appear in the GridView, and that’s OK for now. (Later, we’ll configure a master-detail arrangement.) Run your page, and the GridView should display order details for all sales orders.

.

2. Add a working DropDownList to your page, which shows the OrderID from the nwOrders object set

Add a DropDownList to your page. Add an EntityDataSource control, and configure it to use the nwOrders EntitySetName. On the wizard’s “Configure Data Selection” panel, you can safely select only the “OrderID” property, and it will be used for both the “data field to display” (DataTextField) and the “data field for the value” (DataValueField) DropDownList properties. Set the DropDownList’s AutoPostBack property to “True”.

At this point in time, run your page, and the DropDownList should show all of the order IDs.

.

3. Tie the previous data display controls together in a master (DropDownList) – detail (GridView) arrangement

Now, create a master-detail arrangement. The DropDownList selection will be used to select the data for the GridView.

Here’s how to approach the task of creating a master-detail arrangement.

First, make sure that the selector – the DropDownList – is configured to post back (i.e. AutoPostBack is True). This control is the “master” in the master – detail arrangement.

Next, in the editor, select the EntityDataSource for the GridView. This control is the “detail” in the master – detail arrangement. Show its Properties panel. In Data > Where, click the ellipsis button, to show the Expression Editor dialog.

The text below will help you learn how to use the Expression Editor dialog. You should also use the online help, which can be opened/displayed by clicking the help icon (?) in the dialog’s upper-right corner.

.

Automatically generate: Click the “Automatically generate…” checkbox, in the upper-left area.

.

Add a parameter: Click the Add Parameter button, in the lower-left area of the dialog.

Type the name of the object’s property that will be used as the parameter. In this situation, we want to make our selection from the “OrderID” property.

.

Parameter source: From the “Parameter source” drop-down button, select “Control”.

.

ControlID: From the “ControlID” drop-down button, select the ID (name) of the “master” control. In our situation, it will be the drop-down list’s ID.

.

Data type fix: At this point in time, the “SelectedValue” property’s type is string. However, the object’s “OrderID” property is int (Int32 actually). This is a type mis-match.

To fix this, click the “Show advanced properties” link button. It will show a list of properties. At the bottom, change the type to “Int32”.

.

Save your work. At this point in time, the master – detail arrangement should work.

.

4. Add the remaining data from a specific “sales order”, and display it in a viewer-friendly format

In the page area between the drop-down list and the grid view, add an html table, which will show the same data that you see in the professor’s Lab 4 example.

Note: The “Order Total” is an optional name-value pair. You do not have to implement it in Lab 4. However, if you do (and do it correctly), it will earn you one bonus mark.

.

How does this data appear on the page? The suggested way (for this Lab 4) is to add a method to your page class. The method will fetch the data from the object store, and display it in the right place, and in the right format.

How does the method get called? What triggers the method? Let’s take advantage of the normal page lifecycle events.

Here is a simplified page lifecycle event sequence in a page that has data bound to controls (as our page has). The information comes from the “Beginning…” textbook’s chapter 6 (page 209+), and its chapter 15 (page 540+).

  1. Page initialization
  2. Load view state
  3. Get the posted data
  4. Page_Load event/method
  5. Process the change events (i.e. the cause of the postback)
  6. Prepare to render the content to the browser/user
  7. Process the data binding events, which happen in sequence, based on their appearance in the aspx markup (so, in our case, the DropDownList appears before the GridView, so the DropDownList data binding events happen first)
  8. Save view state, render the content

.

Should we do the work in Step 4, Page_Load? No – it’s too early. We don’t have all the data we need when Page_Load runs.

Should we do the work in Step 7, data binding? Yes, that seems to be a better place. Which data binding event should we use – DropDownList, or GridView?

Well, for this page, DropDownList data binding happens only once during the page’s lifetime, and that’s when the page loads for the first time. On postbacks, the data for the control is provided by view state.

So, for this page, it looks like GridView data binding is the ideal place. How do we take advantage of this? We do so by adding an event handler for this event. How? Follow along:

Select the GridView, and show its Properties. On the Properties panel toolbar, you will see an “lightning bolt” icon. Click it, and it will show you the list of events that the control can raise/generate:

.

In the “Data” group, you will see the “DataBound” event. Double-click it, and it will add an event handler method stub to your page class.

If you return to the Properties panel, you will see the name of the event handler method – “GridView1_DataBound”. The image below shows this. (Note – the other groups – Action, Behavior, and Misc – have been collapsed.)

.

Now, you can write code for the event. What code do you write?

First, we need to initialize an object context.

Then, we need to use the selected value from the drop-down list. Remember, this value is a string in the drop-down list, but we need to convert it to an int to match the OrderID property in the object set.

Next, we need to fetch the nwOrder object that matches the OrderID (from the drop-down list). Use the FirstOrDefault() method to get a reference to that object. You will have to use a lambda expression here. See our previous coverage on this.

Finally, we extract the nwOrder object’s properties, and place them in Label web server controls, nicely formatted (see “String formatting” below). Some properties can be used directly, but you will have to use the navigation properties for some of the data. Carefully study the example Lab 4, because some of the labels use string concatenation to display data.

.

String formatting

Some objects offer ToString() overloads that enable you to provide a “string format”. If the object doesn’t, you can use the static String.Format() method.

A “string format” enables you to represent, for example, a number or date, as a nicely-formatted string. See this note on Formatting Types, and the String.Format() Method reference document.

If you have a numeric type, you can use String.Format() to, for example, represent a money/currency value as “$442.50”. See the Standard Numeric Format Strings reference for more, and for syntax.

Or, if you have a date/time type, you can use String.Format() to represent a date value as “Sunday, February 13, 2011”. See the Standard Date and Time Format Strings reference for more, and for syntax.

.

Earn one (1) bonus mark…

You can add one more feature to your page, and earn up to one (1) bonus mark for it.

On the professor’s Lab 4 example, you will notice an “Order Total” name-value pair. (For example, for OrderID 10248, the Order Total was $440.00.)

That value was calculated by selecting the objects matching an OrderID, and then calculating the sum total of UnitPrice and Quantity.

The matching objects collection is obtained with the collection’s Where() method, and a lambda expression.

The sum total is obtained with the Sum() method, and a lambda expression.

Note that you can chain methods together. In other words, the return value of a method can be used as the value on which the next method works.

.

Submitting your work

Update your web site home page to add a link to this lab.

When you do a lab exercise, you are creating it online on the warp server. Therefore, you do NOT have to submit paperwork to your professor. Just do the lab, and your professor will find it (as long as it is in the right location!).

.


Advertisements
Categories: 2011 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: