BTI420 Lab 2

The theme of this lab is to get data from a user into your web app.

.

BTI420 Lab 2 – Due on Thu Jan 23

Due date: Thursday, January 23, 2014, at 12:00pm ET (noon)

Grade value: 4% of your final course grade

.

Objective(s)

Get data from a user into your application. 

Learn new topics that have not yet been covered in class. 

.

Introduction to the problem that you will solve

We need a web app that will enable a user to add data about vehicles and their manufacturers.

The web app will have three pages (views):

  1. display list of manufacturers, and enable the user to add a new item to the list
  2. display list of vehicles, and enable the user to add a new item to the list
  3. display details about one specific selected vehicle

An example web app is posted here: bti420.azurewebsites.net

Your web app does NOT have to work or look exactly the same as the example web app.

.

Get started with Lab 2

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

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.

.

Create two new controllers

Create two new controllers, named ManufacturersController and VehiclesController.

If you are using Visual Studio 2013, select “MVC 5 Controller – Empty”.

If you are using Visual Studio 2012, select “Empty MVC controller”.

Later, you will learn how to code the controllers and the views.

.

Data for your app

Data for your app will be stored in ASP.NET Session State.

As in the past, you will create classes in your Controllers folder to hold the app’s data classes.

Remember that any collection property must be initialized in a default constructor.

Add a class named Manufacturer_vm.cs, to hold manufacturer view model classes.

The Manufacturer class should have the following properties:

  • Id – int – object identifier
  • Name – string – manufacturer name
  • Country – string – country of origin or headquarters
  • YearStarted – int – year the manufacturer started operations
  • Vehicles – collection of vehicles made by the manufacturer

You must also create a class that will hold a collection of Manufacturer objects. This is a best practice for sending a collection to a View. This class will have just one property, a collection of Manufacturer objects.

Add a class named Vehicle_vm.cs, to hold vehicle view model classes.

The Vehicle class should have the following properties:

  • Id – int – object identifier
  • Model – string – vehicle model name
  • Trim – string – vehicle trim name/level
  • ModelYear – int – model calendar year designation
  • MSRP – int – manufacturer’s suggested retail price
  • Manufacturer – the object for the manufacturer of the vehicle

You must also create a class that will hold a collection of Vehicle objects. As above, this is a best practice.

This class has BOTH collections, because the View needs both.

The View enables the user to add a new vehicle. Therefore, during data entry, the user needs to select the vehicle’s manufacturer from a (drop-down) list of manufacturers.

.

Displaying a list of manufacturers; add a new manufacturer

The manufacturer controller will do two things, so write two methods:

  1. Display a list of manufacturers
  2. Handle an HTML Forms post that adds a new manufacturer

Display a list of manufacturers

This is done by the template-provided Index() method. In the method body, the code does the following:

  1. Fetch the manufacturer collection data from session state
  2. Create a view model to hold the collection
  3. Pass this view model to the View

Add a view named Index for the Index() method.

It will display the list of manufacturers, ideally in an HTML Table.

It will also display an HTML Form. The form posts to a new method that you add (described below). The form will gather input for all Manufacturer properties EXCEPT the Id property (which we will calculate).

Handle an HTML Forms post that adds a new manufacturer

This is done by a new method that you add.

The method signature MUST have a parameter of type Manufacturer. This is a best practice.

In the method body, the code does the following:

  1. Validates the incoming object, using model validation
  2. Fetch the manufacturer collection data from session state
  3. Calculate then set the incoming object’s Id property, by adding one to the number of existing manufacturer objects
  4. Add the new object to the collection
  5. Saving the collection back to session state

The method return value MUST redirect to the Index() method. This is a best practice implementation of the PRG (post-redirect-get) pattern.

.

Displaying a list of vehicles; add a new vehicle

The vehicle controller will do three things, so write three methods:

  1. Display a list of vehicles
  2. Handle an HTML Forms post that adds a new vehicle
  3. Display details for a specific selected vehicle

Display a list of vehicles 

This is done by the template-provided Index() method. In the method body, the code does the following:

  1. Fetch the vehicle collection data from session state
  2. Fetch the manufacturer collection data from session state
  3. Create a view model to hold the collections
  4. Pass this view model to the View

Why do we need BOTH collections? As noted above, the View needs both. The View enables the user to add a new vehicle. Therefore, during data entry, the user needs to select the vehicle’s manufacturer from a (drop-down) list of manufacturers.

Add a view named Index for the Index() method.

It will display the list of vehicles, ideally in an HTML Table. Notice that the table includes the name of the manufacturer, which you get from a vehicle object’s “Manufacturer.Name” property.

It will also display an HTML Form. The form posts to a new method that you add (described below). The form will gather input for all Vehicle properties EXCEPT the Id property (which we will calculate).

The form includes an HTML <select> element, which displays a drop-down list:

  • The name attribute should, or must be “Name” (which is the property name in the Manufacturer class)
  • Each HTML option element should set the value attribute to the manufacturer identifier (Id), and
  • each option element should set the visible display text to the manufacturer name (Name)

Use a foreach loop to generate the option elements.

When the form posts back, the “Name” key-value pair will include the value of the item that was selected in the drop-down list. For example, if the manufacturer “Ford Motor Company” object had an Id of 123, then “Name=123” would be included in the package of data that’s posted to the method.

Handle an HTML Forms post that adds a new vehicle 

This is done by a new method that you add.

The method signature MUST have a parameter of type Vehicle. This is a best practice.

In the method body, the code does the following:

  1. Validates the incoming object, using model validation
  2. Fetch the vehicle collection data from session state
  3. Fetch the manufacturer collection data from session state
  4. Calculate then set the incoming object’s Id property, by adding one to the number of existing vehicle objects
  5. Fetch/locate (SingleOrDefault) the selected manufacturer object (how-to information is below)
  6. Set the incoming object’s Manufacturer property to the object found in step #5 above
  7. Add the new object to the collection
  8. Saves the collections back to session state

The method return value MUST redirect to the Index() method. This is a best practice implementation of the PRG (post-redirect-get) pattern.

As noted above, when the form posts back, the “Name” key-value pair will include the value of the item that was selected in the drop-down list. For example, if the manufacturer “Ford Motor Company” object had an Id of 123, then “Name=123” would be included in the package of data that’s posted to the method.

It comes in as a string. You must convert it to an integer. Use something like:
Convert.ToInt32(Request.Form[“Name”])

Next, you can query the manufacturers collection (using SingleOrDefault()), to fetch/locate the desired manufacturer object. Then, you can complete step #6 above.

Display details for a specific selected vehicle

This is done by a new method that you add.

The method signature MUST have a parameter of type int, for the object identifier.

In the method body, the code does the following:

  1. Fetch the vehicle collection data from session state 
  2. Fetch the manufacturer collection data from session state
  3. Fetch/locate (SingleOrDefault) the selected vehicle object
  4. If found, pass the vehicle object to the view (if not found, redirect to the Index() method)

Add a view named Details for the Details() method. 

You can render the data in any visually-pleasing manner that you choose. Make sure that you include the vehicle’s manufacturer name on the page / view.

.

Configure (fix) navigation in your web app

You have created three pages. Add links to the pages in an appropriate place.

Maybe on the web app’s (Home) Index.cshtml view (in the body). Maybe also in the menu in _Layout.cshtml.

.

Other refinements that you could do

This part of the lab will not be graded. Do them if you wish.

What if there are no manufacturers yet? Use and study the example web app. It displays a simple message that tells the page user that there are no manufacturers to be displayed. How?

In the view, a simple “if” statement block was added. If the manufacturers count was greater than zero, then it rendered the table of data. If zero, it rendered the message.

Also, if there are no manufacturers, you should not display the “add new vehicle” form. Surround that view code with an “if” statement.

While in the vehicle list view, you can apply the same logic – if there are no vehicles yet, then display a simple message.

.

Submit your work on My.Seneca/Blackboard

Follow these brief instructions to submit your work on My.Seneca/Blackboard. See Lab 1 for all the detailed steps.

1. Make a copy of your “Lab2” project

2. Remove the “packages”, “bin”, and “obj” folders

3. Zip your project (make sure you’re at the correct level in the file system)

4. Submit your work via My.Seneca/Blackboard

.

.

.

.

.

.

.

.

.

.

.

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: