A Blazor WebServer Application with ASP.NET
3 min readJun 17, 2022
Ways to create
- Firstly, open Visual Studio 2022 and create a new project with “Blazor Server App” as shown below,
- Give it a nice name and click CREATE.
- Now we have to remove the weather forecast service stuff from “Program.cs” and delete the Counter.razor, FetchData.razor and Index.razor files from Pages folder. And also remove all the files from Data folder of our project folder and thus remove every refrence you can find, also those in the navbar.
- Now inside the Shared folder, open up “NavMenu.razor” remove the un-necessary nav-links and replace Home with “Budget” as we are working on this topic and set the href attribute to budget.
- Now we have to create a Razor component inside our Pages folder (right click on Pages , select Add and click on Razor Component) and name this file and create it.
- Now here we have to set 2 add page directive, one as “/” and the another as “/budget”. It means that when we are in the default page or in the /budget page we will redirect to the same page i.e., the main page.
- Now create a class in the Data folder and name it. This is the model in which we can keep track of all the expenses. In my case I named it “Entry.cs”
- We need a way to save entries into our budget book and to get entries from our budget book, so lets create a service by creating a class in data folder and name it as a service file. In my case I named it “BudgetBookService”
- Now we need to register this service into the dependency injection so that we can use of it later, so on “Program.cs” and add BudgetBookService as a singleton i.e.,
- In the “Budget.razor” page we have to add the inject directive to get our BudgetBookService into the page so that we can make use of it.
- Now after coding all the required scenerios “Budget.razor” file looks like,
- That’s all for creating this project (Expense Tracker)
Thank You