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

時間 2019-11-05

標籤 abp core easyui+efcore easyui efcore 實現倉儲管理系統展示增刪列表視圖欄目快樂工作简体版

原文原文鏈接

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實現倉儲管理系統——定義倉儲並實現 (四)瀏覽器

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

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

上接上一篇文章（abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之控制器（六））。ui

2、建立Index視圖spa

在首頁中，咱們通常會用列表來展現信息。爲了使用ASP.NET MVC Core強視圖帶給咱們的好處（模型綁定、輸入校驗等等），咱們須要建立一個ViewModel來進行模型綁定。由於ABP提倡爲每一個不一樣的應用服務提供不一樣的Dto進行數據交互，展現對應Dto。那咱們建立的ViewModel就須要包含這幾個模型，方可在一個視圖中完成多個模型的綁定。code

1，建立視圖模型htm

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>