Question: Project 6-1 Build the FAQ app For this project, you will build a multi-page, data driven app with multiple routes like the one shown below.

Project 6-1 Build the FAQ app 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 The Home page with a topic selected The Home page with a category selected 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. Heres how the filtering should work: On initial load, or when the user clicks the All FAQs link, the app should display all the FAQs. 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. 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 thats 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. Special Note: Please add your Name and last 4 digit of your student number on the Title of the web app like following, Frequently Asked Questions (Jabed Hossain, 1234) 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 When filtering by topic: https://localhost:5001/topic/js/ When filtering by category: https://localhost:5001/category/hist/ When filtering by topic and category: https://localhost:5001/topic/js/category/hist/ 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. Project 7-1 Build the MyWebsite app In this project, youll 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 thats 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

The three Tutorial views in the Help area

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 doesnt need model classes, so you dont need to create a Models folder. Use a Razor layout to store the , , and 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

element thats required. Each view that uses the layout should use that section to add an

element with an appropriate message for that view. 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. Special Note: In the contact page put the contact number consisting with first 4 digit of your student number 519-222-XXXX, here XXXX is first 4 digit of your student number. Use your own Conestoga email id and also instead of your Facebook id use your LinkedIn id.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!