BTI420 Lab 3

The theme of this lab is to get more practice with HTML Forms. You will also use scaffolding, HTML Helpers, and SelectList objects.

.

BTI420 Lab 3 – Due on Tue Feb 3

Due date: Wednesday, February 4, 2015, at 5:00pm ET

Grade value: 3% of your final course grade

.

Objective(s)

Get data from a user from single-select and multi-select HTML Forms elements.

Use and configure scaffolding, and learn when it is appropriate to do so.

Use and configure HTML Helpers, and learn when it is appropriate to do so.

.

Introduction to the problem that you will solve

We need a web app that will survey BTI420 students about their learning experiences in the course.

The app will have three pages (views):

  1. A page with an HTML Form that enables a student to complete a survey
  2. A page that will display read-only details for a completed survey
  3. A list of completed surveys

Read through this assignment fully before starting work on it. That way you will know what’s coming.

Studying the “Cars” code example will be useful, because it matches nicely to this assignment. This assignment goes a little further however, because its HTML Form has ‘select’ elements.

.

Get started with Lab 3

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

The following is a point-form list of the design and coding tasks:

  • Plan the app’s architecture and code modules
  • Assemble and initialize the code modules
  • Create the design model class, and the view model classes
  • Work on the data manager class
  • Work on the controller class and its views

They are described in more detail below.

As you make incremental progress, test your work. Build/compile often.

.

Plan the app’s architecture and code modules

Recently you learned about the recommended layered architecture and the System Design Guidance diagram.

Use and apply that knowledge to simply diagram the code modules that your app will need.

.

Assemble and initialize the code modules

Use the NuGet package manager, and add the Biggy JSON package, and the AutoMapper package.

In the Models folder, create the DesignModelClasses.cs source code file.

In the Controllers folder, create the Surveys_vm.cs source code file, which will hold view model classes.

Also in the Controllers folder, add a new controller, named “SurveysController”. Use the scaffold template named “MVC 5 Controller with read/write actions”.

.

Create the design model class, and the view model classes

The design model class will be named Survey.

It will have at least these properties:

  • Id – int – object identifier
  • Name – string – the student’s name
  • Age – int – the student’s age
  • Courses – collection of strings – the courses in which the student is registered
  • PaceOfLearning – string – the pace of learning (slow, fast, etc.)
  • FavouriteTopics – collection of strings – the student’s favourite topics
  • Comments – string – free-form and possibly lengthy comments

Notice these property names. They must be used when you create view model classes, and write code for the HTML Form on the ‘create’ view.

Notice the two ‘collection’ properties. Each property is declared like this:

public ICollection<string> Courses { get; set; }

In a design model class, you must initialize the collection, in the (default) constructor. Initialize it to a List<T>.

Your class will probably look similar to the following:

design-model-class

.

View model classes

Your app will need some view model classes, including the obvious ones:

  • ‘Add survey’ – for incoming data, from an HTML Form
  • ‘Full details’

Create the ‘add survey’ class first, and name it SurveyAdd. Copy-paste the properties – except for the identifier property – from the design model class.

In a view model class, the collection property types should be IEnumerable<T>, so make that change.

You must also create a (default) constructor, to initialize the collection properties, to List<T>.

Your ‘add survey’ class will probably look similar to the following:

vm-class-survey-add

.

Next, create the ‘full details’ class, and name it SurveyFull. It will inherit from SurveyAdd. It will have one more property, the identifier. Your ‘full details’ class will probably look similar to the following:

vm-class-survey-full

.

Your app will also need an ‘add survey form’ view model class, with properties that help build the user interface in the view object. More about that below.

.

Work on the data manager class

The Manager class will expose these suggested members:

  • A property or method that returns all items in the collection
  • An ‘add new item’ method
  • A method that returns a specific item, based on its identifier

The data store will store and manage objects based on the “Survey” design model class.

The Manager class will ALWAYS accept and deliver objects based on view model classes. The Manager class will NEVER expose design model objects through its public interface.

Let’s get started.

.

Constructor

In the constructor, initialize the connection to the data store.

Also, for this assignment, you can configure the AutoMapper maps.

manager-constructor

.

Private fields that point to the data store and collection

Add private fields that point to the Biggy data store and its collection of survey objects.

manager-private-fields

.

Property or method that returns all items in the collection 

Add a property – or a method – that will return all items in the collection. Either will work. The example below shows how you would use a read-only property, which has only a getter.

 

manager-property

.

Method to add a new survey

Add a method that accepts a ‘new’ view model object (SurveyAdd), and adds its data to the collection.

Use AutoMapper. The Mapper.Map<TDestination>(TSource) statement reads like this:

“Map the source object – TSource – to a destination object – TDestination.”

After creating the destination object, when using the Biggy store, we must set the identifier.

manager-add-new

.

Method to return a specific survey by its identifier

Add a method that accepts an identifier, and returns the matching object (or null).

Use the “SingleOrDefault” extension method. This method requires a lambda expression, to match the incoming identifier with the “Id” property of the Survey class. If needed, refresh your knowledge of the topic we first covered on January 20.

manager-get-one

.

Work on the controller class and its views

The scaffolded survey controller (added earlier) includes methods that match to this assignment’s specifications:

  • Index() – list of surveys
  • Details() – one specific survey
  • Create() – pair of methods to handle the ‘add new’ use case

You can delete the other methods in the source code.

A reference to the Manager is required. Near the top of the class, before the Index() method, add a statement that declares and initializes the Manager.

controller-declare-manager

.

Next, you will add scaffolded views.

.

Index view

The easiest way to add a view for a controller method is to position the cursor anywhere in the method’s code block, then right-click and choose “Add View”.

Yes, the view name will be “Index”. Choose the “List” template.

For the model class, choose “SurveyFull”.

add-view-list

Inspect the view’s markup and code expressions. It will render an HTML <table>, with data from a collection that you pass in.

How do you pass in the collection? Edit the controller’s Index() method to complete this task.

The following shows an example of this view. Click to open full-size in its own tab/window:

running-index-view

.

When you created your own view, you noticed that the collection properties were not included in the HTML <table>. You must add the columns yourself.

First, add the table header <th> columns, similar to the following:

view-index-th-columns

Next, add the table cells <td>, similar to the following:

view-index-td-columns

.

Details view

Yes, the view name will be “Details”. Choose the “Details” template.

For the model class, choose “SurveyFull”.

add-view-details

If you inspect the view’s markup and code expressions, you will see that it will render content from an object that you pass in.

Edit the controller’s Details() method to fetch the desired object, then pass it to the view.

The following shows an example of this view. Click to open full-size in its own tab/window:

running-detail-view

.

When you created your own view, you noticed that the collection properties were not included in the HTML. You must add the elements yourself:

view-details-render

.

Create view

This is an important topic, so it deserves its own section, next…

.

“Create” view, with HTML Form, and <select> elements and <input> group(s)

The ‘create survey’ use case will display a form that looks similar to the following. Click to view full-size in its own tab/window:

running-create-view

.

Before adding the view, you should understand the concepts and techniques described in the document titled:

ASP.NET MVC view model class with SelectList

For this assignment, the HTML Form will include three list/group elements:

Courses – a group of check boxes; the user can check/mark zero or more

PaceOfLearning – a drop-down list; the user can choose one of the options

FavouriteTopics – a multi-select list box; the user can choose zero or more

The data that appears in these elements will be programmatically generated. From where? The Manager class.

Write methods that will return string collections:

manager-ui-data

.

We need to pass this data to the view. How?

We need a new view model class that holds this data. The view model class has SelectList properties, which nicely bind to <select> elements and <input> groups.

In the view models source code file, copy the properties in the SurveyAdd class, and add them to a new class named SurveyAddForm. As its name suggests, its shape will match the needs of the view’s HTML Form.

At the top of the Surveys_vm.cs source code file, add another ‘using’ statement:

using System.Web.Mvc;

Next, change the type, to SelectList, for these properties:

  • Courses
  • PaceOfLearning
  • FavouriteTopics

.

vm-class-survey-add-form

.

Next, in the controller method that handles the ‘show form’ request, configure one of these objects, and pass it to the view:

controller-create-show-form

.

Finally, in the view, render the check box group, the dropdown list, and the select list:

view-create-select-group-render

.

One more thing… You need to render the <textarea>. Replace the text box (EditorFor…) for the Comments property, with a standard <textarea> element:

view-create-comments-render

.

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: