Ordered Table layout in Index.cshtml

Question

I have a table as shown in the attached picture. I wish to be able to order it by "group" then in the name column list all the names that apply to that specific group (without a line separating each "name" and so only line between the "groups". It seems to have ordered the table by "name" not group and i'm not sure why or how.

My Edit.cshtml looks like this

 @model IEnumerable<LF.Models.Volume>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
    <a asp-action="DeleteAll">Delete All</a>
    <a asp-action="UploadFile">Upload File</a>
</p>

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.group)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.group)                    
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.name)
            </td>

                <td>
                    <a asp-action="Edit" asp-route-id="@item.id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
    </table>

Each Volume(the "name" column)(and each Volume belongs to a "group") is added to the model individually and the model looks like this:

namespace LF.Models
{
    public class Volume
    {
        public Volume()
        {
            id = Guid.NewGuid().ToString();
        }
    [Key]
    public string id { get; set; }

    public string group { get; set; }

    public string name { get; set; }

    public string Colour { get; set; }

current table image

table to look more like this

I am new to C#, jquery etc (from Qt) so still trying to get my head around it all.

Thank you!

Answer 1

Divide the list into two lists. The first list contains groups with compound names and the second list contains groups with simple names

@model IEnumerable<LF.Models.Volume>

  @{
     ViewData["Title"] = "Index"; 
     Layout = "~/Views/Shared/_Layout.cshtml"; 
     var partOneItems=Model.Where(a => a.group.Split('-').Count() > 1).OrderBy(a => a.group).ToList();
     var partTwoItems=Model.Where(a => a.group.Split('-').Count() == 1).OrderBy(a => a.group).ToList();
  }

  <h1>Index</h1>

  <p>
    <a asp-action="Create">Create New</a>
    <a asp-action="DeleteAll">Delete All</a>
    <a asp-action="UploadFile">Upload File</a>
  </p>

  <table class="table">
    <thead>
      <tr>
        <th>
          @Html.DisplayNameFor(model => model.group)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.name)
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @foreach (var item in partOneItems) {
      <tr>
        <td>
          @Html.DisplayFor(modelItem => item.group)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.name)
        </td>

        <td>
          <a asp-action="Edit" asp-route-id="@item.id">Edit</a> |
          <a asp-action="Details" asp-route-id="@item.id">Details</a> |
          <a asp-action="Delete" asp-route-id="@item.id">Delete</a>
        </td>
      </tr>
      }
       @foreach (var item in partTwoItems) {
      <tr>
        <td>
          @Html.DisplayFor(modelItem => item.group)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.name)
        </td>

        <td>
          <a asp-action="Edit" asp-route-id="@item.id">Edit</a> |
          <a asp-action="Details" asp-route-id="@item.id">Details</a> |
          <a asp-action="Delete" asp-route-id="@item.id">Delete</a>
        </td>
      </tr>
      }
    </tbody>
  </table>

EDIT: or for sort list use

Model = Model.OrderBy(a => a.group.Split('-').Count() > 1 ? 0 : 1).ThenBy(a => a.group).ToList();

Full code

@model IEnumerable<LF.Models.Volume>

@{ 
   ViewData["Title"] = "Index";
   Layout = "~/Views/Shared/_Layout.cshtml"; 
   Model = Model.OrderBy(a => a.group.Split('-').Count() > 1 ? 0 : 1).ThenBy(a => a.group).ToList();
}

<h1>Index</h1>

<p>
  <a asp-action="Create">Create New</a>
  <a asp-action="DeleteAll">Delete All</a>
  <a asp-action="UploadFile">Upload File</a>
</p>

<table class="table">
   <thead>
      <tr>
        <th>
          @Html.DisplayNameFor(model => model.group)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.name)
        </th>
        <th></th>
      </tr>
   </thead>
   <tbody>
    @foreach (var item in partOneItems) 
    {
      <tr>
        <td>
          @Html.DisplayFor(modelItem => item.group)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.name)
        </td>

        <td>
          <a asp-action="Edit" asp-route-id="@item.id">Edit</a> |
          <a asp-action="Details" asp-route-id="@item.id">Details</a> |
          <a asp-action="Delete" asp-route-id="@item.id">Delete</a>
        </td>
      </tr>
    }
   </tbody>
</table>