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

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

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

相關文章