获取专业列表

Major控制器的Index作为控制器的首页，用于显示专业的列表。

要显示专业的列表，必须要有一个能获取列表数据的方法。

虽然**MajorRepo**存在**GetList**方法可以获取数据列表，但是返回的数据是`List<Major>`类型，而我们需要一个`List<MajorViewModel>`类型的数据，因此，我们需要在**MajorService**中创建一个能将`List<Major>`类型数据转换成`List<MajorViewModel>`类型数据的方法。

# 创建GetList方法

在**MajorService**中创建**GetList**方法，该方法从仓库中获取`List<Major>`类型数据，返回`List<MajorViewModel>`类型数据。

代码如下：

```
public List<MajorViewModel> GetList()
{
    List<Major> majors = majorRepo.GetList();
    List<MajorViewModel> majorViewModels = new List<MajorViewModel>();
    foreach (var major in majors)
    {
        majorViewModels.Add(new MajorViewModel()
        {
            Id = major.Id,
            Name = major.Name,
        });
    }
    return majorViewModels;
}
```

# 将模型传递给视图

在Major控制器的Index动作中，通过MajorService的GetList方法获取模型数据，并通过`View()`返回给视图。

代码如下：

```
public IActionResult Index()
{
    return View(majorService.GetList());
}
```

# 创建视图

在Major模块的视图中添加名为Index.cshtml的视图文件。

### 添加标题

通过**ViewBag.Title = "专业管理";**将视图标题设置为专业管理。

代码如下：

```
@{
    ViewBag.Title = "专业管理";
}
```

### 添加模型

由于控制器返回给视图的是`List<MajorViewModel>`类型的数据，因此需要通过`@model`指令将模型声明为`List<MajorViewModel>`类型。

代码如下：

```
@model List<MajorViewModel>
```

### 添加"添加"按钮

专业管理页面需要有一个方式能直接跳转到**添加专业**的页面，因此需要添加一个按钮。

但是此按钮并不是真正的按钮，而是一个通过CSS伪装成按钮的`<a>`标签。

代码如下：

```
<a asp-action="Add" class="button is-primary mb-4">添加专业</a>
```

### 添加表格

通过**th标签**，可以设置表格的标题。

通过**td标签**，可以显示专业的名称。

代码如下：

```
<table>
    <thead>
        <tr>
            <th>专业名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>软件工程</td>
        </tr>
        <tr>
            <td>人工智能</td>
        </tr>
    </tbody>
</table>
```

由于模型是`List<MajorViewModel>`类型的数据，因此可以通过`@foreach`命令遍历模型，并将每次遍历的**MajorViewModel**类型数据中的Name属性的文本嵌入到`<td>`中。

代码如下：

```
@foreach (MajorViewModel major in Model)
{
    <tr>
        <td>@major.Name</td>
    </tr>
}
```

### 添加表格样式

可以通过bulma中的table类来设置表格的样式。

视图的最终代码如下：

```
@{
    ViewBag.Title = "专业管理";
}
@model List<MajorViewModel>

<a asp-action="Add" class="button is-primary mb-4">添加专业</a>
<table class="table is-bordered is-striped is-hoverable is-fullwidth">
    <thead>
        <tr>
            <th>专业名称</th>
        </tr>
    </thead>
    <tbody>
        @foreach (MajorViewModel major in Model)
        {
            <tr>
                <td>@major.Name</td>
            </tr>
        }
    </tbody>
</table>
```

除了table，其他类的作用如下：

- **is-bordered**：使表格有边框
- **is-striped**：使表格有条纹
- **is-hoverable**：使表格具有鼠标悬停效果
- **is-fullwidth**：使表格的宽度为100%

获取专业列表