Define controllers and views that make use of Bootstrap tabs and layout capabilities

Requirements:

Conestoga College – CP/CPA Programs

Programming MS Web Tech (PROG2230) – Practice assignment #2

Worth 3% of final course grade (3 marks total)

Due: Midnight on Sept 27, 2023

Peer grading & feedback due midnight of the next night

Introduction

The goals of this assignment are for you to:

Define controllers and views that make use of Bootstrap tabs and layout capabilities

Make use of a View Model

Use attribute routing and named views

What you need to do

To complete this in-class assignment you need to do all of the following:

Complete the task as described below

Submit your solution (by midnight of the day of your assignment) as a single zip file to the eConestoga dropbox for the assignment so that ultimately I can associate a grade with it.

Share your solution (again as a single zip file) with the student that has been randomly assigned to be your peer-grader.

Grade the solution, and provide feedback on it, to the student that you have been randomly assigned to grade. To do this you will use a Microsoft Form as a means of submitting the grade and code review feedback to me. See below for the link to that form for this in-class assignment. Please submit your grade and feedback by midnight of the day after the assignment.

Peer-marking Details

First of all, please review the details of the peer-grading-rules document. It is available at the top level of the In-class-assignments folder in eConestoga.

Also, I used a small Python program that randomly generated pairings for this in-class assignment and the resulting Excel spreadsheet that provides these pairings is included in the eConestoga folder for this assignment. Please consult this spreadsheet to know who you are peer-grading and who is peer-grading your solution.

Finally, please use the Microsoft Form linked to in the eConestoga folder for this assignment to submit your grade and feedback to the student you have been randomly assigned to grade.

Your Task

For this assignment you are to develop a simple ASP.NET Core MVC app that allows the user to manage a “student roster” of varying enrollment statuses. That is, the students are categorized by their enrollment status (e.g. full-time, part-time, etc.) and the idea is that the app will use Bootstrap tabs to allow the user to see all the students or see only those belonging to a particular status, e.g. see only part-time students by clicking on the “Part-time” tab. You will also use Bootstrap to layout the page so that the tabs are on the top and below them the students are on the left and the form to add a new student is on the right, except in small-screen mode, where the form should flow below the students. The Bootstrap tabs example we looked at in class will be very helpful for this assignment.

The following is a screenshot of the final solution with “Part-time” tab currently selected:

Beyond using Bootstrap tabs and responsive layout features, the key to this assignment is to bundle up what is needed in the view into a View Model class. In simplest terms, the view needs to know:

The list of all possible tabs

Which tab is currently selected

And the students for that currently selected enrollment status

And possibly, in an adding new student scenario, the new student being added.

Note that the starting solution already defines an entity called Student and a StudentService that manages an in-memory collection of students for you. The student service also provides for you a public static array of strings property that is all the tab names and it is seeded with a few students.

Detailed steps:

Open the starting code solution

Add a class called StudentsViewModel to the folder Models in your solution and define the following 4 public get/set properties:

A list of Student objects that represent the students to be shown for the current tab

Note: the Student class is already defined for you in the Entities namespace/folder.

An array of the strings that represent all the tab names

A string representing the currently active enrollment status (or tab name)

A Student object that represents the newly submitted student when the user is adding a new student using the form

Flesh out the “Student/Items.cshtml” view:

First declare its model to be a StudentsViewModel

The using the Bootstrap row class define 2 structural rows:

The top row is for the tabs.

The bottom row contains the students on the left and a form to add a new student on the right.

With each of these inside a div you can make the layout responsive by specifying that in small-screen mode each of these 2 div’s take up 12 columns but in anything larger than that they take up only 6 columns.

For the top “tabs” row you need to also do the following:

Loop through all the tab names in the array on the view model and in the loop:

Specify a nav-item “li” tag that shows the tab name and is a link to the students for the enrollment status that name represents

However, you will also need to add an if-condition that looks at whether the current tab being iterated over is the currently active tab, and if it is, then add the “active” CSS class in addition to the “nav-link” class.

For the bottom “students & form” row:

On the left just setup an unordered list that loops through the students in the view model.

Or, if the list is empty, just says something like “no students found”

And on the right a form that provide 2 input fields:

A text field that binds to the Name property on the new student

And a dropdown list whose values bind to the EnrollmentStatus property on the new student

Finish the Items action method on the StudentController:

First, enable attribute routing by annotating it with the HttpGet attribute and the URL pattern: “/students/{status?}” where status is the name of a tab/enrollment status and becomes the string parameter to the action method

Note: this now enables you to rename the action method to something more meaningful if you want to. If you do change it though, remember that you will have to update the link on the home page accordingly.

If the status is empty or null or “All” then use the private data field reference to the student service to get all students, otherwise use the service to get students by the provided status.

Use the students, the status, the array of all statuses, and a new empty student object to setup a new view model object and pass it off to the “Items” view

Finally, add another action method on the Student controller to handle the POST requests to add a new student:

Again, enable attribute routing by annotating it with the HttpPost attribute and the URL pattern: “/students” – this means your action method can be named whatever you see fit to choose.

Have it accept a StudentsViewModel object as a parameter that has a property that represents the new student being passed in the POST body

Implement it by using the student service to add the new student and then just redirecting to the other action method to get students

For your convenience I have also created a video demonstrating a running solution so you get a clear picture of what you need to build and it is posted in the eConestoga in-class assignment folder. Also, one final screenshot that illustrates the responsive layout aspect of the solution – here is the solution in small-screen mode:

Grading

Grading of these in-class assignments is a simple 0, 1, 2, or 3 and is and based on the following scale:

Collepals.com Plagiarism Free Papers

Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.

Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS

Why Hire Collepals.com writers to do your paper?

Quality- We are experienced and have access to ample research materials.

We write plagiarism Free Content

Confidential- We never share or sell your personal information to third parties.

Support-Chat with us today! We are always waiting to answer all your questions.