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。如下图。