BTI420 Lab 2

Work with an HTML Form in ASP.NET MVC. Use a view model. Implement a ‘data manager’ class.

.

BTI420 Lab 2 – Due Tue Jan 27

Due date: Tuesday, January 27, 2015, at 7:30am ET

Grade value: 3% of your final course grade

.

Objective(s)

Work with an HTML Form in ASP.NET MVC.

Use a view model.

Implement a ‘data manager’ class.

.

Introduction to the problem that you will solve

We need a web app that enables you to work with data about cars (vehicles). It will have two main features:

  1. Its Index view will display a list of cars
  2. Its Create view will enable the user to add a new car

.

Read all of this document before you begin work.

Test your work incrementally, as you complete each task.

.

Get started with Lab 2

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

Add the Biggy JSON package to your project. See the Jan 22 / Jan 26 notes page for a how-to refresher.

.

View model classes

Create a source code file to hold your view models; its suggested name will be “Home_vm.cs”, and located in the Controllers folder.

You will need a ‘car add’ view model class, and a ‘car full’ view model class (which inherits from ‘car add’). The ‘car add’ view model class should have at least these properties:

  • Car manufacturer (e.g. Ford)
  • Car model (e.g. Focus)
  • MSRP (can be a whole number)
  • Model year

.

Data manager class

Add a source code file to hold your “Manager” class, its suggested name will be “Manager.cs”, and located in the Controllers folder.

Configure it with the members (fields, property, constructor, method) that will support these use cases:

  • get all cars (sorted by manufacturer then model) (this should be a property)
  • add new car (a method, obviously)

Follow the technique you learned during class to write the class. You will learn that data manager classes are similar to one another. Therefore, in the near future, you will be motivated to standardize and reuse.

.

The home “Index” view/page

The home page – Index view – will show a list of all cars.

Therefore, you can replace the template-provided Index view. Yes, use the scaffolding feature. You do not have to modify the view code, but it would be nice to have an appropriate page title and so on.

You can either ignore the generated links for each row, or simply comment them out (or remove them) from the view source code.

.

Add a new car view/page

In the controller, write two methods that will handle the ‘add new car’ feature:

  1. One method responds to HTTP GET, and simply returns the view that holds the HTML Form.
  2. The other responds to HTTP POST, and works with the data manager class to

Both methods are named “Create”. The second method is preceded by the [HttpPost] attribute, and has a ‘car add’ view model parameter. Also, the second method uses model validation.

Remember – follow the PRG pattern. The redirect target should be the Index view.

The view will also be named “Create”. You can use the “Create” scaffold template, and the ‘car add’ view model class.

.

Other pages (about, contact)

Personalize them appropriately.

.

Submit your work on My.Seneca/Blackboard

The instructions are similar to those from Lab 1. Here’s a brief version:

1. Make a copy of your work, and remove the packages, bin, and obj folders.

2. Create a compressed (zip) version of your solution’s folder.

3. Login to My.Seneca/Blackboard

4. Navigate to the BTI420 Assignments area, and use the link to upload/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: