Question

我有一个包含两列的表格，我想根据性别在两个不同的列中显示所说学生的列表。模型中的所有这些数据都表示为一个数据集，但是当涉及到视图时，我想将其拆分，如下所示

Males                                          Females
===========                                    ==============
John                                            Jane
James                                           Mary

如何在我的cshtml视图中实现此逻辑。请注意，这是一个双列表，其中一个将枚举数据。

请在下面找到我正在使用的剃刀代码。

<table width="100%" border="1" class="anothertable">
    <tr>
        <td align="left" width="50%">MALES</td>
        <td align="left" width="50%">FEMALES</td>
    </tr>
    @foreach (var rep in Model.Students) {
        <tr>
            <td align="left" border="0">@if (@rep.IsMale)){ 
                <br />
                <ol type="a">
                    <li><span>@rep.Name</span> </li>
                </ol>
                }
            </td>
        else
        {
            <td align="left" border="0">
                <br />
                <ol type="a">
                    <li>@rep.Name</li>
                </ol>
            </td>
        }
        </tr>
    }
</table>

Answer 1

首先，你应该避免在你看来有任何逻辑;所有逻辑都应该在控制器中。

考虑到这一点，您可以尝试以下方法：

定义一个视图模型类，将数据保存在两个独立的集合中：

public class StudentsViewModel
{
    public IEnumerable<Student> Males { get; set; }
    public IEnumerable<Student> Females { get; set; }
}

在你的控制器中分割数据：

public class SomeController
{

    private StudentsRepository _repository;

    public ActionResult SomeAction()
    {
        var students = _repository.LoadStudents();
        var model = new StudentsViewModel
        {
            Males = students.Where(s => s.Gender == Gender.Male),
            Females = students.Where( s => s.Gender == Gender.Female)
        };
        return View(model);
    }
}

在您的views文件夹中创建两个视图： - 一个用于显示SomeAction方法的结果（一般SomeAction.cshtml） - 一个部分视图，用于显示按性别分隔的学生列表，以便重复使用标记

SomeAction查看

@model StudentsViewModel

<div class="left-column">
    <span class="title">Males</span>
    @Html.Partial("name-of-the-partial-view", @Model.Males)
</div>
<div class="right-column">
    <span class="title">Females</span>
    @Html.Partial("name-of-the-partial-view", @Model.Females)
</div>

部分视图将呈现学生列表：

@model IEnumerable<Student>

<ul>
@foreach(var student in Model)
{
    <li>@student.Name</li>
}
</ul>

希望这有帮助！

编辑

现在，在您发布代码之后，更容易发现问题：您没有为每行发出两个表格单元格，但只有一个表格单元格。当您遍历学生集合时，您必须为每个学生创建一个包含两个单元格的行。要做到这一点，只需在男学生的名字后面和女性的名字之前放一个空格：

<table width="100%" border="1" class="anothertable">
    <tr>
        <td align="left" width="50%">MALES</td>
        <td align="left" width="50%">FEMALES</td>
    </tr>
    @foreach (var rep in Model.Students) 
    {
        <tr>
            @if (@rep.IsMale))
            { 
                <td align="left" border="0">
                    <br />
                    <ol type="a">
                        <li><span>@rep.Name</span> </li>
                    </ol>
                </td>
                <!-- emit an empty cell here -->
                <td>&nbsp;</td>
            }
            else
            {
                 <!-- emit an empty cell here -->
                <td>&nbsp;</td>
               <td align="left" border="0">
                    <br />
                    <ol type="a">
                        <li>@rep.Name</li>
                    </ol>
                </td>
            }
        </tr>
    }
</table>

Answer 2

只是为了给你一个粗略的想法......

您必须将学生列表传递到您的视图/ cshtml

这是一个伪代码

@model List<Student>

<div>
<h2>Male</h2>
<ul>
@foreach(var maleStudent in Model.Where(g=>g.Gender == "Male"))
{
<li>@maleStudent.Name</li>
}
</ul>
</div>

<div>
<h2>Female</h2>
<ul>
@foreach(var femaleStudent in Model.Where(g=>g.Gender == "Female"))
{
<li>@femaleStudent .Name</li>
}
</ul>
</div>

剃刀视图中的条件逻辑

2 个答案: