I. Introduction

By the previous study, we have realized the traditional ASP.NET Core MVC CRUD functions, but also enables the use ABP provides WebAPI way to implement CRUD functionality. Today we learn about another key component --EasyUI title. How to implement a CRUD page functionality by using Easy UI.

Second, the front-end frame EasyUI

EasyUI domestic reputation is not a small front-end framework, as the developer, even if not used, how many have heard of, but also more suitable for DotNet environment.

Although now the mainstream front-end development framework is Vue, Angular, React three, if there is the development of enterprise information management systems, personal feeling is EasyUI convenient. EasyUI started as a user interface based on JQuery plug-in collection, which can now implement a user interface based on Vue, Angular, React these latest script library. EasyUI goal is to help Web developers to more easily create feature-rich and beautiful UI interface. EasyUI supports a variety of skin in order to meet user preferences for different page styles. EasyUI is provided with most UI controls, such as: forms, drop-down boxes, menus, dialog boxes, labels, forms, buttons, data grids, tree tables, panels, and so on.

EasyUI now updated to version 1.8. EasyUI Download: http://www.jeasyui.com/download/list.php

I downloaded EasyUI 1.8.1 version, download the compressed file to decompress jquery-easyui-1.8.1.zip, and create a file called easyui in wwwroot "ABP.TPLMS.Web.Mvc" project \ lib folder -1.8 folder to store easyui related material. As shown below.

Third, the introduction of EasyUI in the layout file

Also in this project before, we do not need to replace items.

1) In Visual Studio 2017's "Solution Explorer", right-click the domain layer "ABP.TPLMS.Web.Mvc" project views \ Share directory. _Layout.cshtml find the file, and then use the mouse to double click to open in the editor. Only references EasyUI related css file in the development environment. As shown below.

Specific code as follows:

<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) Also in _Layout.cshtml file , a reference EasyUI related js file in the development environment. As shown below.

Specific code as follows:

   <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) the introduction of the above files and only play a role in the development environment. The reality is that after the development is completed, to be used in a production environment. We take a look at the relevant reference EasyUI css file in all environments. As shown below.

3) references EasyUI related js files in all environments. As shown below.

Perform here, we have introduced EasyUI in our project.

abp (net core) + easyui + efcore implement warehouse management system --EasyUI front page frame (XVIII)

table of Contents

Second, the front-end frame EasyUI

Third, the introduction of EasyUI in the layout file

Guess you like