Task 1: Review the Starter Code
One essential programming skill that you will develop is the ability to read and understand someone else’s code. This assignment begins with you practicing exactly that. Make sure you carefully examine the provided code BEFORE you start changing things.
Trying to “fix” a code sample before understanding how it works leads to confusion, frustration, and a broken program. DO NOT SKIP the code review!
Carly created a ASP.NET MVC application and filled in some features. She
JobData to generate a List of
Job objects based on
your TechJobs-OO work, and she added controllers and views for a “Home”,
“List”, and “Search” page.
JobData now also builds Lists for the
The Data and Model
The “model” is contained in the
JobData class, which is in the
folder. We put “model” in quotes, since this class isn’t a model in the
typical, MVC/object-oriented sense (maybe a better name for this assignment
would be TechJobs VC).
JobData class serves the same purpose as before—it reads data from
job_data.csv file and stores it in a format we can use. In this case,
that format is a
Job objects, which is stored in the
Models folder. Note that Carly changed the
path to the
job_data.csv file to store it in the
Data folder too.
You’ll use some of the static methods provided by
JobData in your
controller code. Since you’re already familiar with these, we’ll leave it to
you to review their functionality as you go.
Controllers folder, and you’ll see that you have three
controllers already in place. Let’s look at these one at a time.
This class has only one action method,
Index(), which displays the home page
for the app. The controller renders the
Index.cshtml template (in
Views/Home) and provides a fairly simple view.
This controller provides functionality for users to see either a table showing
all the options for the different
Job fields (
PositionType) or a list of details for a selected
set of jobs.
If you look at the corresponding page at
/list, you’ll see an “All” column
in the table. However, this option doesn’t work yet, and you will fully
implement the constructor as you work on this project.
At the top of
ListController is a constructor that populates
TableChoices with values. These Dictionaries play the
same role as in the console app, which is to provide a centralized collection
of the different List and Search options presented throughout the user
ListController also has
methods. The first method
renders a view that displays a table of clickable links for the different job
categories. The second method needs to render a different view that displays
information for the jobs that relate to a selected category. Both of the
action methods can obtain data by implementing the
JobData class methods.
Jobs() will work similarly to the search functionality, in
that we are “searching” for a particular value within a particular field and
then displaying jobs that match. However, this is slightly different from the
other way of searching in that the user will arrive at this handler method as a
result of clicking on a link within the
Index.cshtml view, rather than via
submitting a form.
Currently, the search controller contains only a single method,
It simply renders the form defined in the
Later in this assignment, you will receive instructions for adding a second handler to deal with user input and display the search results.
Let’s turn our attention to the views.
The application uses a few Bootstrap classes to style the view content and job tables. You won’t have to explicitly add any Bootstrap classes to your views in this assignment, but it’s a great way to make your sites look good with minimal work.
The List Views
Turn your attention to
List/Index.cshtml. This page displays a table of links
broken down into several categories. Data from
ColumnChoices is used to
fill in the header row, and information stored in
the link text.
The most interesting part of this template is how we generate the links:
TableChoicesis a Dictionary from
ListController, and it contains the names of the
Jobfields as keys (
Employer, etc.). The value for each key is a List of
- In line 17,
categoryrepresents one key/value pair from
TableChoices, and in line 21,
itemrepresents one entry from the stored
- We’ve seen some of the syntax to generate a link within a Razor
template, but we don’t have as much experience with
asp-route-value.This syntax causes Razor to dynamically generate query parameters for our URL.
In line 24, we set these parameters by using
values of these parameters are determined dynamically based on
@item. Since these values come from
TableChoices, the keys will be
location, etc. The
values will be the individual elements from the related
List. When the
user clicks on these links, they will be routed to the
Jobs() action method in
ListController, which looks for
By the end of your work on this project, clicking on one of the links display a list of jobs that relate to the
choice, via the
Jobs() action method.
For now, click one of the Location links. This sends a request as we outlined above, but doing so only leads to an error.
Once you have completed the project, the page you will see at
/list/values?column=location&value=... is generated by
Jobs.cshtml template. It has a similar structure as
but the table consists of only one column.
Select “Kansas City” from the list of locations, and then check the address bar of your browser:
%20 for us, to represent a space, but this may
actually be hidden in your browser’s address bar.
The Search View
Finally, click on Search from the home page, or the navigation bar, and open
Search/Index.cshtml in Visual Studio. You’ll see a search form (in both the browser
and template file) that gives the user the option of searching by a given
Job field, or across all fields. This is an exact visual analog of our
This template will be used to display search results, in addition to rendering the form. This will give the nice user experience of easily searching multiple times in a row.
Wrap Up the Code Review
Once you understand the controllers and views that are already in place, you’re ready to begin your work.
In Visual Studio, select View > Tasks to pop open a small pane at
the bottom of the window. This list is populated by any code comments that
TODO. You’ll see your tasks listed, and clicking on any one will
open the relevant file.
You may not see a
TODO #4. This is because TODO comments in views do not always show up in the Task List.
If it is not there, check out the
Search/Index.cshtml view to locate it!