如何在 Blazor 應用程序的 Razor 頁面中添加多個模型？

Question

我的 Blazor 應用中有一個 Razor 頁面。 據我所知，我們只能將一個模型添加到 Razor 頁面 Editform。 我的屬性分布在兩個-三個模型中。 如何鏈接到所有屬性？ 我可以參考任何示例或任何鏈接？ 提前致謝。

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

您可以創建一個 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