如何在 Blazor 应用程序的 Razor 页面中添加多个模型？

Question

我的 Blazor 应用中有一个 Razor 页面。据我所知，我们只能将一个模型添加到 Razor 页面 Editform。 我的我的属性分布在两个-三个模型中。如何链接到所有属性？我可以参考任何示例或任何链接？提前致谢。

Razor 页面代码 sn-p & @? 我不确定要使用哪种型号：

<div class="card-body">
            <EditForm Model="@?" OnValidSubmit="HandleValidSubmit">
                <DataAnnotationsValidator />
                <hr />
                <div class="form-row">
                    <div class="form-group col">
                        <label>Role</label><br />
                        <InputRadioGroup @bind-Value="Trade.Role" class="form-control">
                            @foreach (var option in rdOptions)
                                {
                                <InputRadio Value="option" /> @option
                                <text>&nbsp;&nbsp;</text>
                                }
                        </InputRadioGroup>
                        <ValidationMessage For="@(() => Trade.Role)" />
                    </div>
                    <div class="form-group col">
                        <label>Company Name</label>
                        <InputSelect id="txtCompanyName" class="form-control" @bind-Value="@TradePartner.CompanyName">
                            <option selected value="-1">-Select-</option>
                            <option value="CompanyName1">CompanyName1</option>
                            <option value="CompanyName2">CompanyName2</option>
                        </InputSelect>
                        <ValidationMessage For="@(() => TradePartner.CompanyName)" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label>Contact Details of your Trading partner</label>
                        <label>Name</label>
                        <InputText @bind-Value="Trade.PartnerName" class="form-control" />
                        <ValidationMessage For="@(() => Trade.PartnerName)" />
                    </div>
                    <div class="form-group col">
                        <label>Email</label>
                        <InputText @bind-Value="TradePartner.Email" class="form-control" />
                        <ValidationMessage For="@(() => TradePartner.Email)" />
                    </div>
                </div>
 </EditForm>
        </div>

.cs代码，有Trade&TradePartner两种模式：

 public partial class CreateTrade
    {

        public Models.Trade Trade { get; set; }
        public Models.TradePartner TradePartner { get; set; }
        List<string> rdOptions = new List<string> { "Seller", "Buyer" };
       
        protected override void OnInitialized()
        {
            Trade = new Models.Trade();
TradePartner = new Models.TradePartner();
        }
       
        protected async void HandleValidSubmit()
        {
            await Http.PostAsJsonAsync($"api/Trade/", Trade);
            StateHasChanged();
        }

    }

Answer 1

您可以创建一个 TradeViewModel.cs (ViewModel) 类并将您需要的所有对象放入剃须刀页面。 然后你只需包含@Model TradeViewModel.cs

class TradeViewModel
{
     public TradePartner TradePartner;
     public Trade Trade;
}

在您的页面文件 (.cshtml) 中

@model=TradeViewModel

Answer 2

如何创建一个封装两个模型的类，例如：

public class TradeViewModel
{
    public Models.Trade Trade { get; set; }
    public Models.TradePartner TradePartner { get; set; }

    public TradeViewModel()
    {
        Trade = new();
        TradePartner = new();
    }
}

并在您的 EditForm 中使用这个新模型。

Answer 3

我建议您创建一个 PageModel 来保存所有模型作为要传递给 Razor 页面的属性。

这类似于 mvc 中的视图模型，您可以在其中从多个模型中选择要传递给页面/视图的属性。

这是一个很好的资源： https://www.learnrazorpages.com/razor-pages/pagemodel