Blazor

In order to start creating the Blazor Web application. You will need to be using the lastest version of Visual Studio(2019). To start the project, select file and create a new project to bring up the menu displayed. In the menu select Blazor Webassembly. Select the file location you would prefer. Blazor Server App utilizes both the server and the client side dependencies as for Blazor WebAssembly App utilizes and offloads the information to the Clientside. In this case we chose the Webassembly.

When creating a new blazor project with the most recent updates. Every Blazor application automatically generates a demo applcation inside. You will need to remove the demo applications and saving the neccessary parts.

Two of the pages as well as two of the C# classes shown above should be removed since it won't be neccessary for creating your site. Images on the pages must be on the WWWROOT but for anything for the background images in the css that image folder must be placed in the CSS folder. If you do not add the image folder in the WWWROOT, Your images would either not show up or an error would occur. Remove or comment the demo CSS or delete the css entirely and create a new one.(Entirely up to you) To add a class you will need to name your class file (the name of the file).razor.cs. The name of the file should be the same as the original razor file.

Now you can do utilize your creativity to make your application however you please!

For our application we created a gift shop inventory management web application. It allows users to add new things that are in stock, delete items that are out of stock and won’t be stocked, and modify the item to show that we are going to restock but isn’t available currently and also show if things are on sale. Also allows you to change the name and or prices of the items. As well as filtering and searching through our inventory.

The Add item takes an integer input to make objects, checks if the image textbox is empty, if it does the program will add it to the items list and if it does not, it changes the image string with the name of the object. The Modify item method when the button we made is clicked, fills the form with the id of the product we wished to modify and once the user is done changing the item, the properties will be overwrittened to become new ones.

The remove method above loops through each list and finds the item that needs to be removed and removes it from the index. One of the search methods we implemented was the price from "high to low"and "low to high" in which filters through each object and rearranges it base on price.

This Search filter through what the user inputs in the search bar based on the name of the item.

This is the CSS we used to style and make our site a little unique and pretty. Without the use of the cascade styling sheet, our site would be very boring.

I hope after reading this, everyone has learned something they didn't know about this framework. Take the skills you acquired and turn it into the next big thing. Here are some resources that can potentially help you on that road.