创建一个由enum分组的任务表

时间:2016-07-06 22:44:10

标签: c# asp.net-mvc entity-framework enums

我在Entity Framework MVC 5 app中有这个模型:

public class Task
{
    public int ID {get;set;}
    public string Name {get;set;}
    public TaskStatus Status {get;set;}
}

 public enum TaskStatus
    {
        ToDo = 0,
        InProgress = 1,
        InTesting = 2,
        Done = 3
    }

在其中,我想创建一个视图,该视图将是一个表,其中各种任务将按其TaskStatus进行分组,每个任务状态为表列,一些属性为该列的项目。到目前为止,我已经成功地对这些项目进行了分组:

// suppose a,b,c,d,e are Task objects
var list = new List<Task> { a,b,c,d,e };
var groupedList = list.GroupBy(l => l.Status);

这产生了可枚举的我可以遍历并获取键+所有值。但是我如何将它们放入表中(使用Razor / view逻辑创建表)?任何帮助将不胜感激(如果你有一个更简单的方法来做到这一点,不使用GroupBy首先按状态对项目进行分组,采取另一种方法)。

1 个答案:

答案 0 :(得分:1)

最简单的方法是在服务器端进行分组。

模型

public class TaskGroup
{
    public TaskStatus Status { get; set; }
    public IList<Task> Tasks { get; set; }

    public TaskGroup()
    {
        Tasks = new List<Task>();
    }
}

public class Task
{
    public int ID { get; set; }
    public string Name { get; set; }
    public TaskStatus Status { get; set; }
}

public enum TaskStatus
{
    ToDo = 0,
    InProgress = 1,
    InTesting = 2,
    Done = 3
}

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var tasks = new List<Task>
        {
            new Task { ID = 1, Name = "One", Status = TaskStatus.ToDo},
            new Task { ID = 2, Name = "Two", Status = TaskStatus.InProgress},
            new Task { ID = 3, Name = "Three", Status = TaskStatus.InTesting},
            new Task { ID = 4, Name = "Four", Status = TaskStatus.Done},
            new Task { ID = 5, Name = "Five", Status = TaskStatus.ToDo},
            new Task { ID = 6, Name = "Six", Status = TaskStatus.InProgress}
        };

        var model = tasks.GroupBy(t => t.Status, t => t)
            .Select(g => new TaskGroup {Status = g.Key, Tasks = g as IList<Task>})
            .ToList();

        return View(model);
    }
}

视图

@model IList<DemoMvc.Models.TaskGroup>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Index</title>
</head>
<body>
    <div class="container">
        <table class="table table-bordered" width="200">
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @item.Status
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            @foreach (var task in item.Tasks)
                            {
                                <tr>
                                    <td>@task.ID</td>
                                    <td>@task.Name</td>
                                </tr>
                            }
                        </table>
                    </td>
                </tr>
            }
        </table>
    </div>
</body>
</html>

输出

enter image description here

另一种方法是使用像Telerik Kendo Grid这样的控件,你不需要在服务器端做任何事情。