Template Clean Up

Up until this point, you have only been using the one page, the one Index.razor page because it was easier to do so. However, at this point, you should know how to clean up your template because the template contains some examples which you definitely do not need in a real-world project.

So let’s see how to clean it up. Now, my personal preference and my advice to you would be to start with a file. So what you need to do is basically open it all up, like that, and also open the wwwroot. This one you do not need to clean up, per se, but you can delete with the sample-data thing. You can do that. Let’s jump in right here. Click OK, and it’s all gone. You do not need that.

Now, after that, you do not need several more things, first of all, the Counter, then the FetchData. Then you don’t need NavMenu and SurveyPrompt, so let’s delete all of them like that. They are gone now. They are gone, and now we can get into the file-deleting or insides of a file.

So let’s go to the Index.razor the first right here. You see we have all this stuff. You only need to leave that @pagedirective, which– you will soon learn what that all does. And now let’s go to the MainLayout, and MainLayout is really where all your layout is laid out. And that is where the page gets rendered.

You see right here you have this @Body. So this is the way your page will be rendered. So if I delete all this stuff, like that, and like that, and like that, and also this one, definitely, and you leave all that, you will simply have a clean, simple, empty page. So that will be only the page.

Now, before we get to the navigation, I want to show you where it all starts for navigation, and that is in the App.razor. So from this index.html, or index.cshtml– rather, _Host.cshtml– that would be in the Service side– we have this app. And in that app, everything gets rendered.

So, first, we start with the App.razor. All the default navigation stuff is here, and I would urge you not to change anything, except for this lower piece. This one shows up when the page of a route is not found. And then you can also change these layouts. I will tell you about them later. Now let’s jump into some basic navigation.