HTML how to display elements in a list on a new line

Question

I have an object with a couple lists (OrganizationIDs and Organization Names) and I would like to display the contents of the lists on separate lines. Currently, if an object has more than one item in its list it appears to just append the values like so:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.OrganizationIDs)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OrganizationNames)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
    </tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.OrganizationIDs)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.OrganizationNames)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Email)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
    </td>
</tr>
}

</table>

How would I break these elements out in to their own rows?

Answer 1

Here is a working demo: Model:

public class Model1
    {
        public List<int> OrganizationIDs { get; set; }
        public List<string> OrganizationNames { get; set; }
        public List<string> Email { get; set; }


    }

Controller(Use fake data):

public IActionResult TestListModel1()
        {
            Model1 m = new Model1 { OrganizationIDs=new List<int> {16,18 }, OrganizationNames=new List<string> { "Bulldogs","Test Org"} };
            Model1 m1=new Model1 { OrganizationIDs = new List<int> { 30 }, OrganizationNames = new List<string> { "Chevy"} };
            Model1 m2 = new Model1 { OrganizationIDs = new List<int> { 19,29 }, OrganizationNames = new List<string> { "Testing","OrganzationTest" } };
            Model1 m3 = new Model1 { OrganizationIDs = new List<int> { 16 }, OrganizationNames = new List<string> { "Bulldogs" } };
            List<Model1> l = new List<Model1> { m, m1, m2, m3 };
            return View(l);
        }

TestListModel1.cshtml:

@model IEnumerable<Model1>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.OrganizationIDs)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OrganizationNames)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        @for (var i = 0; i < item.OrganizationIDs.Count(); i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.OrganizationIDs[i])
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.OrganizationNames[i])
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email[i])
                </td>
                <td>
                </td>
            </tr>
        }

    }
</table>

result: