EasyUI and EasyUI

EasyUI and EasyUI

Preparation Phase

This cloud platform system uses easyui1.3.2, and EasyUI is a collection of div layout and jquery.

Decompress the jquery-easyui package

, You can see

What we really need is framed in red in the above files. The following describes the files in the red box.

 

1 Demo

Demo is a small example of easyui. You can open it in a browser. For example, double-click .. \ jquery-easyui \ demo \ datebox file basic, open, right-click on the open interface to view the source code (or use firebug to view), we can see the div layout of this page, and referenced js and css files

2 Local

Local is the Language Pack we only need easyui-lang-zh_CN, is the encapsulation of Simplified Chinese.

 

3jquery-1.8.0.min

Jquery-1.8.0.min is the jquery we often say, is the encapsulation of javascript Functions, jquery. easyui. min is based on jquery. So to reference jquery. easyui. min, the jquery-1.8.0.min must be referenced.

 

4 themes

Themes has various styles, including black and gray... In the demo, default is used,

.

The icons folder contains public icons in these styles.

Icon.css defines the display mode and path of the flag.

 

 

Apply easyui in MVC applications

So how can we apply easyui in MVC applications.

1. What we need in jquery-easyui is retained, or all of them can be retained, because easyui does not have much influence on the loading of a program.

1. Copy the jquery-easyui folder to the Content folder of the client.

The above is the idea of easyui.

Specific to our basic system:

1. Paste the files required by the four system frameworks to the corresponding positions:

This completes most of the work.

1. Next, we need to change the initial layout page of the system.
   1. Open _ ViewStart. cshtml and change the layout page to EasyUILayout. cshtml.

1. Create a new solution and run it.
2. Then you will certainly have questions about how the campus page is displayed within the framework.

It is actually very simple. We can find it in EasyUILayOut. cstml

Here @ RenderBody is the location where the content on the system start page is stored. That is ~ Content in/Campus/Index.

 

 

 

Each layout page can be referenced by each other. Therefore, we reference the Add project distribution page in a partial paging manner on the personnel index page.

Locate the index in the personnel on the start page of global. aspx,

 

 

Generate a new solution and run it.

The layout page also has the concept of Section. That is to say, if a Section is defined in a view template, it can be presented separately. The usage is as follows:

@ RenderPage ("~ /Views/Shared/_ Header. cshtml ")

@ RenderBody ()

@ RenderSection ("footer ")

Of course, you must define the section in the view. Otherwise, an exception occurs:

@ Section footer {

<B> Footer Here </B>

}

 

 

This article describes the use of easyui. If you have any questions, please contact me