Assignment 2 Guide – Part 1
Getting started
- Download the assignment 2 resources files
- Copy and replace the updated styles.css
- You may find some in some situations images and the css does not display. To fix this add a slash at the start of the path for images and also for the css files
i.e. for the Layout.cshtml
<link rel=”icon” href=”/img/Fevicon.png” type=”image/png”>
<link rel=”stylesheet” href=”/lib/twitter-bootstrap/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”/lib/font-awesome/css/font-awesome.min.css”>
<link rel=”stylesheet” href=”/css/style.css”>
Database
- In the product model uncomment the tag for price as we need to set the db column type
- Right click on the error and import the annotation library
Install Database Packages
- Add the database packages and tools by following Listing 7.12 to 7.13 in Chapter 7 of the text (see note below if there are problems)
- Note that you MUST change into the project folder (the one with the yourprojectname.csproj)
- You cannot run this from the solution folder
Note: If you DO NOT have the 3.1 SDK installed it may complain in Listing 7.12, depending what SDK you specified
- If this occurs try the following steps
- Use dotnet –list-sdks or dotnet –info to check your version
- Then open global.json in the root folder and check the version
- Change global.json from 3.1.x to your later version
“sdk”: {
“version”: “5.0.302” (use your SDK version here)
}
- Note: if you changed the version you MUST run the app to update the project SDK before the next step
- Now you can do Listing 7.12 and Listing 7.13
Migration
- Make sure you hit Save All before running the migrate command
- If the model is not saved it will not see it to build the migration file
- If you have a problem open that the migration file and check that the create database and create table commands are there
- If there is a problem with the migrate, just delete the migrations folder and rerun the migrate command again
- Note that the database itself is not actually created until later
Database Connection
- In Listing 7.14 you need to change the database name and the connection name to suit your project name
“ConnectionStrings”: {
“YourConnectionName“: “Server=(localdb)\\MSSQLLocalDB;Database= YourDbName
DbContext and Repository
- Do Listing 7.15 to 7.20
- Note: You will need to change the namespaces to suit your project in most files that you create from the code in the textbook
- In startup.cs use your connection name
Seed Data
- In Listing 7.21 move the seed data from the Catalogue controller sample data method into SeedData.cs
- Note the different format for the Products.AddRange() command
- Add the seed data call to startup.cs as in Listing 7.22 (this will migrate the database)
- Delete the old sample data method in the Catalogue controller
Test
Run the project and check that the database has been created
- View => SQL Server Object Explorer => SQL Server => (localdb)MSSQLLocalDB … => Databases
- You can also delete the database from here if required (right click on the database)
- Check Close existing connection when it asks
- Then rerun the app to recreate (migrate) the database (in SeedData.cs)
Catalogue
- Adapt the code from Listing 7.23 and inject the store repository into the Catalogue controller
- Change the constructor name from Home controller to CatalogueController
- Don’t forget to delete the sampleData() method if you haven’t already
- Fetch the product list using the repository and pass it to the view
- Note that the repository returns an iQueryable but the view currently expects a List
- So, change the model data type in the view to iQueryable<Product>
Test
- Test that the catalogue page now loads from the database
Catalogue Product Filter
- Follow the steps below to populate the side menu categories dynamically from the database
- First you must add the following to _ViewImports.cs as we will be using our own tag helper
- @addTagHelper *, SportsStore (use your namespace instead of SportsStore)
- Create the Nav component as in Listing 8.6
- For listing 8.7 replace the side menu in the Catalogue view (NOT in _Layout as per the text)
- Delete the <ul> tag and content within it under the Browse Categories heading (head class)
- This generated the old static menu, but we are not using it
- Put the nav component under Browse Categories within the sidebar-categories div
Test
- Run and check that the nav menu displays the sample text in place of the menu
Nav Menu
- Next use Listing 8.8 and 8.9 to add the category buttons to the menu
- For Listing 8.9 note that you have to create both the Components folder and the NavigationMenu sub folder (otherwise it won’t find the view if path is not correct)
- Also in Listing 8.9 change the route parameters to go to the Catalogue controller Index method with the category parameter as shown below
- And remove asp-route-productPage=”1″ as we are not using paging
- Note don’t delete the closing >
- Type these changes into the existing code to match the code below (rather than cutting and pasting the code itself)
<a class=”btn btn-block btn-outline-secondary”
asp-action=”Index” asp-controller=”Catalogue”
asp-route-category=”@category”>
Test
- Run and check that the nav menu contains the categories (it will not filter yet)
Add the Product filter
- Modify the Catalogue controller Index method to filter the products that are displayed using the code below
- Here we are adding the category parameter we added above to the route to the Catalogue Index method parameters and using it to filter the product list from the repository
- Note you will need to import Linq to fix the error
public IActionResult Index(string category = null)
{
ViewBag.pageName = “Catalogue”;
return View(repository.Products
.Where(p => category == null || p.Category == category));
}
Test
- Run and check that the products are filtered by category
Set the Current Nav Item
- In the Nav Component load the current category into the viewbag to set the nav button
- See Listing 8.10 and add the additional line to the Nav Component invoke() method
ViewBag.SelectedCategory = RouteData?.Values[“category”];
- We also need set a route to pass the category back to the Catalogue controller
- We could do it in startup.cs as before
- However, there is a simpler way to define routes in the controller (uses a TagHelper)
- In the Catalogue controller above the index method add the two routes below (one with a category and one without)
[Route(“Catalogue”)]
[Route(“Catalogue/{category}”)]
public IActionResult Index(string category = null)
{ …
- In the Nav Component view file
- View/Shared/Components/NavigationMenu/Default.cshtml
- Add the code to highlight the current category using the category we stored in the viewbag
- Change
<a class=”btn btn-block btn-outline-secondary”
to
<a class=”btn btn-block
@(category == ViewBag.SelectedCategory
? “btn-primary”: “btn-outline-secondary”)”
- If the images disappear from the Catalogue page add a slash in front of the image path in the View/Shared/ProductSummary.cshtml
<img class=”card-img” src=”/img/product/@Model.Image” alt=””>
Test
- Run and check that the current category is highlighted
Move on to the Assignment 2 Guide Part 2
