学习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页面。这就是blazor调用组件的方式,请记住这里调用组件的方式,当自己写了一个组件之后,也可以采用这种方式调用组件。代码如下,注意红色粗体部分。

@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?" />

测试热重载功能 。

<Counter  IncrementAmount="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。

            

 

posted @ 2022-09-12 16:01  DotNet菜园  阅读(2325)  评论(2编辑  收藏  举报