您将如何在 Blazor 中的 Razor class/file 中从不同的 class 调用方法

Question

我对创建 Blazor WebAssembly 应用很感兴趣

很快我发现我需要一个单独的 class SimpleMaths-class 包含小型业务逻辑

简单数学-class

namespace MyFirstApp.Classes
{
    public class SimpleMaths
    {
        public int SumOfTwo(int a, int b)
        {
            return a + b;
        }

        public int DistractionOfTwo(int a, int b)
        {
            return a - b;
        }

        public int Division(int a, int b)
        {
            return a/ b;
        }
    }
}

在_Imports.razor中我添加了以下语句，因为我想在整个项目中使用这个class：

@using MyFirstApp.Classes

Razor 文件包含以下内容

<p>Number One:</p>
<input type="number" id="Num1" @bind="Num1"/>

<p>Number Two:</p>
<input type="number" id="Num2" @bind="Num2"/>

<p>
    <br/>
    <button class="btn btn-primary" @onclick="Summerize">Sum</button>
</p>

<p>
    Sum: @Sum
</p>

@code {
    SimpleMaths sim = new SimpleMaths();
    private int Num1, Num2, Sum = 0;

    private void Summerize()
    {
        Sum = sim.SumOfTwo(Num1, Num2);
    }

}

上述方法工作正常，但我有兴趣了解其他（或更简单的）方法来做到这一点

我认为以下方案比我目前实施的方案更好：

提供 Num1 和 Num2 作为参数并调用 SumOfTwo 方法（来自 SimpleMaths）点击的总和按钮。这种方法可行吗？如果是，这看起来如何？

我的目标不是在整个页面应用业务逻辑，我只是想知道它是如何工作的，以防万一我会在未来。

Answer 1

有很多方法可以实现您想要的。下面的尝试尽可能地符合您的愿望...

创建服务 class 来执行数学计算。（这仅用于说明目的，因此如果您遇到错误，那是您的错）

SimpleMaths.cs

internal class SimpleMaths
    {
        public int CurrentSum { get; private set; }

        public void SumOfTwo(int a, int b)
        {
            CurrentSum =  a + b;
            StateChanged?.Invoke();
        }

        public void DistractionOfTwo(int a, int b)
        {
            CurrentSum = a - b;
            StateChanged?.Invoke();
        }

        public void Division(int a, int b)
        {
            try
            {
                CurrentSum = a / b;
                StateChanged?.Invoke();
            }
            catch { }
        }

        public event Action StateChanged;
    }

将服务 class 添加到范围内的 DI 容器中：

services.AddScoped<SimpleMaths>();

在Index.razor

中的用法

@page "/"

@inject BlazorApp5.SimpleMaths SimpleMaths



<p>Number One:</p>
<input type="number" id="Num1" @bind="Num1" />

<p>Number Two:</p>
<input type="number" id="Num2" @bind="Num2" />

<p>
    <br />
    <button class="btn btn-primary" @onclick="@(() => SimpleMaths.SumOfTwo(Num1, Num2))">Add</button>
    <button class="btn btn-primary" @onclick="@(() => SimpleMaths.DistractionOfTwo(Num1, Num2))">Distract</button>
    <button class="btn btn-primary" @onclick="@(() => SimpleMaths.Division(Num1, Num2))">Divide</button>
</p>

<p>
    Sum: @SimpleMaths.CurrentSum.ToString()
</p>

@code {
   
    private int Num1, Num2;
        

}

请注意，您应该将 SimpleMaths 服务注入到 Index 组件中。另请注意，我们直接从分配给每个按钮元素的 @onclick 指令的 lambda 表达式调用服务的方法。

Answer 2

另一个使用静态的工作示例class

剃须刀文件

<p>Number One:</p>
<input type="number" id="Num1" @bind="Num1"/>

<p>Number Two:</p>
<input type="number" id="Num2" @bind="Num2"/>

<p>
    <br/>
    <button class="btn btn-primary" @onclick="@(() => SimpleMaths.SumOfTwo(Num1, Num2))">Sum</button>
</p>

<p>
    Result: @SimpleMaths.Result
</p>

@code {
    private int Num1, Num2;
    
}

静态class

public static class SimpleMaths
{
    public static int Result { get; private set; }
    public static void SumOfTwo(int a, int b)
    {
        Result = a + b;
    }

    public static void DistractionOfTwo(int a, int b)
    {
        Result = a - b;
    }

    public static void Division(int a, int b)
    {
        Result = a / b;
    }
}

您将如何在 Blazor 中的 Razor class/file 中从不同的 class 调用方法

How would you call methods from a different class in a Razor class/file in Blazor

blazor

blazor-webassembly

SimpleMaths.cs

在Index.razor