如何在视图中显示列表中的控制器和操作？

Question

假设我在所有受限控制器及其相关操作中进行迭代，并将这些控制器和操作添加到我的类中。

public class ControllerActionList
{
    public string ControllerName { get; set; }
    public string ActionName { get; set; }        
}

我以这种方式手动填充以进行模拟：

public List<ControllerActionList> ControllerActionList()
{
    List<ControllerActionList> oControllerActionList = new List<ControllerActionList>
    {
        new ControllerActionList { ControllerName = "Home", ActionName = "Index" },
        new ControllerActionList { ControllerName = "Home", ActionName = "DashBoard" },
        new ControllerActionList { ControllerName = "Home", ActionName = "Chart" },

        new ControllerActionList { ControllerName = "HR", ActionName = "Leave" },
        new ControllerActionList { ControllerName = "HR", ActionName = "Loan" },
        new ControllerActionList { ControllerName = "HR", ActionName = "NoticeBoard" },

        new ControllerActionList { ControllerName = "PayRoll", ActionName = "View" },
        new ControllerActionList { ControllerName = "PayRoll", ActionName = "Edit" },
        new ControllerActionList { ControllerName = "PayRoll", ActionName = "Process" }
    };

    return oControllerActionList;
}

现在我应该使用什么逻辑在我的视图中显示这些控制器及其关联的操作名称（见下图）？

请看，控制器名称是 Home、HR 和 Payroll，操作如下所示。

您能否告诉我首先将控制器名称显示为标题并在其操作名称下方显示的最佳方式。就我而言，控制器名称在课堂上重复。

我可以做的一件事是我可以编写一个 for 循环，当控制器名称更改时，我将创建一个新的 div，其中将显示新的或下一个控制器名称。

另外请通过bootstrap给我一些关于如何实现这个设计的提示。

我现在的问题是：

1) 如何在 div 的顶部显示控制器名称及其下方的关联操作，并为每个控制器重复该操作？

2) 如何使用 bootstrap 实现所示设计？

Answer 1

我主要重写了这个答案，如果你想看看旧的和坏的，看看更改历史。

正如您在 cmets 中看到的，大多数人表示您必须使用 .GroupBy 才能获得单个 ControllerActionItems。我现在把它改写成两个类，一个叫ControllerBlock，一个叫ControllerAction。

ControllerBlock（现在与 ControllerAction 具有 1-n 关系）：

public class ControllerBlock
{
    public string ControllerName { get; set; }
    public List<ControllerAction> ControllerActions { get; set; }
}

控制器动作：

public class ControllerAction
{
    public string ActionName { get; set; }
    public bool ActionActive { get; set; }
}

假设这些矩形确实是CheckBox 控件，您可以使用所谓的编辑器模板来减少代码并尽量减少Controller 中的麻烦。

根据你想在哪里使用代码，你可以把它放到Views -> Shared -> EditorTemplates。

现在创建一个完全以您的模型命名的视图：ControllerBlock

打开ControllerBlock.cshtml 文件并通过@model ControllerBlock 引用模型，然后构建您的html：

@model ControllerBlock

<div class="col-lg-12 panel">
    @Model.ControllerName
    <hr class="row">
    @foreach (ControllerAction actionItem in Model.ControllerActions)
    {
        <div class="col-lg-4">@Html.CheckBoxFor(m => actionItem.ActionActive)<a href="~/@Model.ControllerName/@actionItem.ActionName">@actionItem.ActionName</a></div>
    }
</div>

现在您可以在此基础上轻松构建站点模型。

在各自的站点视图中，使用@Html.EditorFor(x => x.ControllerActionBlocks) 引用该编辑器模板。 ASP.NET 会自动处理剩下的事情。

SomePage.cshtml（视图）：

@model SomeModel

@{
    ViewData["Title"] = "SomePage";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

@Html.LabelFor(x => x.SomeProperty)

@Html.EditorFor(x => x.ControllerActionBlocks)   

示例：

某模型：

public class SomeModel
{
    public string SomeProperty { get; set; }
    public IEnumerable<ControllerBlock> ControllerActionBlocks { get; set; }
}

在您的Controller 中，用数据填充模型：

public IActionResult SomePage()
{
    var model = new SomeModel()
    {
        SomeProperty = "Your application model property.",
        ControllerActionBlocks = GetControllerBlocks()
    };

    return View(model);
}

待办事项： 为 md、sm、xs 设备定义您的编辑器模板。

有关引导列的更多信息，请访问Bootstrap Grid System

这是GetControllerBlocks()的定义：

public List<ControllerBlock> GetControllerBlocks()
{
    //Set ActionActive herem, if necessary
    List<ControllerAction> homeActions = new List<ControllerAction>() {
        new ControllerAction { ActionName = "Index" },
        new ControllerAction {  ActionName = "DashBoard" },
        new ControllerAction { ActionName = "Chart" }
    };
    List<ControllerAction> hrActions = new List<ControllerAction>() {
        new ControllerAction { ActionName = "Leave" },
        new ControllerAction { ActionName = "Loan" },
        new ControllerAction { ActionName = "NoticeBoard" }
        };

    List<ControllerAction> payRollActions = new List<ControllerAction>() {
        new ControllerAction { ActionName = "View" },
        new ControllerAction {  ActionName = "Edit" },
        new ControllerAction { ActionName = "Process" }
        };

    List<ControllerBlock> actionBlocks = new List<ControllerBlock>()
    {
        new ControllerBlock(){ControllerName = "Home", ControllerActions = homeActions},
        new ControllerBlock(){ControllerName = "HR",  ControllerActions =  hrActions},
        new ControllerBlock(){ControllerName = "PayRoll",  ControllerActions =  payRollActions}
    };

    return actionBlocks;
}