Exercise 1: Your First Interactive Counter (Blazor WebAssembly)

Goal: Create a webpage with a button. Each time you click the button, a number on the screen will go up.

Concepts You'll See:

• Creating a new Blazor WebAssembly Project
• Understanding and changing a "Razor Component"
• Making a button do something when clicked (@onclick)
• Showing a C# number on your webpage

Step-by-Step Instructions:

1. Open Visual Studio.

• If you just installed it, it might open automatically. Otherwise, find it in your Start Menu or Applications.

2. Create a New Project:

• On the Visual Studio start screen, click "Create a new project".
• In the search bar at the top, type Blazor.
• From the results, select "Blazor WebAssembly App" (make sure it says C#, not F#).

  Why WebAssembly? This type of Blazor app runs entirely in your web browser, which is great for learning client-side interactions.

• Click "Next".
• Project Name: Type MyFirstCounterApp
• Location: Choose a folder on your computer where you want to save your projects (e.g., C:\Projects\).
• Click "Next".
• Framework: Make sure .NET 6.0 (Long Term Support) is selected. (If you have .NET 8.0, you can select that, but for these exercises, stick to 6.0 if available to match the module).
• Authentication type: Leave as "None".
• Configure for HTTPS: Leave checked.
• Click "Create".

Visual Studio will now set up your new Blazor project. This might take a moment.

3. Locate the Counter.razor File:

• In the "Solution Explorer" window (usually on the right side of Visual Studio), you'll see a tree structure of your project.
• Expand the folder named Pages.
• Double-click on Counter.razor to open it in the code editor.

4. Examine the Existing Code:

Look at the code in Counter.razor. You'll see:

• @page "/counter": This tells Blazor that if someone goes to /counter in your website, they'll see this component.
• <h1>Counter</h1>: A standard HTML heading.
• <p role="status">Current count: @currentCount</p>: A paragraph. Notice @currentCount. This means Blazor will display the value of a C# variable named currentCount here.
• <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>: A button. @onclick="IncrementCount" is very important – it means "when this button is clicked, run the C# code in the method called IncrementCount."
• @code { ... }: This is the special section where all your C# code for this component lives.
  • private int currentCount = 0;: This creates a private C# variable named currentCount and sets its starting value to 0.
  • private void IncrementCount(): This is the C# method (a block of code that does something) that gets called when the button is clicked.
  • currentCount++;: This line inside IncrementCount() adds 1 to the currentCount variable.

5. Run Your Application and Test:

• At the top of Visual Studio, click the green "Play" button or press F5 on your keyboard. This will build and run your Blazor application.
• A web browser window will open, showing your Blazor app.
• On the left side of the webpage, you'll see a navigation menu. Click on "Counter".
• Now, click the "Click me" button multiple times.

Observation: The "Current count:" number should increase with each click!

6. Make it Your Own (Small Modification):

• Go back to Visual Studio (your app might still be running).
• In Counter.razor, find the line:

<h1>Counter</h1>

• Change it to:

<h1>My Awesome Clicker!</h1>

• Find the button line:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

• Change "Click me" to:

<button class="btn btn-primary" @onclick="IncrementCount">Make it go up!</button>

• Save the file: Press Ctrl + S (or Cmd + S on Mac).

Observation (Hot Reload): If you still have your browser open with the app, you might see the changes appear almost instantly without refreshing the page! This is "Hot Reload" in action. If not, just refresh your browser page (F5 in the browser).

7. Challenge (Modify the Logic):

• In the @code block of Counter.razor, find the line:

currentCount++;

• Change it to:

currentCount += 5; // This means "add 5 to currentCount"

• Save the file.
• Go back to your browser, click "Make it go up!"

Observation: The number should now jump by 5 each time you click!

*When you're done with this exercise, you can close the browser window and stop debugging in Visual Studio (Shift+F5 or click the red square button).