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

Question

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

Razor 页面代码片段 & @? 我不确定要使用哪个模型：

<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

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

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

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

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

Answer 2

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

这类似于 mvc 中的视图模型，您 select 您希望将多个模型的哪些属性传递给 page/view。

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

Answer 3

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

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

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

@model=TradeViewModel

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

How to have multiple models added in Razor page of Blazor app?

c#

razor

blazor

blazor-server-side

blazor-webassembly