如何在ASP.NET剃须刀中连接2个视图

时间:2019-07-19 11:33:21

标签: c# asp.net-core razor-pages

我如何在asp.net剃须刀应用程序中包含和显示2个视图(我不使用mvc)。在包装模型中,我有汽车和驾驶员。 在“页面”包中,我创建了2个文件夹(CarsPage,DriversPage)。我生成了crud(添加->新脚手架项目->使用实体的剃须刀页面)。在我的数据库中,一辆车只能有1位驾驶员。我想和司机一起展示所有汽车。 car1,福特,blue ... drivers1,Jon,... car2,梅赛德斯,黑色...,詹姆斯,...

在桌车中,我的pk是“ Id”,而桌车司机的fk也是“ Id” 如何包含和显示所有信息?  如果我的帖子中有更糟糕的内容,请写出来。

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>

2 个答案:

答案 0 :(得分:0)

如果要在第一页中呈现第二个“页面”,则应查看View Components

答案 1 :(得分:0)

您可以将驾驶员的信息放在局部视图中。将Car.Drivers传递到“索引”视图的部分视图。

您可以参考下面的演示:

1。型号:

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。在DriversPartial.cshtml文件夹中创建一个CarsPage剃刀视图而不是剃刀页面(添加->新项目->剃刀视图)。输入要在接收到的部分视图中显示的内容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。在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。结果: enter image description here

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