- Lab
- Core Tech
![Labs Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
Applying Data Binding to a Web Page with Blazor
For this code lab, you will add interactivity and logic to a static starter app using Blazor data and event bindings. This will include building a simple form to create new Todos, adding dynamic search features, creating an interactive master-detail view, and updating Todos to mark them as done.
![Labs Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
Path Info
Table of Contents
-
Challenge
Create a Form to Add New Todos
Globomantics is a small insurance company looking to expand their development tools and frameworks. Their IT department would like to create a simple Todo app to track unresolved miscellaneous items, while evaluating Blazor as a new technology option.
For this lab you will add interactivity and logic to a static starter app using Blazor data and event bindings. This will include building a simple form to create new Todos, adding dynamic search features, creating an interactive master-detail view, and updating Todos to mark them as done.
Important Tips:
- The tasks that follow apply to the Globomantics 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 or reveal items hidden at certain breakpoints.
- 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
Handle the Form Submission
Next we will add a method and logic to handle the submission of the form we created in the previous step. This will allow new Todos that are created to show up in the list of Todos on the home page.
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 theRun
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
Enable Search through Event Bindings
Next we'll add event bindings to enable real-time search in our app. This will allow users to rapidly filter and find Todos.
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 theRun
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
Create the Todo Detail View using Parameters
Next let's complete the master-detail view by using component parameters. This will allow the user to view the details of the selected todo.
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 theRun
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
Manage the Todo Status using Callbacks
Finally, let's enable users to mark Todos as complete. This change will also be reflected in the parent list in real-time.
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 theRun
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.