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

时间:2017-06-30 12:39:51

标签: c# asp.net-mvc twitter-bootstrap

假设我迭代所有受限制的控制器及其相关操作,并在我的班级中添加这些控制器和操作。

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,其中将显示一个新的或下一个控制器名称。

另外,请通过向我提供有关如何实施此设计的提示。

我现在的问题是:

1)如何在div中显示顶部的控制器名称及其相关操作,并为每个控制器重复该操作?

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

enter image description here

1 个答案:

答案 0 :(得分:2)

我已经重写了这个答案,如果你想看到旧的和坏的,请看看改变历史。

正如您在评论中看到的那样,大多数人表示您必须使用.GroupBy来获取单ControllerActionItems。我现在把它重写为两个类,一个叫做ControllerBlock,一个叫ControllerAction

ControllerBlock (现在与ControllerAction有1-n关系):

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

<强> ControllerAction:

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

假设这些矩形确实是CheckBox控件,您可以使用所谓的编辑器模板来减少代码并最大限度地减少Controller中的问题。

根据您要使用代码的位置,您可以将其放入Views - &gt; Shared - &gt; EditorTemplates

现在创建一个完全按照模型命名的视图,在此处:ControllerBlock

EditorTemplate structure in solution

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

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

示例:

SomeModel:

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上的列的更多信息,请访问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;
}