如何从组件类进行继承

Question

我试图从If语句中的组件类访问Id，但我收到一个错误，说它在当前上下文中不存在(CS0103)。

这是我的代码：

@inherits MainViewModel
<button>Delete</button>
<button>Add</button>
<br />
<label>Vehicles</label>
<EditForm Model="@VehicleFuel">
<InputSelect Id="VehicleList" class="form-group" @bind-Value="@Id">
<option value="0">Select a vehicle</option>
@foreach (var item in VehicleFuel)
{
<option value="@item.VehicleId">@item.VehicleFuel</option>
}
@if (@VehicleId = 1)
{
<div>
<p>Manufacturer</p>
<input placeholder="Tesla" />
</div>
<div>
<p>Model</p>
<input placeholder="Model 3" />
</div>
} 
</InputSelect>
</EditForm>

这是我的组件类：

using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Threading.Tasks;
using VehicleSale.Models;
namespace VehicleSale.Components;
public class MainViewModel : ComponentBase
{
public List<VehicleTypes> VehicleFuel  { get; set; }
public string Id {get; set; } = "0";
protected override Task OnInitializedAsync()
{
VehicleFuel = new List<VehicleTypes>()
{
new VehicleTypes{VehicleId=1, VehicleFuel="Electric"},
new VehicleTypes{VehicleId=2, VehicleFuel="Gas"},
new VehicleTypes{VehicleId=3, VehicleFuel="Diesel"}
};
return base.OnInitializedAsync();
}

我不知道在哪里需要再次添加组件类，以便在if语句中使用它。我的最终目标是，当选择VehicleID或VehicleFuel时，会出现以下输入框，即制造商和型号。我试过写@VehicleFuel，但我也遇到了同样的错误。

Answer 1

您应该使用相同类型的int到int进行绑定。此外，您的绑定语法也错误。您的if语句是一个赋值，请使用==或is。

@inherits MainViewModel
<button>Delete</button>
<button>Add</button>
<br />
<label>Vehicles</label>
<EditForm Model=@this.someModel>
<InputSelect Id="VehicleList" class="form-group" @bind-Value="@someModel.VehicleId">
<option value=0>Select a vehicle</option>
@foreach (var item in VehicleFuel)
{
<option value="@item.VehicleId">@item.VehicleFuel</option>
}
</InputSelect>
</EditForm>
@if (this.someModel.VehicleId is 1)
{
<div>
<p>Manufacturer</p>
<input placeholder="Tesla" />
</div>
<div>
<p>Model</p>
<input placeholder="Model 3" />
</div>
}

public class MainViewModel : ComponentBase
{
protected SomeModel someModel  = new();
protected List<VehicleTypes> VehicleFuel { get; set; }
protected override Task OnInitializedAsync()
{
VehicleFuel = new List<VehicleTypes>()
{
new VehicleTypes{VehicleId=1, VehicleFuel="Electric"},
new VehicleTypes{VehicleId=2, VehicleFuel="Gas"},
new VehicleTypes{VehicleId=3, VehicleFuel="Diesel"}
};    
}
}
public class SomeModel
{
public int VehicleId { get; set; } = 0;
}
public class VehicleTypes
{
public int VehicleId { get; set; }
public string VehicleFuel { get; set; }
}

Answer 2

我假设您实现了继承，这样您就可以在几个子级中使用VehicleFuel。

有一个不同的"；清洁设计"；您可以通过将数据从UI中分离出来来实现这一点。

定义保存车辆燃油数据的DI服务。它可以像在内部创建列表一样简单，也可以从数据存储(如Db或API服务)中获取列表。

首先，这里有几个数据类。

public record VehicleType
{
public int VehicleId { get; init; }
public string VehicleFuel { get; init; } = "Diesel";
}
public class Vehicle
{
public int VehicleTypeId { get; set; }
}

和燃料服务：

public class FuelService
{
public List<VehicleType> VehicleFuel { get; private set }
public FuelService()
{
// define it in code but could get it from a DB
VehicleFuel =new List<VehicleType>()
{
new VehicleType{VehicleId=1, VehicleFuel="Electric"},
new VehicleType{VehicleId=2, VehicleFuel="Gas"},
new VehicleType{ VehicleId = 3, VehicleFuel = "Diesel" }
};
}
}

在Program.cs中注册。我使用的是singleton，因为它对所有用户都是相同的数据集。

builder.Services.AddSingleton<FuelService>();

我们现在可以将服务Inject转换为任何需要使用它的组件

@page "/"
@inject FuelService FuelService
<EditForm Model="@model">
<InputSelect Id="VehicleList" class="form-group" @bind-Value="@model.VehicleTypeId" @oninput=UpdateUI>
<option value="0">Select a vehicle</option>
@foreach (var item in this.FuelService.VehicleFuel)
{
<option value="@item.VehicleId">@item.VehicleFuel</option>
}
</InputSelect>
</EditForm>
<div class="p-2">
@if (@model?.VehicleTypeId == 1)
{
<div>
<span style="display:block;">Manufacturer</span>
<input placeholder="Tesla" />
</div>
<div>
<span style="display:block;">Model</span>
<input placeholder="Model 3" />
</div>
}
</div>
@code {
private Vehicle model = new Vehicle();
private void UpdateUI()
=>  this.InvokeAsync(StateHasChanged);
}

一些要点：

1. 我已经将Type的显示移动到Select之外
2. 每当使用@ininput更改值时，我都会触发UI更新。不能使用@onchange，因为绑定进程使用该事件
3. 在现实生活中，model也将进入Vehicle服务，该服务将具有CRUD方法来从相关数据存储中提取数据并将数据持久化到相关数据存储