dotnet/intro-to-dotnet-web-dev
1
0
Fork 0
mirror of https://github.com/dotnet/intro-to-dotnet-web-dev.git synced 2025-12-06 05:32:03 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update README.md

Browse source 
A bit of clean up
This commit is contained in:
David Pine 2022-07-25 15:17:44 -05:00 committed by GitHub
parent 6dd886bf37
commit 7a22b9b41e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
5-blazor/README.md
View file

@ -4,12 +4,12 @@ Today we're going to learn how to build a Blazor application by recreating the c
## What is Blazor ## What is Blazor
Blazor is a framework for building web pages with HTML, CSS, and C#. We can define the layout and design of the website using standard HTML and CSS. The interactive components of the web pages can then be managed with C# code that runs on a server or in the browser using a web standard technology called Web Assembly. The formatting of HTML and CSS will build on what we learned in our previous sessions, using the Razor template language. Blazor is a framework for building web pages with HTML, CSS, and C#. We can define the layout and design of the website using standard HTML and CSS. The interactive components of the web pages can then be managed with C# code that runs on a server or in the browser using a web standard technology called WebAssembly. The formatting of HTML and CSS will build on what we learned in our previous sessions, using the Razor template language.
Blazor allows us to define our web pages using Razor and include other Razor files as components inside those pages. This means we can build and re-use parts of our application easily. Blazor allows us to define our web pages using Razor and include other Razor files as components inside those pages. This means we can build and re-use parts of our application easily.
## What is Web Assembly? ## What is WebAssembly?
Web Assembly is a standard technology available in every modern browser that allows code to run, similar to JavaScript, in a browser. We can use tools to prepare our C# code for use in the browser as a web assembly application, and these tools are bundled into the .NET command-line application. WebAssembly is a standard technology available in every modern browser that allows code to run, similar to JavaScript, in a browser. We can use tools to prepare our C# code for use in the browser as a web assembly application, and these tools are bundled into the .NET command-line application.
## Structure of this repository ## Structure of this repository
@ -20,11 +20,11 @@ We're including all of the layout and game logic in this repository as well as a
This repository will walk you through Blazor and introduce the following concepts: This repository will walk you through Blazor and introduce the following concepts:
- Blazor component fundamentals - Blazor component fundamentals
- How to get started with the Blazor Web Assembly project template - How to get started with the Blazor WebAssembly project template
- How to construct and use a layout for a Blazor component - How to construct and use a layout for a Blazor component
- How to react to user interactions - How to react to user interactions
We'll accomllish this by writing a classic four-in-a-row "Connect Four" game that runs in your browser using Web Assembly. In this game, 2 players alternate taking turns placing a gamepiece (typically a checker) in the top of the board. Game pieces fall to the lowest row of a column and the player that places 4 game pieces to make a line horizontally, vertically, or diagonally wins. We'll accomllish this by writing a classic four-in-a-row "Connect Four" game that runs in your browser using WebAssembly. In this game, 2 players alternate taking turns placing a gamepiece (typically a checker) in the top of the board. Game pieces fall to the lowest row of a column and the player that places 4 game pieces to make a line horizontally, vertically, or diagonally wins.
## Create a new Blazor project ## Create a new Blazor project
@ -38,7 +38,7 @@ First, let's scaffold a new project for our game. With .NET 6 installed, we can
This should create a _ConnectFour_ directory containing our application. This should create a _ConnectFour_ directory containing our application.
2. Run the app by pressing **F5** in Visual Studio 2022. This builds the app and hosts it on a random port between 5000 and 5300. HTTPS has a port selected for it in the range of 7000 to 7300. 2. Run the app by pressing <kbd>F5</kbd> in Visual Studio 2022. This builds the app and hosts it on a random port between 5000 and 5300. HTTPS has a port selected for it in the range of 7000 to 7300.
Your Output Window should report content similar to the following: Your Output Window should report content similar to the following:
@ -60,7 +60,7 @@ First, let's scaffold a new project for our game. With .NET 6 installed, we can
![Screenshot from the new Blazor Template](img/1-NewTemplate.png) ![Screenshot from the new Blazor Template](img/1-NewTemplate.png)
Congratulations! You've created your first Blazor application using the Blazor Web Assembly template. Congratulations! You've created your first Blazor application using the Blazor WebAssembly template.
## Create a Board component ## Create a Board component
@ -98,7 +98,7 @@ Next, let's create a board component to be used by players in our game. The com
The `Index.razor` file is a **Page** that can be navigated to and contains HTML, C#, and references to other Blazor components. We can identify this file as a page due to the presence of the `@page "/"` directive on the first line. This instructs Blazor to respond with the contents of this file when the default page at the "/" address is requested. The `Index.razor` file is a **Page** that can be navigated to and contains HTML, C#, and references to other Blazor components. We can identify this file as a page due to the presence of the `@page "/"` directive on the first line. This instructs Blazor to respond with the contents of this file when the default page at the "/" address is requested.
Let's run our application with **F5** and in the hot-reload toolbar button activate the "Hot reload on file save" option. The hot-reload feature will patch and rebuild our application, and then refresh our browser as we add new features to the application. Hot reload allows you to observe the evolution of the game from a simple page to a full Connect Four board with interactive pieces. Let's run our application with <kbd>F5</kbd> and in the hot-reload toolbar button activate the "Hot reload on file save" option. The hot-reload feature will patch and rebuild our application, and then refresh our browser as we add new features to the application. Hot reload allows you to observe the evolution of the game from a simple page to a full Connect Four board with interactive pieces.
![The initial Board component displayed on the Index page](img/2-Board-Step1.png) ![The initial Board component displayed on the Index page](img/2-Board-Step1.png)
@ -114,19 +114,14 @@ Blazor components contain all of the HTML and markup needed to be rendered in a
```csharp ```csharp
<div> <div>
<div class="board"> <div class="board">
@for (var i = 0; i < 42; i++) @for (var i = 0; i < 42; i++)
{ {
<span class="container"> <span class="container">
<span></span> <span></span>
</span> </span>
} }
</div> </div>
</div> </div>
``` ```
@ -238,9 +233,7 @@ The game logic for Connect Four is not too difficult to program. We need some c
@code { @code {
protected override void OnInitialized() protected override void OnInitialized()
{ {
State.ResetBoard(); State.ResetBoard();
} }
} }
``` ```
@ -252,7 +245,6 @@ The game logic for Connect Four is not too difficult to program. We need some c
Let's allocate those 42 spans just above the `@code` line, but inside the closing `</div>` element. We'll also define a private array to hold the CSS classes we will assign to the 42 game pieces: Let's allocate those 42 spans just above the `@code` line, but inside the closing `</div>` element. We'll also define a private array to hold the CSS classes we will assign to the 42 game pieces:
```csharp ```csharp
...
@for (var i = 0; i < 42; i++) @for (var i = 0; i < 42; i++)
{ {
<span class="@Pieces[i]"></span> <span class="@Pieces[i]"></span>
@ -263,8 +255,6 @@ The game logic for Connect Four is not too difficult to program. We need some c
@code { @code {
private string[] Pieces = new string[42]; private string[] Pieces = new string[42];
...
``` ```
By default initialization of a string array, this will assign an empty string to the CSS class of each game piece span. This will prevent the game pieces from appearing on screen as they have no contents and no style applied to them. By default initialization of a string array, this will assign an empty string to the CSS class of each game piece span. This will prevent the game pieces from appearing on screen as they have no contents and no style applied to them.
@ -277,11 +267,9 @@ The game logic for Connect Four is not too difficult to program. We need some c
private void PlayPiece(byte col) private void PlayPiece(byte col)
{ {
var landingRow = State.PlayPiece(col); var landingRow = State.PlayPiece(col);
var cssClass = $"player{State.PlayerTurn} col{col} drop{landingRow}"; var cssClass = $"player{State.PlayerTurn} col{col} drop{landingRow}";
Pieces[State.CurrentTurn - 1] = cssClass; Pieces[State.CurrentTurn - 1] = cssClass;
} }
``` ```
@ -332,7 +320,6 @@ Let's add some error handling and indicators to our board to make the current st
1. Let's add a simple status area above the board, and below the drop buttons. Insert the following markup after the closing `</nav>` element: 1. Let's add a simple status area above the board, and below the drop buttons. Insert the following markup after the closing `</nav>` element:
```csharp ```csharp
...
</nav> </nav>
<article> <article>