如何在 asp.net razor 中连接 2 个视图

Question

如何在 asp.net razor 应用程序中包含和显示 2 个视图（我不使用 mvc）。在包模型中，我有汽车和司机。在包 "Pages" 中，我创建了 2 个文件夹（CarsPage、DriversPage）。我生成了 crud（添加 -> 新脚手架项目 -> 使用实体的剃刀页面）。在我的数据库中，一辆车只能有 1 个司机。我想展示所有带司机的汽车，例如。 car1 , ford, blue...drivers1 , Jon, ... car2，梅赛德斯，黑色....，詹姆斯，...

在 table 车里我的 pk 是 "Id" 而来自 table 司机的 fk 也是 "Id" 我怎样才能包含和显示所有信息？如果在我的 post 中有些地方更糟，请写下来。

public partial class Cars
    {
        public string Id { get; set; }
        public string Name{ get; set; }
        public string Color{ get; set; }...
    }

public partial class Drivers
    {
        public string Id { get; set; }
        public string Name{ get; set; }
        public string Surename{ get; set; }...
    }


@page
@model MyApp.Pages.CarsPage.IndexModel

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>

    <th>
                @Html.DisplayNameFor(model => model.Cars[0].Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Cars[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.cars[0].Color)
            </th>

<th></th>
        </tr>


    </thead>



<tbody>
        @foreach (var item in Model.Cars)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Color)
                </td>
<td>
                    <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-page="./Details" asp-route- 
 id="@item.Id">Details</a> |
                    <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>

Answer 1

如果您想在第一页中呈现第二个 "page"，您应该查看 View Components

Answer 2

您可以将驱动程序的信息放在局部视图中。将 Car.Drivers 传递给索引视图中的部分视图。

你可以参考我下面的演示：

1.Models:

public class Cars
{
    [Key]
    public string Id { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
    public string DriversId { get; set; }
    [ForeignKey("DriversId")]
    public Drivers Drivers { get; set; }
}

public class Drivers
{
    [Key]
    public string Id { get; set; }
    public string Name { get; set; }
    public string Surename { get; set; }
}

2.Create DriversPartial.cshtml razor 视图而不是 razor 页面（添加->新项目->Razor 视图）在 CarsPage folder.input 您想要显示的内容接收 Drivers 模型的部分视图：

@model Yournamespace.Drivers
<tr>
    <td>
        @Html.DisplayNameFor(model => model.Id) :
        @Html.DisplayFor(model => model .Id)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Name) :
        @Html.DisplayFor(model => model .Name)
    </td>
    <td>
        @Html.DisplayNameFor(model => model.Surename):
        @Html.DisplayFor(model => model .Surename)
    </td>

    <td>
        <a asp-page="/DriversPage/Edit" asp-route-id="@Model.Id">Edit</a> |
        <a asp-page="/DriversPage/Details" asp-route-id="@Model.Id">Details</a> |
        <a asp-page="/DriversPage/Delete" asp-route-id="@Model.Id">Delete</a>
    </td>
</tr>

3.Use Index.cshtml

中的部分视图

@foreach (var item in Model.Cars)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Color)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Drivers.Id)
        </td>
        <td>
            <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
            <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |
            <a asp-page="./Delete" asp-route-id="@item.Id">Delete</a>
        </td>
    </tr>
    @await Html.PartialAsync("DriversPartial.cshtml", item.Drivers);

}

4.Index.cshtml.cs

public IList<Cars> Cars { get;set; }

    public async Task OnGetAsync()
    {
        Cars = await _context.Cars
            .Include(c => c.Drivers).ToListAsync();
    }

5.Result:

您可以修改局部视图以添加您的自定义页面。

如何在 asp.net razor 中连接 2 个视图

How to connect 2 views in asp.net razor

c#

asp.net-core

razor-pages