可滚动列表答案

【问题标题】：Scrollable list可滚动列表
【发布时间】：2017-03-13 21:22:44
【问题描述】：

我有一个表格，其中包含我在表格中显示的数据

这里是控制器

 public ActionResult Index()
    {
        return View(db.Companies.ToList());
    }

这里是视图

  @foreach (var item in Model)
{

    <tr>
        <td class="point">
            @(rowNo += 1)
        </td>
        <td class="title" style="text-align: center; font-size:20px">
            @Html.DisplayFor(modelItem => item.CompanyName)
        </td>
        <td class="title" style="text-align: center; font-size:20px">
            @Html.DisplayFor(modelItem => item.Vacancies.FirstOrDefault().VacancyName)
        </td>
        <td style="text-align: end;">
            <a href='@Url.Action("Edit", "Companies", new {id = item.CompanyID})'>
                <img src='@Url.Content("~/Images/Edit.png")'/>
            </a>
            <a href='@Url.Action("Delete", "Companies", new {id = item.CompanyID})'>
                <img src='@Url.Content("~/Images/Delete.png")'/>
            </a>
            </td>
    </tr>
}

职位空缺是与公司相关的数据表

公司可能有 1-10 个职位空缺。

如何在此处通过滚动列表显示所有职位空缺<td class="title" style="text-align: center; font-size:20px"> @Html.DisplayFor(modelItem => item.Vacancies.FirstOrDefault().VacancyName) </td>

【问题讨论】：

标签： c# html css asp.net asp.net-mvc

【解决方案1】：

假设 Vacancy 是一个 IEnumerable 或类似的集合对象（可能是因为您使用了 FirstOrDefault），您可以简单地迭代它们，就像迭代公司列表一样：

@foreach (var item in Model)
{
<tr>
    <td class="point">
        @(rowNo += 1)
    </td>
    <td class="title" style="text-align: center; font-size:20px">
        @Html.DisplayFor(modelItem => item.CompanyName)
    </td>
    <td class="title" style="text-align: center; font-size:20px">
        <div style="height: 100px; overflow-y: scroll">
            @foreach (var vacancy in item.Vacancies)
            {
                <div>@Html.DisplayFor(v => vacancy.VacancyName)</div>
            }
        </div>
    </td>
    <td style="text-align: end;">
        <a href='@Url.Action("Edit", "Companies", new {id = item.CompanyID})'>
            <img src='@Url.Content("~/Images/Edit.png")'/>
        </a>
        <a href='@Url.Action("Delete", "Companies", new {id = item.CompanyID})'>
            <img src='@Url.Content("~/Images/Delete.png")'/>
        </a>
    </td>
</tr>
}

在不相关的注释中，您可以并且可以说应该坚持使用双引号来表示 HTML 属性：

<img src="@Url.Content("~/Images/Edit.png")" />

【讨论】：