学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（完）

学习ASP.NET Core Blazor编程系列一——综述

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（中）

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下）

 

六 计数器页面

14. 在浏览器中，通过鼠标左键单击左边菜单栏中的“Counter”菜单，页面进入到计数器页面。如下图。       

图2-17

15.在浏览器的计数器页面中，使用鼠标左键单击“Click me”按钮，页面中的“Current count:”从0，变为了1，在没有刷新页面的情况下增加了1。在以往的Web应用程序中，我们要实现不刷新页面实现计数器功能，通常是通过编写JavaScript来实现，但是在Blazor中可以使用C#来编写这个功能。

图2-18

16. 在Visual Studio 2022的解决方案资源管理器中，找到Pages\Counter.razor文件，使用鼠标双击在文本编辑器中打开此文件。代码如下。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {

    private int currentCount = 0;

     private void IncrementCount()
    {
        currentCount++;
    }
}

上面的代码中第一行是@page指令，这个指令在Blazor中是指定Razor组件直接处理请求的路由。浏览器的请求会通过这个@page指令设置的路由来处理请求。

<PageTitle> 设置页面的标题。

@code指令是在Razor组件中添加C#(字段、属性和方法)代码，实现相应功能。例如上面的Razor组件中用@currentCount表示当前计数的数量，@code代码块中定义了currentCount 这个整数数量作为计数用。“Click me”按钮的onclick事件触发之后调用IncrementCount方法，该方法也可在@code代码块中找到。

17. 实际上每一个.razor文件都是一个可以重用的Razor UI组件。在Visual Studio 2022的解决方案资源管理器中，Pages\Index.razor文件，使用鼠标双击此文件，在文本编辑器中打开。

18.在Index.razor文件的末尾添加＜Counter/＞元素，此元素表示将计数器组件添加到Index.razor页面。代码如下，注意红色粗体部分。

@page "/"

<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
测试热重载功能 。
<Counter></Counter>

19.保存文件之后，我们回到浏览器中，使用鼠标左键单击左边菜单栏中的“Home”菜单，页面进入首页，页面上并没有显示“计数器”组件。我们不停的按F5刷新浏览器，同样无法看到“计数器”组件。如下图。

图2-19

20.在Visual Studio 2022的工具栏上，点击“热加载”按钮。然后回到浏览器中，我们发现“计数器”组件已经显示在页面中了。如下图中的红框所示。

图2-20

21.在浏览器的首页中，使用鼠标左键单击“Click me”按钮，页面中的“Current count:”从0，变为了1；再次点击“Click me”按钮，页面中的“Current count:”从1，变为了2。这个计数变化的过程中没有刷新页面。

图2-21

22. Razor组件参数可以使用属性或子内容来设定，方便设置Razor组件的参数。例如，我们要在“计数器”组件上定义一个参数，用于设置每次单击按钮时计数器组件增加值。通过以下二步来实现

第一，在@code代码块中添加一个公共属性IncrementAmount，并在这个属性上方添加[Parameter]特性。

第二，更改计数器的递增方法currentCount，在每次递增currentCount值时使用IncrementAmount。

具体代码如下所示：

@page "/counter" 

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {

    private int currentCount = 0;

    [Parameter]
    publicint IncrementAmount { get; set; } = 1;

    privatevoid IncrementCount()
    {
        currentCount += IncrementAmount;
    }
} 

23. 在Visual Studio 2022的解决方案资源管理器中，找到Pages\Index.razor文件，使用鼠标双击此文件，在文本编辑器中打开。在Index.razor文件的＜Counter/＞元素处，添加IncrementAmount属性，并将该属性值更改5。代码如下，注意粗体部分。

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

测试热重载功能 。

<CounterIncrementAmount="5"></Counter>

24.在Visual Studio 2022的工具栏上，点击“热加载”按钮。然后回到浏览器中，此时浏览器中正呈现的是刚才我们浏览的首页，使用鼠标左键单击“Click me”按钮，页面中的“Current count:”从2，变为了7，如下图所示；再次点击“Click me”按钮，页面中的“Current count:”从7，变为了12。

图2-22

25.在浏览器中，通过鼠标左键单击左边菜单栏中的“Counter”菜单，页面进入到计数器页面。在浏览器的计数器页面中，使用鼠标左键单击“Click me”按钮，页面中的“Current count:”从0，变为了1，而不是5。