Add a field for the todo items in the block.Return to the Todo component and perform the following tasks:
Use the Copy button in the preceding code block and replace the entire contents of the file that Visual Studio generates.
Remove the namespace that Visual Studio generates for the class.
If using Visual Studio to create the TodoItem.cs file and TodoItem class, use either of the following approaches: Use the following C# code for the TodoItem class. Each time a file is saved, the app is automatically rebuilt, and the page in the browser is automatically reloaded.Īdd a TodoItem.cs file to the root of the project (the TodoList folder) to hold a class that represents a todo item. After the app is running, visit the new Todo page by selecting the Todo link in the app's navigation bar, which loads the page at /todo. In the navigation element content ( ) of the NavMenu component, add the following element for the Todo component.īuild and run the app by executing the dotnet watch run command in the command shell from the TodoList folder. The NavLink component provides a cue in the app's UI when the component URL is loaded by the app. Layouts are components that allow you to avoid duplication of content in an app. The NavMenu component is used in the app's layout. Open the Todo component in any file editor and add an Razor directive to the top of the file with a relative URL of /todo.Īdd the Todo component to the navigation bar. Open the Pages folder and confirm that the Todo component file name starts with a capital letter T. Razor component file names require a capitalized first letter.