abp(net core)+easyui+efcore实现仓储管理系统目录
abp(net core)+easyui+efcore实现仓储管理系统——abp总体介绍(一）
abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)
abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)
abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五）
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六）
上接上一篇文章（abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六））。
二、创建index视图
在首页中，我们一般会用列表来展示信息。为了使用asp.net mvc core强视图带给我们的好处（模型绑定、输入校验等等），我们需要创建一个viewmodel来进行模型绑定。因为abp提倡为每个不同的应用服务提供不同的dto进行数据交互，展示对应dto。那我们创建的viewmodel就需要包含这几个模型，方可在一个视图中完成多个模型的绑定。
1，创建视图模型
1) 在visual studio 2017的“解决方案资源管理器”中，右键单击在领域层“abp.tplms.web.mvc”项目中的models目录。 选择“添加” > “新建文件夹”。并将文件夹命名为“module”。
2) 鼠标右键单击“module”文件夹，然后选择“添加” > “类”。 将类命名为 editmodulemodalviewmodel，代码如下。
using system.collections.generic;
using system.linq;
using abp.tplms.modules.dto;
namespace abp.tplms.web.models.module
{
public class editmodulemodalviewmodel
{
public createupdatemoduledto module { get; set; }
public ireadonlylist<moduledto> modules { get; set; }
}
}
2，创建列表视图
1) 在visual studio 2017的“解决方案资源管理器”中，右键单击在展现层“abp.tplms.web.mvc”项目中的views目录。 选择“添加” > “新建文件夹”。并将文件夹命名为“module”。
2) 鼠标右键单击“module”文件夹，然后选择“添加” > “新建项…”。 在“添加新项-abp.tplms.web.mvc”对话框中，选择“razor视图”，并将名称命名为index.cshmtl，如下图。
3) 在index视图中，我们通过循环遍历，输出模块信息。代码如下。
@using abp.tplms.web.startup
@model abp.tplms.web.models.module.editmodulemodalviewmodel
@{
viewdata["title"] = pagenames.module;
}
@section scripts
{
<script src="~/view-resources/views/module/index.js" asp-append-version="true"></script>
}
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
@l("module")
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a id="refreshbutton" href="javascript:void(0);"
class="waves-effect waves-block"><i class="material-icons">refresh</i>@l("refresh")</a></li>
</ul>
</li>
</ul>
</div>
<div class="body table-responsive">
<table class="table">
<thead>
<tr>
<th>
@html.displaynamefor(model => model.module.name)
</th>
<th>
@html.displaynamefor(model => model.module.displayname)
</th>
<th>
@html.displaynamefor(model => model.module.hotkey)
</th>
<th>
@html.displaynamefor(model => model.module.iconname)
</th>
<th>
@html.displaynamefor(model => model.module.requiredpermissionname)
</th>
<th>
@html.displaynamefor(model => model.module.status)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in model.modules)
{
<tr>
<td>
@html.displayfor(modelitem => item.name)
</td>
<td>
@html.displayfor(modelitem => item.displayname)
</td>
<td>
@html.displayfor(modelitem => item.hotkey)
</td>
<td>
@html.displayfor(modelitem => item.iconname)
</td>
<td>
@html.displayfor(modelitem => item.requiredpermissionname)
</td>
<td>
@html.displayfor(modelitem => item.status)
</td>
<td class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><i class="material-icons">menu</i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a asp-action="edit" class="waves-effect waves-block"
asp-route-id="@item.id"><i class="material-icons">edit</i>@l("edit")</a>
</li>
<li>
<a asp-action="delete" class="waves-effect waves-block"
asp-route-id="@item.id"><i class="material-icons">delete_sweep</i>@l("delete")</a>
</li>
</ul>
</td>
</tr>
}
</tbody>
</table>
<a asp-action="create"
class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right">
<i class="material-icons">add</i></a>
</div>
</div>
</div>
</div>
4) 在visual studio 2017中按f5运行应用程序，在登录之后，我们在浏览器中输入http://localhost:5000/module。如下图。
