您如何在 Blazor 的 Razor 类/文件中调用来自不同类的方法

Question

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

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

SimpleMaths 类

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中我添加了以下语句，因为我想在整个项目中使用这个类：

@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 作为参数并在 Sum 按钮的点击期间调用 SumOfTwo-method（来自 SimpleMaths）。这种方法可以实现吗？如果是，这是什么样的？

我的目标不是在整个页面中应用业务逻辑，我只是​​想知道它是如何工作的，以防我将来处理这类场景。 p>

Answer 1

有很多方法可以实现您想要的。下面的一个尝试尽可能地忠实于你的愿望......

创建一个服务类来执行数学计算。 （这只是为了说明目的，所以如果你有错误，那是你的错）

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;
    } 

将服务类作为作用域添加到 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

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

剃刀文件

<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;
    
}

静态类

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;
    }
}