abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)
目錄
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實現倉儲管理系統——選單-上 (十六)
abp(net core)+easyui+efcore實現倉儲管理系統——選單-下(十七)
一.前言
通過前面的學習，我們已經有實現了傳統的ASP.NET Core MVC的增刪改查功能，也實現了使用ABP提供的WebAPI方式來實現增刪改查的功能。今天我們來學習一下標題中的另一個主要元件——EasyUI。如何通過使用Easy UI來實現一個增刪改查的頁面功能。
二、前端框架EasyUI
EasyUI國內的名氣不小的前端框架，做為開發者來說，即使沒用過，多少也聽說過，而且也比較適合DotNet環境。
雖然說現在主流的前端開發框架是Vue、Angular、React這三個，如果是開發企業裡面的資訊管理系統，個人感覺還是EasyUI方便一些。EasyUI一開始是一種基於JQuery的使用者介面外掛集合，現在其可以基於Vue、Angular、React這些最新的指令碼庫實現使用者介面。EasyUI的目標就是幫助Web開發者更輕鬆的打造出功能豐富並且美觀的UI介面。EasyUI支援各種面板以滿足使用者對於頁面不同風格的喜好。EasyUI為提供了大多數UI控制元件的使用，如：表單、下拉框、選單、對話方塊、標籤、窗體、按鈕、資料網格、樹形表格、 面板等等。
EasyUI現在也更新到了1.8版本了。EasyUI下載地址： http://www.jeasyui.com/download/list.php
我下載了EasyUI 1.8.1版本，把下載的壓縮檔案jquery-easyui-1.8.1.zip解壓縮，並在“ABP.TPLMS.Web.Mvc”專案的wwwroot\lib資料夾中建立一個名為easyui-1.8的資料夾，用於儲存easyui相關的素材。如下圖。
三、在佈局檔案中引入EasyUI
還是在之前的這個專案中，我們不需要更換專案。
1) 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的views\Share目錄。 找到_Layout.cshtml檔案，使用滑鼠雙擊之後，在編輯器中開啟。只在開發環境中引用EasyUI相關css檔案。如下圖。
具體程式碼如下：
<link href="~/lib/easyui-1.8/themes/icon.css" rel="stylesheet" asp-append-version="true" /> <link href="~/lib/easyui-1.8/themes/bootstrap/easyui.css" rel="stylesheet" asp-append-version="true" />2）同樣在_Layout.cshtml檔案中，在開發環境中引用EasyUI相關js檔案。如下圖。
具體的程式碼如下：
<script src="~/lib/easyui-1.8/jquery.easyui.min.js"></script>
<script src="~/lib/easyui-1.8/locale/easyui-lang-zh_CN.js"></script>
3）上面的引入的檔案，只在開發環境中才起作用。實際情況是開發完成之後，要在生產環境中使用。我們來看看在所有環境中引用EasyUI相關css檔案。如下圖。
3）在所有環境中引用EasyUI相關js檔案。如下圖。
執行到這裡，我們已經在我們的專案中引入了EasyUI。