BTI420 Lab 1

The theme of this lab is to deliver data to a view.

.

BTI420 Lab 1 – Due on Sat Jan 18

Due date: Saturday, January 18, 2014, at 2:00pm ET

Grade value: 3% of your final course grade

.

Objective(s)

Get experience developing an ASP.NET MVC web app using Visual Studio.

Deliver data to a view, which requires you to successfully learn the fundamentals of the model-view-controller (MVC) design pattern.

.

Introduction to the problem that you will solve

We need a web app that will display information about you.

What’s similar to what you did in Lab 0

Similar to the in-class Lab 0, it will deliver personal information to the Contact view.

What’s different from what you did in Lab 0

What’s new is that you’ll deliver some transcript grades information to the About view.

You will also begin to learn about:

  1. Best practices for creating (or getting access to) data in a controller
  2. Collections, specifically the ICollection<T> interface, and the List<T> class
  3. How to render a collection in a view

.

Get started with Lab 1

Create a new project. Its name will be “Lab1”.

If you are using Visual Studio 2013:
New project > ASP.NET Web Application > MVC > no authentication

If you are using Visual Studio 2012, use the procedure in Lab 0 to create the project.

.

Data for your app

As you did in Lab 0, you will create a source code file (in the Controllers folder) – Home_vm.cs – to hold your data classes. In fact, you can use/copy the Home_vm.cs source code file that you wrote for Lab 0. There are number of ways to do this, but here’s one way:

  1. Right-click your Controllers folder
  2. Choose Add > Existing Item
  3. In the dialog, navigate to the file system location for your Lab 0 “Home_vm.cs” source code file, select it, then add it

As you did in Lab 0, you will create data in the Home controller (HomeController.cs).

Obviously, the data will not be persisted – it will be created with every request, and then automatically disposed of by the .NET Framework runtime after the response has been delivered to the requestor.

.

What’s new in this Lab 1

A best practice tells us to create, or get access to, the data we need in the controller’s default constructor. We do that with a simple two-step procedure:

  1. At the top of the controller, before the methods, create one or more properties to hold the data you need.
  2. Then, add code for a default constructor.

.

controller_constructor

.

Create one or more properties

You will need a property for your personal information; its data type will be “Person”.

You will need another property, for your transcript grades; its data type will be “Transcript”. You will write this class soon.

Add a default constructor

Just below the property declarations, add a default constructor. For the Home controller, the signature will be:

public HomeController() { }

Our initialization code will go inside the curly-brace block.

.

Data definition – personal information

The Person class you wrote in Lab 0 is almost perfect. Just add one more property for the PhotoUrl. Here’s the class specifications, repeated from Lab 0, with the additional PhotoUrl property:

  • Id – int – identifier
  • LastName – string – a person’s last name
  • GivenNames – string – a person’s given name(s)
  • Age – int – a person’s age
  • PhotoUrl – string – a URL path to your photo

Add a method to return a Person object’s content in a nicely-formatted string. Use the String.Formatmethod. Dereference the object’s properties with the “this.” prefix, as shown during class.

Next, you will need a small photo or head shot of yourself. (Keep it small – about 200px square.) In Solution Explorer, under the existing “Content” folder, right-click and Add > New Folder; the name of the new folder should be something like “images”. Finally, copy-paste your photo into that folder (or as you learned above, right-click, then Add > Existing Item).

Below, you will display personal information on the Contact view.

.

Data definition – transcript grades information

You will need two more view model classes. They will be added to your Home_vm.cs source code file.

Grade class

The Grade class will be very simple. It will have only two string properties, named “Code” (for course code), and “LetterGrade” (for the letter grade that you earned in the course).

Transcript class

The Transcript class will be interesting, because it has new concepts. Our in-class code examples – and your work with Lab 0 – used properties with really simple-to-understand data types – int and string.

The data types of the Transcript properties will break new ground for you. So, create a new Transcript class, and add these properties:

  • Student – data type is Person – which will hold your personal information
  • Grades – data type is ICollection<Grade> – which will hold your collection of grades
  • GPA – data type is double – which will hold your calculated GPA

As you can see, a Transcript is a compound, complex, and composed data type.

The Student property, as a Person data type, should be easy to understand.

Similarly, the GPA property, as a double data type, should be easy to understand.

What’s the ICollection<Grade> data type? It’s an example of a generic collection in the .NET Framework. The following is from the MSDN Library Collections and Data Structures document:

Closely related data can be handled more efficiently when grouped together into a collection. Instead of writing separate code to handle each individual object, you can use the same code to process all the elements of a collection.

To manage a collection, you can … add, remove, and modify either individual elements or a range of elements in the collection.

Here’s some more information, from the MSDN Library:

Commonly Used Collection Types (we will use ICollection<T>, List<T>, and IEnumerable<T>)

When To Use Generic Collections

Introduction to Generics (first paragraph only)

List<T> Class reference

Reference information is described in the ICollection<T> document. (To search for this yourself, use this search engine term: .net framework icollection<t> interface) The “Remarks” and “Examples” sections of that document will help you understand more.

When you add a property of type ICollection<T>, you MUST do one other task: In the default constructor, initialize the property by using a concrete type.

ICollection<T> is an interface. You can tell, because .NET Framework have an upper-case letter “I” prefix. In C++ programming, you learned about an abstract class with pure virtual methods. In C# and the .NET Framework, the counterpart is an interface.

A best practice tells us to use an interface as the data type when declaring properties in a class. However, just as in C++, we cannot initialize an interface. Instead, we must use a concrete type that implements/inherits the interface. (Why don’t we just declare the property’s data type as the concrete type? Well, it’s not a best practice. You’ll understand more later.)

So, write a default constructor for the Transcript class. It will have this statement:

this.Grades = new List<Grade>();

Below, you will display transcript grades information on the About view.

.

Handling a request in the controller

At this point in time:

  • you have written classes for Person, Grade, and Transcript
  • the Home controller has properties for a Person object and a Transcript object
  • the Home controller has an empty default constructor

Now, we’ll add code to create data in the default constructor.

.

Add code to the default constructor

Initialize the Person property, and set its properties. The PhotoUrl string can be a relative path. If you followed instructions above, your relative path string will probably look something like the following:

“/content/images/myphoto.jpg”

Initialize the Transcript property.

Set its Student property to the Person object you just created above.

Now you’re ready to add grades. You will use the Grades property’s “Add()” method. Add at least five Grade objects. Use either one of the following formats to add grades:

Two-statement add:
Grade btp300 = new Grade() { Code = “BTP300”, LetterGrade = “B+” };
Transcript.Grades.Add(btp300);

One-statement add:
Transcript.Grades.Add(new Grade() { Code = “BTD310”, LetterGrade = “C” });

After you add the grades, you must calculate the grade point average (GPA). It’s a simple calculation, as you know: Sum the numeric values of every letter grade. Then divide by the number of grades. You can get the number of grades using the Transcript.Grades.Count property.

Start by declaring a variable, data type double, to hold the sum, or running total. Next:

The C# language has a foreach statement, and is the best way for enumerating through a collection. You will go through the Transcript.Grades collection.

Inside the foreach statement, use the C# language switch statement to evaluate a letter grade, and add it to the sum. Switch-case is MUCH better than using if-else (nested or not) statements. Your professor does NOT want to see if-else statements if there are more than two evaluation possibilities.

In C, its switch statement will only switch on int. In C#, the possibilities are wider. We can switch on the value of a string.

After the foreach statement, set Transcript.GPA to the calculated GPA.

.

Pass data to the views

As noted above, pass the Person object to the Contact view.

Remember to declare, using @model…, the data type of the view model that’s being passed to the view.

In the Contact view source code, you must add an HTML img element. The src attribute’s value will be a code expression that dereferences the model’s PhotoUrl property.

As noted above, pass the Transcript object to the About view.

Remember to declare, using @model…, the data type of the view model that’s being passed to the view.

You can dereference property values by using the dot-separated path to the property. For example, Student.LastName will get you the student’s last name.

Render the GPA. It’s a double, so you’ll have to use the ToString method to convert it to a string. You also need to format it to use two decimal places. How? Look at the ToString method documentation, and use the right overloaded method signature.

Render an HTML table for the collection of grades. How? Similar to what you did in BTI320’s markup-and-code-expressions source code. Here’s a general coding approach:

table opening tag

tr with th for the column headings

code expression that enumerates through the collection of grades, rendering HTML tr with td elements

table closing tag

What code expression? We’ll help you out:

@{foreach (var grade in Model.Grades) {
<tr><td>@grade.Code</td><td>@grade.LetterGrade</td></tr>
}}

.

Personalize your pages

This work is similar to (or a repeat of) your work on Lab 0. Here are some tips; also look at the screen shot examples that follow. Click on a screen shot to open it in a new tab/window.

_Layout.cshtml – shared content needs personalization

Contact.cshtml – custom view model

About.cshtml – custom view model

.

Index view:

lab1_index

.

About view:

lab1_about

.

Contact view:

lab1_contact

.

Submit your work on My.Seneca/Blackboard

Follow these instructions very carefully to submit your work on My.Seneca/Blackboard.

1. In Solution Explorer, select/highlight the solution

2. Right-click, and choose “Open File in File Explorer”, and an Explorer window will open

3. Navigate up one level; your “Lab1” folder will be highlighted

4. Copy-paste the “Lab1” folder. It will create a folder named “Lab1 – Copy”; that’s OK

5. Open the “Lab1 – Copy” folder; remove/delete the “packages” folder

6. Open the “Lab1” folder; remove the bin and obj folders

7. Navigate back up two levels; your “Lab1 – Copy” folder will be highlighted

8. Create a compressed (zip) version of that folder; the easiest way is right-click > Send to > Compressed (zipped) folder; the resulting file size will be fairly small, maybe about 500KB in size

9. Login to My.Seneca/Blackboard

10. Navigate to the BTI420 Assignments area, and use the link to the Lab 1 upload to submit your work

.

.

.

.

.

.

.

.

.

.

.

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