The following starts building the web with Easyui in Usermanager.web.
1. Delete the controllers, models and views (shared and Web. config can be saved) from the following file
2. To take advantage of Easyui, first go to download jquery-easyui-1.3.2.zip on the Internet, and download a Easyui-1.3.2.chm help document for easy reference.
Here is a download link to share:
Link: Http://pan.baidu.com/s/1c2xAGKS Password: pkd6
The Easyui after decompression is like this.
3. Right click on Controllers to add a new controller-homecontroller.cs
This section is a quick look at the MVC video from the Geek Academy mentioned earlier.
4. In the views view to create HomeController.cs corresponding view, views first add a new folder, named Home
Then create a new view under Home
Named index, do not select the master, Add.
At this point the Web project has added HomeController.cs and index.aspx two files, the former used to write the background judgment logic, the latter is used to represent the page. So open Home-index, we just downloaded the Easyui is also used here.
Forget to introduce, Easyui is a simple, powerful JS framework, developed on the basis of jquery.
http://www.jeasyui.com/index.php
Here is its official website, which has many demos and tutorials to learn to watch and use.
5. Add the downloaded Easyui to add to web-content below, we can copy some of the files to use. Create a new Easyui folder under content (like the new home operation in views, the repetition is not shown).
Copy the Jquery-1.8.0.min.js and jquery.easyui.min.js directly from the jquery-easyui-1.3.2 directory (shortcut key CTRL + C) to Content-easyui (shortcut key Ctrl + V), Similarly, copy the easyui-lang-zh_cn.js and the entire Themes folder under the locale.
6. Add the JS Library to the (home) index. (because the project views may contain multiple index.aspx, where the front parenthesis prefix indicates which view is the index page)
Add Jquery-1.8.0.min.js, Jquery.easyui.min.js, easyui-lang-zh_cn.js! in order
Then add the Easyui/themes/default/easyui.css and Themes/icon.css styles for the (home) index.
7. Use the layout style in Easyui to add to (home) index.
You can view the demo sample in the downloaded Jquery-easyui-1.3.2/demo/layout first, or open the Easyui-1.3.2.chm directly (note: Put the CHM under the Easyui folder, otherwise open does not display the full picture), consult the use of layout.
<body class= "Easyui-layout" > <div data-options= "region: ' North ', Border:false" style= "HEIGHT:61PX; Background: #0660bb; " > </div><div data-options= "region: ' West ', split: True,title: ' Menu bar ' "style=" width:250px;padding:10px; " >west content</div><div data-options= "region: ' South ', Border:false" style= "Height:20px;background: #ccc ;p adding:1px "> Current login: Jennyjiang</div><div data-options=" region: ' Center ', title: ' Main Panel ' "style=" padding : 10px ">hello world!</div></body>
Replace <body> in (home) index with the code above to show layout:
Layout according to the order of the upper and Lower middle (north-west-east-south-center), in the use of Easyui layout, the body must be set class= "Easyui-layout", otherwise it is not used, The Easyui style is adjusted by data-options. Where the center is to be added, the other panels can be removed without being displayed. For data-options of layout, please refer to the CHM Help document learning.
8. Using the Easyui tree, set the menu bar
Using the second format in the Help document, define the UL with the TT ID, and pass the tree content in JSON format, defined in MessController.cs.
(home) The body in index is as follows:
<Bodyclass= "Easyui-layout"> <Divdata-options= "region: ' North ', Border:false"style= "Height:61px;background: #0660bb;"> <imgsrc= "/content/images/logo.png"/> </Div> <Divdata-options= "region: ' West ', Split:true,title: ' Menu bar '"style= "width:250px;padding:10px;"> <ulID= "tt"></ul> </Div> <Divdata-options= "region: ' South ', Border:false"style= "Height:20px;background: #ccc;p adding:1px">Current Login: Jennyjiang</Div> <Divdata-options= "Region: ' Center ', title: ' Main Panel '"style= "padding:10px">Hello world!</Div> <Scripttype= "Text/javascript"> $('#tt'). Tree ({URL:'/mess/homemenu' }); </Script></Body>
To create a new controller in controllers, MessController.cs, the code is as follows: It defines what is displayed in the tree, that is, a JSON string returns
namespaceusermanager.web.controllers{ Public classMesscontroller:controller {// //GET:/json/ PublicActionResult HomeMenu () {stringJSON =string. Empty; JSON=@"[{"" id "": 1, "" Text "": "" User list "," "Children" ": [{ "id" ": One," "Text" ":" "Ordinary User" "" "" State "": "" Closed "", "" "Children" ": [{" "" "" "" "": 111, "" Text "": "" User Add "" },{"" id ":", "" Text "": "" User Function ""} " },{"" "id" ":" "Text" ":" "Super User" "" " State "": "" Closed "", "" Children "": [{"" id "": 121, "Text" ":" "user added" "},{" "id" ": 122," "Text" " : "User function" "}]},{" "id" ":" "text "": "" index.html "" },{"" id ":", "" Text "": "" about.html ""},{ "" id "": "," "Text" ":" "Welcome.html" "}"}]"; returnContent (JSON); } }}
The display page is as follows:
9. Using Easyui tab, click Add User on the left menu bar to display in the right main panel
(home) The body in index is as follows
<Bodyclass= "Easyui-layout"> <Divdata-options= "region: ' North ', Border:false"style= "Height:61px;background: #0660bb;"> <imgsrc= "/content/images/logo.png"/> </Div> <Divdata-options= "region: ' West ', Split:true,title: ' Menu bar '"style= "width:250px;padding:10px;"> <ulID= "tt"></ul> </Div> <Divdata-options= "region: ' South ', Border:false"style= "Height:20px;background: #ccc;p adding:1px">Current Login: Jennyjiang</Div> <Divdata-options= "Region: ' Center ', title: ' Main Panel '"style= "padding:10px"> <DivID= "Tabs"class= "Easyui-tabs"data-options= "Fit:true"> <Divtitle= "Home"style= "Padding:20px;display:none;">Hello world! </Div> </Div> </Div> <Scripttype= "Text/javascript"> $('#tt'). Tree ({URL:'/mess/homemenu' }); $('#tt'). Tree ({onClick:function(node) {//alert (node.text); Alert node text property when clicked //Add a new tab panel $('#tabs'). Tabs ('Add', {title:node.text, content:'Tab Body', closable:true, }); } }); </Script></Body>
When you click on the left menu bar option, the right window displays the tab for the corresponding name, and the content displays "tab Body".
But still add a new tab to repeat the click, to add a new tab code to improve, see Easyui about the tab help document, there is a exits ... The improvement code is as follows:
$ (' #tt '). Tree ({ onclick:function (node) { //alert (node.text); Alert node Text property when clicked //Add a new tab panel here, use exits to determine if the tab already exists if ($ (' #tabs '). Tabs (' Exis TS ', node.text)) { $ (' #tabs '). Tabs (' select ', Node.text); } Else { $ (' #tabs '). Tabs (' Add ', { title:node.text, content: ' Tab Body ', closable:true, }); } } });Once modified, when you repeatedly click the same menu bar, no new tab is created and you return to the tab you have built.
In addition, the discovery clicks the folder, also creates the new tab, through "The ID" filter filter to handle simply.
10. Create a new view for tab instead of a simple "tab Body". The new view uses the Easyui DataGrid.
Create a new view under Views-home userevent.aspx, it is important to note that after you add the view, you must return to modify HomeController.cs, adding a userevent jump function to it.
(replace content:xx in the above code with HREF:XX)
Here you can simply refer to the DataGrid display in the Help document first.
However, each menu bar option Click, will automatically jump to the same page, when there is time, you can write more than a few views, according to node.text corresponding to the corresponding view.
Today's study first here, the next article to write log-off and database (SQLite) something.
Finally, put a picture of the result:
Asp.net+mvc+easyui+sqlite simple User System learning Journey (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
