- Lab
- Core Tech
![Labs Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
Building Web Pages using Blazor
![Labs Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
Path Info
Table of Contents
-
Challenge
Build the Pages and Navigation
Wired Brain Coffee is gathering feedback about their menu to see which items are most liked by consumers. They would like to create a basic web page that allows customers to view and vote on a list of products. A link to this simple web page will be emailed to their existing customers.
For this lab, you will create a basic web page that retrieves a simple list of products and displays them in a table. This will include building the initial pages and components of the application, adding basic interactivity for users to be able to "Like" products, ordering the rows by popularity, and showing or hiding values.
Helpful Tips:
- The tasks that follow apply to the WiredBrainCoffee folder in the project workspace.
- Only run checks (pressing a checkbox) one at a time to avoid conflicts between tests
- After completing the tasks below, click the Run button in the lower right of the console to view your progress. You may need to press the refresh button in the browser pane to see your latest changes.
- You can also drag the dividers between panes to resize the workspace to your liking. Widening the browser pane may provider a better view of the app.
- After viewing your work, you can click into the Terminal and press
ctrl + c
to stop the app. - If you make changes to your code while the app is running, you'll first need to stop the app and then re-run it to see your changes. Remember, after completing these tasks, you can click the Run button in the lower right of the console to view your progress. You may need to press the refresh button in the browser pane to see your latest changes. After viewing your work, you can click into the Terminal and press
ctrl + c
to stop the app.
When all of your tasks have been verified successfully, click the right arrow button below to move on to the next step!
-
Challenge
Create the Menu Component and Classes
In this step we will create the Menu Component and related classes to begin displaying products to vote on. This will be the main component we'll be working with for the rest of the lab.
Reminder: Ensure your project is not running when trying to verify or mark tasks as complete. This can be done by pressing the
ctrl + c
key combination in the Terminal window. After completing these tasks, click the Run button in the lower right of the console to view your progress. You may need to press the refresh button in the browser pane to see your latest changes.After viewing your work, you can click into the Terminal and press
ctrl + c
to stop the app. Then press the arrow at the bottom of this task pane to move on to the next step. -
Challenge
Retrieving and Displaying Data
Next we'll retrieve and display the product data in our Menu Component. This will allow users to view the items, and eventually vote on the ones they like the most.
Reminder: Ensure your project is not running when trying to verify or mark tasks as complete. This can be done by pressing the
ctrl + c
key combination in the Terminal window. After completing these tasks, click the Run button in the lower right of the console to view your progress. You may need to press the refresh button in the browser pane to see your latest changes.After viewing your work, you can click into the Terminal and press
ctrl + c
to stop the app. Then press the arrow at the bottom of this task pane to move on to the next step. -
Challenge
Working with Events and Dynamic Data
Next let's make the product page more dynamic. We'll allow users to vote on the products they like, and reorder them based on the number of votes. We'll also conditionally show and hide content to the user.
Reminder: Ensure your project is not running when trying to verify or mark tasks as complete. This can be done by pressing the
ctrl + c
key combination in the Terminal window. After completing these tasks, click the Run button in the lower right of the console to view your progress. You may need to press the refresh button in the browser pane to see your latest changes.Congratulations! If you've completed all of the tasks up to this point, you've completed the lab. Be sure to check out other Blazor content on Pluralsight to continue learning.
What's a lab?
Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.
Provided environment for hands-on practice
We will provide the credentials and environment necessary for you to practice right within your browser.
Guided walkthrough
Follow along with the author’s guided walkthrough and build something new in your provided environment!
Did you know?
On average, you retain 75% more of your learning if you get time for practice.