在 Index.cshtml 中订购了 Table 布局

Question

我有一个table，如附图所示。我希望能够按“组”对其进行排序，然后在名称列中列出适用于该特定组的所有名称（没有一行分隔每个“名称”，因此只有“组”之间的一行）。它似乎有table 按“名称”而不是按组排序，我不确定为什么或如何。

我的 Edit.cshtml 看起来像这样

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

每个卷（“名称”列）（每个卷都属于一个“组”）被单独添加到模型中，模型如下所示：

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

我是 C#、jquery 等（来自 Qt）的新手，所以我仍在努力了解这一切。

谢谢！

Answer 1

将列表分成两个列表。第一个列表包含具有复合名称的组，第二个列表包含具有简单名称的组

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

编辑： 或排序列表使用

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

完整代码

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

在 Index.cshtml 中订购了 Table 布局

Ordered Table layout in Index.cshtml

c#

sorting

asp.net-mvc

jquery

razor