Index.cshtml 中的有序表布局

Posted 2023-04-01

【中文标题】Index.cshtml 中的有序表布局

【英文标题】：Ordered Table layout in Index.cshtml

【发布时间】：2021-10-17 03:51:44

【问题描述】：

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

我的 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）的新手，所以我仍在努力理解这一切。

谢谢！

【参考方案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>

【讨论】：

@tj26 我还在答案中介绍了第二种方法，它在技术上更适合您使用。