abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)
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。如下图。
上一篇: Git分支和版本回退
推荐阅读
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试(九)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之四(三十)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理七(二十五)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之二(二十八)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
-
abp(net core)+easyui+efcore仓储系统——展现层实现增删改查之控制器(六)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之七(三十三)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之九(三十五)