BTI420 Lab 3

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

.

BTI420 Lab 3 – Due on Fri Jan 31

Due date: Friday, January 31, 2014, at 6:00pm ET

Grade value: 4% 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) that you will add:

  1. List of completed surveys
  2. A form that enables a student to complete a survey
  3. A page that will display read-only details for a completed survey

Optionally, you will create a fourth page, that will support the ‘edit existing’ functionality.

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 3

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

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 a new controller

Create a new controller, named SurveysController.

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 write code for the controller methods and the views.

.

Data for your app

Data for your app will be stored in ASP.NET Session State. Use the technique you saw in the “ScaffoldIntro” example app to create and configure a ‘manager’ class.

As in the past, you will create a source code file in your Controllers folder to hold the app’s data classes. Its suggested name will be “Surveys_vm.cs”.

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

.

View model class design transition info

You have learned that the purpose of a view model class is to serve the needs of a use case. The goal is to design a view model class so that it exactly matches the use case’s data. Here’s what this means:

  • We will design a view model class to hold data needed for an HTML Form
  • We will design a second view model class to hold the data that the user submits to the web app

In a recent BTI420 class session, you learned how to prepare data for HTML Form elements that offer a single-select or multi-select user interface. In this assignment, you will enhance your learning by using a best practice technique. 

.

Add a view model class named SurveyForm

In the Surveys_vm.cs source code file, add a class named SurveyForm.

The purpose of this class is to describe the data that will be sent to the ‘add new survey’ view.

Add another ‘using’ directive, because we will reference a new type:
using System.Web.Mvc;

The SurveyForm class should have the following properties:

  • Name – string – the student’s name
  • Age – int – the student’s age
  • CourseItems – collection of “SelectListItem” – course code strings
  • PaceOfLearningItems – collection of “SelectListItem” – pace of learning (slow, fast, etc.) strings
  • FavouriteTopicItems – collection of “SelectListItem” – topic strings
  • Comments – string – free-form and possibly lengthy comments

What’s a SelectListItem? An object in a SelectList container. A SelectList can be ‘bound’ to an HTML Forms ‘select’ element (e.g. drop-down list, list box, as well as check box group, and radio button group). A SelectListItem has these typical useful properties:

  • Text – the displayed/visible text of the item
  • Value – the programmatic value of the item
  • Selected – the current ‘selected’ state of the item

.

Add a view model class named Survey

In the Surveys_vm.cs source code file, add another class named Survey.

The purpose of this class is to describe the input data that will be sent by the user after submitting a completed survey. We will also use this same class to display a survey’s data on a ‘details’ page/view.

The Survey class should have the following 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 write code for the HTML Form on the ‘create’ view.

.

Write code in your ‘manager’ class

In the Controllers folder, create a new source code file named “Manager.cs” to hold the new “Manager” class.

As noted above, follow the technique in the ScaffoldIntro class to configure a “Surveys” collection property, and save the collection to session state.

The ‘manager’ class will need three more collection properties to serve the needs of the ‘add survey’ task. The “SurveyForm” view model class (above) has SelectListItem collections. Add the same properties to this ‘manager’ class, so that they can be initialized with useful data in the next step.

In the constructor, initialize each collection with useful data. For example, the “CourseItems” collection must hold the course codes for the other courses in BSD Semester 4. Here’s an example:

manager-init-sample

Still in the constructor, add useful data for the other two collections. Look at the example web app for the other strings.

Finally, write code for an “AddSurvey” method. It will accept one parameter, a “Survey” object. The method’s code will add the new survey object to the Surveys collection, and save the collection in session state.

.

Add a new survey (controller and view)

In the surveys controller, add a statement that gets a reference to the ‘manager’ object.

Next, add a pair of methods that will handle the ‘add new survey’ task. Continue to use the best practice technique:

  • The method that handles HTTP GET is named “Create” and has no parameters
  • The method that handles HTTP POST has the same name, but has a parameter (of type Survey), and is prefixed with the [HttpPost] attribute

.

Prepare the package of data to send to the ‘add new survey’ view

The idea is to create and prepare a package of data to send to the view. The package will have all the data needed to build the check box group, the drop-down list, and the list box.

Therefore, initialize a new SurveyForm object. Configure its properties with values from the ‘manager’ class.

Then, send this object to the view.

.

Create and write code for the view

Add a view that will display the HTML Form. We strongly recommend that you do NOT use the scaffolding feature for this view. Remember to add the ‘model’ declaration as the first line of code in the view.

“Name” and “Age” are rendered as standard text boxes.

For the CourseItems collection, render a check box group (probably using foreach). Make sure that you set the “value” attribute of each input element with the course “Text” property.

For the PaceOfLearningItems collection, render a drop-down list. You can use the HTML Helper, with code similar to this:
@Html.DropDownList(“PaceOfLearning”, Model.PaceOfLearningItems)

For the FavouriteTopicItems collection, render a list box. You can use the HTML Helper. We suggest that you set the list box size to match the number of items in the collection, 10. In pure HTML, that would be done with a size=”10″ attribute. To inject that when using the HTML Helper, use an overload similar to this:
@Html.ListBox(“FavouriteTopics”, Model.FavouriteTopicItems, new { size = “10” })

For the Comments string, render a text area. You can use the HTML Helper.

Notice that you are rendering all of the “Survey” view model class properties (except the Id property). That means an object that looks like a “Survey” object will be submitted by the user.

As noted earlier, the HTML Form element “name” property MUST match the property name of the “Survey” view model class, and NOT the “SurveyForm” class.

.

Write code to handle the ‘add new survey’ task

In the appropriate controller method, add code to add the new survey object:

  • ensure that model state is valid
  • call the ‘manager’ method to add the new survey

Then, redirect to the ‘details’ view (that you will write below). A typical statement that injects the new object’s identifier is similar to this:
return RedirectToAction(“details”, new { Id = newSurvey.Id });

.

Display a list of surveys (controller and view)

In the surveys controller, edit the Index() method. Get the surveys collection from the ‘manager’ object, and send the collection to the view.

.

Create and write code for the view

Add a view to display a list of surveys. You SHOULD use the scaffolding feature. Complete the ‘add view’ dialog as follows:

  • View name: Index
  • Template: List
  • Model class: Survey (Lab3.Controllers)

That will generate a view with most of the properties. You MUST add these missing properties: Courses and FavouriteTopics.

First, add HTML table head elements in the appropriate place.

Then, in the foreach statement (that renders the objects), add HTML table cell elements:

  • Courses – use another foreach to render the course codes, separated with line breaks
  • FavouriteTopics – use another foreach to render the topic strings, separated with line breaks

Finally, you should probably delete the code that generates a “Delete” link, because we don’t have to implement that in this assignment.

.

Display details for a specific survey

In the surveys controller, add a Details() method. It will accept an int parameter named Id.

As you have seen in the ScaffoldIntro example web app, write code for the method that will attempt to locate the desired survey object by its identifier.

If successful, then send the object to the view.

(Otherwise, redirect to the ‘index’ view.)

.

Create and write code for the view

Add a view to display this specific survey. You SHOULD use the scaffolding feature. Its template will be “Details”.

That will generate a view with most of the properties. As above, you MUST add the missing properties.

Study the view code, and add your new statements in the appropriate places.

Here’s a tip: Use the string.Join() method to generate a nice-looking comma-separated string for courses (and for favourite topics). If Model.Courses has the collection of courses, you would render that with code similar to this:
@string.Join(“, “, Model.Courses.ToArray())

.

Configure (fix) navigation in your web app

Add links to the new page hierarchy 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 surveys yet? As described in Lab 2, you can add a simple “if” statement block to wrap the table.

Also, if you want the practice now, you can implement 1) full edit functionality, and 2) full delete functionality. Both require methods in the ‘manager’ class. See the ScaffoldIntro code example for guidance.

.

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 “Lab3″ 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

.

.

.

.

.

.

.

.

.

.

  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: