Blazor

Make a project on your computer that runs with .NET

Option 1: using Visual Studio
- Install using Tools -> Get Tools and Features
  - update to latest version of Visual Studio
  - ASP.NET and web development workload
    - Make sure Intellicode is checked
- Create a new Blazor WebAssembly Web App project
- Follow instructions to run a project in Visual Studio below

Option 2: using the command prompt, only requires install of .NET SDK
- Blazor Tutorial - Build your first Blazor app
  - It's better to create a BlazorProjects folder in your OneDrive and copy the path to it to use with cd command

Run a project in Visual Studio

Option 1: through the Client through Visual Studio using the green arrow (you will need to close the browser and run the project again to see changes)
Option 2: through the terminal or command prompt (you only need to save the file in Visual Studio, and for some files refresh the web page, to see changes)
- right click on the Client folder of your project in Visual Studio and click Open in Terminal and enter dotnet watch run
- You may need to put the address (https://localhost:5000/) into your browser
If the above instructions don't work, check for
- .NET SDK (check in Tools -> Get Tools and Features -> Individual components and search)
- The Web Live Preview extension (check in the Extensions menu)

Make a project on GitHub that runs with Azure

Azure Static Web Apps with .NET and Blazor
- One time: Create an "Azure for Students" account. Go to https://azure.microsoft.com/en-us/free/students/ with your Eagle account if necessary then click Start free
- After that: Log in at portal.azure.com
- If you get prompted to upgrade after trying to add Static Web Apps, click the gear icon and go to Directories + subscriptions and select Azure for Students
- In the "Create web app" option in Azure, there's a field which asks for "Web App Name". Whatever you put in there becomes the website URL before .azurewebsites.

Modify a project in Visual Studio

Prerequisite: a project on GitHub that runs with Azure

Open Visual Studio and (one time only) choose Clone repository from the start screen or the File menu.
- Paste the address of your GitHub repository containing your Blazor web app
Open NavMenu.razor from the Client/Shared folder.
- Change "Blazor Starter" to your name.
Open Index.razor from the Client/Pages folder
- Change "Welcome to your new app." to an introduction to you and/or your project. Carefully make any other changes you would like by adding html elements (reference w3schools) and save the file. This can be anything you would want a potential employer to see.
From the Git menu, click Commit, the click Push, enter a message describing what you changed like "changed Hello World", click Commit All
- When you refresh your repository home page on GitHub you should see evidence of your commit and push
- In the Actions tab in your repository you should see that the workflow is running. Once it turns green
Open Counter.razor and figure out how it works
- Update to match the code at https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/modify if necessary
Add a new page to do input, processing, and output. (You could copy and paste an existing page then rename it.)
- You can test processing with a regular C# project or with a site like ideone.
  - Output with code like Console.WriteLine(num.ToString());
- See Sample code for a page that does input, processing, and output below
Add the new page to the navigation menu.
- See code to add to NavMenu below
Commit and push
Add a link to your project Azure to your GitHub repository readme

Sample code for a page that does input, processing, and output

@page "/ipo"

<p>Input prompt </p>

<p>Output: @OutputString </p>

@code

{

private string InputString { get; set; }

private string OutputString { get; set; }

private void DoProcessing()

{

double num = double.Parse(InputString);

num = num * 2;

OutputString = num.ToString();

}

Code to add to NavMenu.razor

<span class="oi oi-list-rich" aria-hidden="true"></span> IPO

</NavLink>

</li>

Build a Blazor todo list app

Add the todo list app to your existing project instead of creating a new one.
- If you really want to create a new project, when following the tutorial, for "Choose a Blazor hosting model" pick Blazor WebAssembly.
Review the instructions to Run a project in Visual Studio and Modify a project in Visual Studio above.
- You can create the new page through Visual Studio by copying, pasting, and renaming an existing file or you can create the new page through the command prompt like in the tutorial instructions after going to your existing project folder using cd.
Use the Build a Blazor todo list app tutorial to
- modify NavMenu.razor
- create Todo.razor
- create TodoItem.cs
Add comments in Todo.razor and TodoItem.cs explaining what each line of code does.
- 
- // comment in C# after @code
Optional: You can change the icon in the NavMenu by changing span class="oi oi-list-rich"
- After "oi oi- you can put anything you find at https://icon-sets.iconify.design/oi/ like check
Optional: You can change the icon that appears in the browser tab by changing favicon.ico in the wwwroot folder. You can use a site like https://favicomatic.com/ to make a favicon.
Once you have it working locally, commit and push to GitHub.
Update your Readme to look more professional and be more accurate and useful.
- Include a link to your deployed app and a link to the todo list tutorial.
- Stackedit.io is helpful for editing the markdown.
- If you update the readme on github.com your remote repository on GitHub will be more recent than your local repository, do a Pull from the Git Changes tab in Visual Studio.

More Blazor Resources

Use ASP.NET Core SignalR with Blazor build a chat app

Call a web API from ASP.NET Core Blazor connect to a database