Conditional logic in razor view

Question

I have a table with two columns on which I want to display a list of say students in two different columns based on gender. All this data in the model is represented as one dataset but when it comes to the view I would like to split it as shown below

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

How can I implement this logic in my cshtml view. Take note that this is a two column table and one will be enumerating over the data.

Please find below the razor code I was using.

<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

First of all, you should avoid any logic in your view; all the logic should be in the controller.

With that in mind, you can try the following approach:

Define a view model class to hold the data in two separate collections:

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

In your controller split the data:

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);
    }
}

In your views folder create two views: - one for displaying the result of SomeAction method (tipically SomeAction.cshtml) - one partial view for displaying the list of student separated by gender in order to reuse the markup

SomeAction view

@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>

The partial view will render the list of students:

@model IEnumerable<Student>

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

Hope this helps!

EDIT

Now, after you posted your code, it's easier to spot the problem: you are not emitting two table cells for each row but only one. When you iterate over the collection of students you must create, for each student, a row with two cells. To do that, just put an empty cell after the name of a male student and before the name of a female like this:

<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

Just to give you a rough idea....

You must be passing list of students in to your view/cshtml

here's a pseudocode

@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>