Extaspnet application skills (13th)-Background homepage (IFRAME Framework)

After you log on to the system, the homepage will be displayed. First, let's look at the effect:

Interface Effect

Click "exit system:

The entire page is divided into three parts: the page title and toolbar, the system menu on the left, and the main content area on the right.

Note that IFRAME is used in the main content area, which is also a practice advocated by extaspnet.
This IFRAME framework not only accelerates page loading, but alsoCodeThe logic is organized and divided in the form of pages, which is extremely advantageous for coding and debugging and multi-person development.

Aspx tag

In this aspx tag, there are still some extaspnet tips:

• The autosizepanelid of pagemanager is used to specify the automatic full-screen container.
• Borderlayout's showborder = "false" is used to remove the outer border of the container (1 px blue border)
• Regiontop uses position = "TOP" to set the upper part of the page (similarly, regionleft is displayed on the left and regioncenter is displayed in the middle)
• The regiontop and regionleft containers use layout = "fit" to indicate that there is only one child control, and this child control is filled with the parent container
• Regioncenter uses three attributes: enableiframe, iframeurl, and iframename to specify that it is an IFRAME

Next, let's take a closer look at the regiontop statement:

<Ext: region ID = "regiontop" Height = "60px" showborder = "false" showheader = "false" position = "TOP" layout = "fit" runat = "server"> <toolbars> <Ext: toolbar id = "toolbar1" position = "bottom" runat = "server"> <items> <Ext: toolbarfill id = "toolbarfill1" runat = "server"> </ext: toolbarfill> <Ext: toolbartext id = "tbtwelcome" runat = "server"> </ext: toolbartext> <Ext: toolbarseparator id = "toolbarseparator3" runat = "server"> </Ext: toolbarseparator> <Ext: button id = "button1" runat = "server" text = "Homepage" enablepostback = "false" onclientclick = "window. open ('. /admin/default. aspx ', 'main'); "> </ext: button> <Ext: toolbarseparator id =" toolbarseparator1 "runat =" server "> </ext: toolbarseparator> <Ext: button id = "btnsysconfig" runat = "server" text = "system settings" enablepostback = "false" onclientclick = "window. open ('. /admin/config. aspx ', 'main'); "> </Ext: button> <Ext: toolbarseparator id = "toolbarseparator2" runat = "server"> </ext: toolbarseparator> <Ext: button id = "btnexit" runat = "server" text = "Exit System" confirmtext = "are you sure you want to exit the system? "Onclick =" btnexit_click "> </ext: button> </items> </ext: toolbar> </toolbars> <items> <Ext: contentpanel showborder = "false" showheader = "false" bodystyle = "background-color: # 1c3e7e; "id =" contentpanel1 "runat =" server "> <Div style =" font-size: 20px; color: White; font-weight: bold; padding: 5px 10px; "> <a href = ". /main. aspx "style =" color: White; "> appbox </a> </div> </ext: contentpanel> </items> </ext: region>

You can see that regiontop has a position = "bottom" toolbar (some common buttons will be placed in this toolbar), and only one sub-control contentpanel1.
This sub-control will fill the entire regiontop area without setting the width and height, thanks to the layout = "fit" attribute of regiontop (you can also try to remove this attribute to see what will happen ).

The regionleft control is left blank because we will dynamically Add a tree menu for it in the future.

Note: contentpanel is the only control in extaspnet that can be placed with non-extaspnet controls (such as HTML tags and Asp.net controls.

Two areas of attention

1. click the button to open the page in IFRAME, which is a common problem for many people.

 
<Ext: button id = "button1" runat = "server" text = "Homepage" enablepostback = "false" onclientclick = "window. open ('. /admin/default. aspx ', 'main'); "> </ext: button>
 

First, set enablepostback = "false" to disable the message sending after the button is clicked. Then, register the client script onclientclick, and use the JavaScript function window. open to specify to open a new page in IFRAME.
This IFRAME is defined by regioncenter (iframename = "Main"), so clicking this button will open the new page in the main content area.

2. click the button to bring up the confirmation dialog box. This implementation is so simple that you only need to configure the properties of the button.

<Ext: button id = "btnexit" runat = "server" text = "Exit System" confirmtext = "are you sure you want to exit the system? "Onclick =" btnexit_click "> </ext: button>
 

Background code

 
Protected void page_load (Object sender, eventargs e) {If (! Ispostback) {loaddata () ;}} private void loaddata () {tbtwelcome. TEXT = string. format ("Welcome, <span style = \" font-weight: bold; \ ">{0} </span>", user. identity. name);} protected void btnexit_click (Object sender, eventargs e) {formsauthentication. signout (); formsauthentication. redirecttologinpage ();}
 

If you want to run the code used in this chapter, you can download all from the http://appbox.codeplex.com/SourceControl/ListDownloadableCommits.aspxSource code.