Extaspnet application tips (16)-menu management

Interface

Simulate the grid of the tree. This is a special feature of the Grid Control in extaspnet. Is it very convenient:

Click checkbox to automatically send back and modify the status of this data entry in the database:

Click Delete to bring up the confirmation dialog box. Note that this dialog box is displayed on the parent page:

You can set simple filtering conditions by pressing the button (enablepress:

Click the edit pop-up window (this window is the IFRAME Edit page, which will be introduced in the next chapter). Note that this pop-up window is also displayed on the parent page, which is also a major feature of extaspnet:

Aspx tag

<Ext: pagemanager id = "pagemanager1" autosizepanelid = "grid1" runat = "server"/> <Ext: grid id = "grid1" runat = "server" showborder = "false" enablecheckboxselect = "false" enablerownumber = "true" datakeynames = "ID" onrowcommand = "grid1_rowcommand" Title = "menu management "> <toolbars> <Ext: toolbar id = "toolbar1" position = "TOP" runat = "server"> <items> <Ext: button id = "btnonlytwolevelmenu" enablepress = "true" onclick = "btnonlytwol Evelmenu_click "runat =" server "text =" show only Level 1 Menus "> </ext: button> <Ext: toolbarseparator id = "toolbarseparator1" runat = "server"> </ext: toolbarseparator> <Ext: button id = "btnnohiddenmenu" enablepress = "true" onclick = "btnnohiddenmenu_click" runat = "server" text = "hidden menu not displayed"> </ext: button> <Ext: toolbarfill id = "toolbarfill1" runat = "server"> </ext: toolbarfill> <Ext: button id = "btnnew" runat = "server" systemicon = "New "Enablepostback =" false "text =" add menu "> </ext: button> </items> </ext: toolbar> </toolbars> <columns> <Ext: boundfield datafield = "name" headertext = "name" datasimulatetreelevelfield = "treelevel" width = "120px"/> <Ext: boundfield datafield = "navigateurl" headertext = "Link" expandunusedspace = "true"/> <Ext: checkboxfield columnid = "cbxshow" datafield = "show" headertext = "show" renderasstaticfield = "false" autopostback =" True "commandname =" show "width =" 50px "/> <Ext: boundfield datafield =" sortindex "headertext =" sort "width =" 50px "/> <Ext: windowfield text = "edit" windowid = "window1" Title = "edit" dataiframeurlfields = "ID" dataiframeurlformatstring = "~ /Admin/menu_edit.aspx? Id = {0} "width =" 50px "/> <Ext: linkbuttonfield text =" delete "confirmtext =" are you sure you want to delete this menu? "Confirmtarget =" _ parent "commandname =" delete "width =" 50px "/> </columns> </ext: Grid> <Ext: window id = "window1" runat = "server" Height = "350px" ismodal = "true" popup = "false" target = "_ parent" enableiframe = "true" iframeurl =" about: blank "width =" 500px "> </ext: WINDOW>

On the whole, this page includes three extaspnet controls: pagemanager, gird, and window. Some other extaspnet controls are included in the grid: toolbar, button, and toolbarfill.

Although some of the first few application skillsArticleBut there are some new application skills:

• The button's enablepress = "true", the button has the effect of pressing the pop-up
• Toolbarfill, used to separate the toolbar into the Left and Right Parts
• Systemicon = "new" of the button, a pre-defined icon is displayed before the button (systemicon is of the enumeration type, and close, delete, save, search, etc. are available)
• Datakeynames = "ID" of the grid, used to define the primary key of the row (Multiple can be, such as datakeynames = "ID, name"), in the backgroundCodeYou can use the datakeys attribute to obtain its value.
• Set the width for each column of the Grid. If the expandunusedspace = "true" attribute is applied to the remaining column, this column occupies all the remaining blank space.
• The linkbuttonfield confirmtarget = "_ parent" dialog box appears on the parent page.
• Target = "_ parent" of window, used to control the pop-up of this window on the parent page (this is very important in the IFRAME Framework)
• Datasimulatetreelevelfield = "treelevel" is used to simulate tree behavior.

Redefinition of the entity class of menu

To generate a simulated tree table, we need to redefine the entity class mapped from the database table x_menu and add the public int treelevel attribute.

Public class mymenu {private int ID; private string name; private string imageurl; private string navigateurl; private bool show; private int parentmenuid; private int sortindex; private int treelevel; private string remark; public String remark {get {return remark;} set {remark = value ;}} public int treelevel {get {return treelevel ;}set {treelevel = value ;}} public int sortindex {get {return sortindex;} set {sortindex = value ;}} public int parentmenuid {get {return parentmenuid ;}set {parentmenuid = value ;}} public bool show {get {return show;} set {Show = value ;}} Public String navigateurl {get {return navigateurl ;}set {navigateurl = value ;}} public String imageurl {get {return imageurl;} set {imageurl = value ;}} public string name {get {return name ;}set {name = value ;}} public int ID {get {return ID;} set {id = value ;}}}

page background Code

Public partial Class Menu: pagebase {Private Static readonly log4net. ilog logger = log4net. logmanager. getlogger (system. reflection. methodbase. getcurrentmethod (). declaringtype); # region page_load protected void page_load (Object sender, eventargs e) {If (! Ispostback) {loaddata () ;}} private void loaddata () {btnnew. onclientclick = window1.getshowreference ("~ /Admin/menu_new.aspx "," new "); bindgrid ();} private void bindgrid () {// todo bindgrid} # endregion # region events protected void grid1_rowcommand (Object sender, extaspnet. gridcommandeventargs e) {// todo grid#rowcommand} protected void handle (Object sender, eventargs e) {bindgrid ();} protected void btnnohiddenmenu_click (Object sender, eventargs E) {bindgrid () ;}# endregion}

When the page is loaded for the first time, register the client script that clicks the "add menu" button.
The first parameter of the window1.getshowreference function is the IFRAME page address in window. Note that the enableiframe = "true" attribute must be set in window1.

Bindgrid Function

This is the core function of this page. First, it queries data from the database, converts the data, and binds the data to the grid control.

 
Private void bindgrid () {sqlquery q = new select (). from <xmenu> (); If (btnnohiddenmenu. pressed) {q. where (xmenu. showcolumn ). isdue to (true);} Q. orderasc (xmenu. sortindexcolumn. columnname); xmenucollection menus = Q. executeascollection <xmenucollection> (); List <mymenu> newmenus = NULL; If (btnonlytwolevelmenu. pressed) {newmenus = xmenuhelper. getmymenucollection (menus, 1);} else {newmenus = xmenuhelper. getmymenucollection (menus);} grid1.datasource = newmenus; grid1.databind ();}
 

another static class is introduced here to convert xmenucollection to list , and calculate the depth of each menu item (treelevel attribute in mymenu ).

Public class extends {public static list <mymenu> getmymenucollection (xmenucollection oldmenus) {return getmymenucollection (oldmenus, 100);} public static list <mymenu> getmymenucollection (xmenucollection oldmenus, int maxlevel) {list <mymenu> newmenus = new list <mymenu> (); resolvemenucollection (oldmenus, newmenus, 0, 0, maxlevel); Return newmenus;} Private Static void Merge (xmenucollection oldmenus, list <mymenu> newmenus, int parentid, int level, int maxlevel) {foreach (xmenu menu in oldmenus) {If (menu. parentmenuid = parentid) {mymenu = new mymenu (); newmenus. add (mymenu); mymenu. treelevel = level; mymenu. id = menu. ID; mymenu. imageurl = menu. imageurl; mymenu. name = menu. name; mymenu. navigateurl = menu. navigateurl; mymenu. parentmenuid = menu. parentmenuid; mymenu. remark = menu. remark; mymenu. show = menu. show; mymenu. sortindex = menu. sortindex; If (level <maxlevel) {level ++; resolvemenucollection (oldmenus, newmenus, menu. ID, level, maxlevel); level --;}}}}}

Grid1_rowcommand event processing

In the row event of grid1, two types of row events need to be processed:

 
<Ext: checkboxfield columnid = "cbxshow" datafield = "show" headertext = "show" renderasstaticfield = "false" autopostback = "true" commandname = "show" width = "50px"/>
 

And

 
<Ext: linkbuttonfield text = "delete" confirmtext = "are you sure you want to delete this menu? "Confirmtarget =" _ parent "commandname =" delete "width =" 50px "/>
 

Protected void grid1_rowcommand (Object sender, extaspnet. gridcommandeventargs e) {int menuid = convert. toint32 (grid1.datakeys [E. rowindex] [0]); If (E. commandname = "delete") {xmenu. delete (menuid); bindgrid ();} else if (E. commandname = "show") {extaspnet. checkboxfield mycheckboxfield = grid1.columns. findcolumnbyid ("cbxshow") as extaspnet. checkboxfield; bool rowchecked = mycheckboxfield. getcheckstate (E. rowindex); xmenu menu = xmenu. fetchbyid (menuid); menu. show = rowchecked; menu. save (user. identity. name); bindgrid ();}}
 

So far, the entire list page is complete.

In the next chapter, we will introduce how to add and edit menus in the new window that appears.

Download all source code