abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十三)

abp(net core)+easyui+efcore實現倉儲管理系統目錄

abp(net core)+easyui+efcore實現倉儲管理系統——ABP整體介紹(一)javascript

abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)html

abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)java

 abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)ide

abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務(五)post

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之控制器(六)測試

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之列表視圖(七)ui

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之增刪改視圖(八)url

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之菜單與測試(九)spa

abp(net core)+easyui+efcore實現倉儲管理系統——多語言(十)3d

abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一)

 abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十二)

 

上接(abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十二)),在這一篇文章中咱們建立視圖模型、列表視圖、添加菜單。

 

6、建立視圖模型

     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; } 
    }
}

 

7、建立列表視圖

      咱們參考「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>

 

8、添加菜單

       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」目錄,咱們能夠看到供應商列表頁面。以下圖。

 

相關文章
相關標籤/搜索