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

No Fields Found.