Assignment2 Instructions
Assignment2 Instructions
For this project, you will build a multi-page, data driven app with multiple routes like the one shown
below.
The Home page on initial load
I
N
T
E
R
The Home page with a topic selected
I
N
T
E
R
The Home page with a topic and category selected
Specifications
When the app starts, it should display a list of all frequently asked questions (FAQs).
The Home page should have a Bootstrap navbar across the top with links that filter the FAQs by
topic. One of the links should clear any filtering and display all the FAQs.
The Home page should have a Bootstrap list group to the left of the list of FAQs with links that filter
the FAQs by category.
Here’s how the filtering should work:
o On initial load, or when the user clicks the All FAQs link, the app should display
all the FAQs.
o When the user clicks a category link, the app should filter FAQs by category. If
the user subsequently clicks a topic link, the FAQs will be filtered by topic and by category.
o When the user clicks a topic link, the app should filter FAQs by topic. If the user
subsequently clicks a category link, the app should filter the FAQs by topic and by category.
Use custom routes to create the links for filtering. Use static segments to distinguish the topic route
from the category route.
The FAQ model class should have a primary key that’s generated by the database.
The Topic and Category model classes should have primary keys that are strings. Use primary key
values that will be user friendly in a URL.
The FAQ class should have foreign key fields that relate it to the Topic and Category classes.
Use EF Code First and migrations to create a database based on your model classes. Include seed data
for the topics, categories, and FAQs. (You can copy the data shown above, or you can create your
own topics, categories, and FAQs.)
The URLs for the app should be lowercase with trailing slashes.
I
N
T
E
R
Project 6-2 Update the FAQ app
For this project, you will update the app from project 6-1 to use attribute routing.
The Home page with a topic and category selected
Specifications
The URLs for the app should no longer include the “home/index” segments.
Here are the URLs the app should use:
On initial load or no filtering (All FAQs):
https://localhost:5001
Note: To make this work, you need to apply multiple attributes to the Index() action method of the
Home controller, including an attribute for the default route. Be sure to apply the attributes in the
correct order, from most to least specific.
I
N
T
E
R
Project 7-1 Build the MyWebsite app
In this project, you’ll build a multi-page web app with multiple views, nested layouts, layout sections,
and a Help area. It will have the directory structure and user interface that’s shown below.
The directory structure
/Areas
/Help
/Controllers
/HomeController.cs
/TutorialController.cs
/Views
/Home
/Index.cshtml
/Shared
/_HelpLayout.cshtml
/Tutorial
/Page1.cshtml
/Page2.cshtml
/Page3.cshtml
/_ViewImports.cshtml
/_ViewStart.cshtml
/Controllers
/HomeController.cs
/Views
/Home
/About.cshtml
/Contact.cshtml
/Index.cshtml
/Shared
/_Layout.cshtml
/_ViewImports.cshtml
/_ViewStart.cshtml
I
N
T
E
R
The three Tutorial views in the Help area
I
N
T
E
R
The Contact view
Specifications
Create an app with the controllers and views shown above. Review chapter 6 for how to set up
routing for an area. The app doesn’t need model classes, so you don’t need to create a Models folder.
Use a Razor layout to store the <html>, <head>, and <body> elements. Use a Razor view start file to
apply this layout to the views in the app, and a Razor view imports file to add using statements.
The layout should have a Bootstrap navbar and mark the current link in the navbar as active.
The layout should have a section within a <header> element that’s required. Each view that uses the
layout should use that section to add an <h1> element with an appropriate message for that view.
I
N
T
E
R
Use a nested Razor layout in the Help area that uses the main layout. Use a view start file to apply
this nested layout to the views in the Help area, and a view imports file to add using statements.
The nested layout should have Bootstrap navigation links styled as tabs, and it should mark the
current tab as active.
The default area should have Home, Contact, and About pages. The Contact view should get a
collection of contact data from the Home controller and display that data to the user.
The Help area should have Home and Tutorial pages. The Index() action method of the Tutorial
controller should determine which view file to use based on the value of the id segment of the route.
I
N
T
E
R
Project 8-1 Build the Trips Log app
For this project, you will build a data-driven web app that uses view models to pass data from controllers
to views, the ViewBag object to pass data from views to the layout, and TempData to persist data
between requests.
I
N
T
E
R
Specifications
When the app starts, it should display trip data and an Add Trip link.
The layout for this web app should display a banner at the top of the page, and a subhead below it.
However, the subhead should only display if there’s text in the ViewData property for it.
When the user clicks the Add Trip link, a three page data entry process should start.
On the first page, the user should enter data about the trip destination and dates. The
Accommodations field on this page should be optional, and the rest should be required.
The second page should only display if the user entered a value for the Accommodations field on the
first page. On this page, the user should enter data about the accommodations. The accommodation
value the user entered should display in the subhead, and the fields should be optional.
On the third page, the user should enter data about things to do on their trip. The destination the user
entered on the first page should display in the subhead, and the fields should be optional.
When the user clicks the Next button on the first or second page, the web app should save the data
posted from the page in TempData. Use this data to get the user entries to display in the subheads as
needed, but make sure any data that needs to be saved to the database persists in TempData.
When the user clicks the Save button on the third page, the web app should save the data posted from
the page and the data in TempData to the database. Then, the Home page should display with a
temporary message that the trip has been added.
When the user clicks the Cancel button on any of the Add pages, the data in TempData should be
cleared and the Home page should display. You can use this statement to clear the data:
TempData.Clear();
To keep things simple, store all fields for the trip in a single table like this:
I
N
T
E
R