abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十三)

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实现仓储管理系统——展现层实现增删改查之列表视图（七）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八）

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九）

abp(net core)+easyui+efcore实现仓储管理系统——多语言（十）

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十一)

 abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十二)

 

上接(abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十二))，在这一篇文章中我们创建视图模型、列表视图、添加菜单。

 

六、创建视图模型

     1) 在visual studio 2017的“解决方案资源管理器”中，右键单击在领域层“abp.tplms.web.mvc”项目中的models目录。 选择“添加” > “新建文件夹”。并将文件夹命名为“supplier”。

     2) 鼠标右键单击“supplier”文件夹，然后选择“添加” > “类”。 将类命名为 editsuppliermodalviewmodel，代码如下。

using system.collections.generic;
using system.linq;
using abp.tplms.modules.dto;
 

namespace abp.tplms.web.models. supplier
{

    public class editsuppliermodalviewmodel
    {
        public createupdatesupplierdto  supplier { get; set; }    
    }
}

     3) 鼠标右键单击“supplier”文件夹，然后选择“添加” > “类”。 将类命名为 supplierlistviewmodel，代码如下。

using system.collections.generic;
using abp.tplms.suppliers.dto; 

namespace abp.tplms.web.models.supplier
{

    public class supplierlistviewmodel
    {
        public supplierdto supplier { get; set; }
        public ireadonlylist<supplierdto> suppliers { get; set; } 
    }
}

 

七、创建列表视图

      我们参考“abp.tplms.web.mvc”项目中的views\users目录中的index.cshtml文件，来编写我们的supplier的列表页面。

     1. 在visual studio 2017的“解决方案资源管理器”中，右键单击在展现层“abp.tplms.web.mvc”项目中的views目录。 选择“添加” > “新建文件夹”。并重命名为“supplier”。

      2. 在visual studio 2017的“解决方案资源管理器”中，鼠标右键单击“supplier”文件夹，然后选择“添加” > “新建项…”。 在“添加新项-abp.tplms.web.mvc”对话框中，选择“razor视图”，并将名称命名为index.cshmtl。

     3. 在index视图中，我们通过循环遍历，输出模块信息。代码如下。

@using abp.tplms.web.startup
@model abp.tplms.web.models.supplier.supplierlistviewmodel 

@{
    viewdata["title"] = pagenames.supplier;
} 

<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("supplier")

                </h2>

                <button type="button" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" data-toggle="modal" 
data-target="#suppliercreatemodal">

                    <i class="material-icons">add</i>

                </button>
                <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.supplier.code)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.name)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.linkname)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.mobile)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.address)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.tel)

                            </th>
                            <th>

                                @html.displaynamefor(model => model.supplier.status)

                            </th>
                            <th></th>

                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var item in model.suppliers)
                        {

                        <tr>
                            <td>
                                @html.displayfor(modelitem => item.code)

                            </td>

                            <td>
                                @html.displayfor(modelitem => item.name)

                            </td>
                            <td>
                                @html.displayfor(modelitem => item.linkname)

                            </td>
                            <td>
                                @html.displayfor(modelitem => item.mobile)

                            </td>

                            <td>
                                @html.displayfor(modelitem => item.address)

                            </td>
                            <td>
                                @html.displayfor(modelitem => item.tel)

                            </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 href="#" class="waves-effect waves-block edit-supplier" data-supplier-id="@item.id" data-toggle="modal"
 data-target="#suppliereditmodal"><i class="material-icons">edit</i>@l("edit")</a></li>

                <li><a href="#" class="waves-effect waves-block delete-supplier" data-supplier-id="@item.id" data-module-name="@item.name">
<i class="material-icons">delete_sweep</i>@l("delete")</a></li>

                                </ul>

                            </td>

                        </tr>

                        }

                    </tbody>
                </table>                

            </div>
        </div>
    </div>
</div>

 

八、添加菜单

       1. 在visual studio 2017的“解决方案资源管理器”中，打开单击在展示层“abp.tplms.web.mvc”项目中的startup目录。 找到tplmsnavigationprovider.cs文件。如下图。

 

       2. 在visual studio 2017的“解决方案资源管理器”中，打开tplmsnavigationprovider.cs文件，此文件就是abp系统的菜单文件，我们进行如下修改，添加一个新的菜单supplier。如下图。

 

   

 .additem(
                    new menuitemdefinition(
                        pagenames.supplier,
                        l("supplier"),
                        url: "supplier",
                        icon: "people"
                    )
                )

     3.在visual studio 2017中按f5运行应用程序。登录之后，点击“supplier”目录，我们可以看到供应商列表页面。如下图。