ExtAspNet应用技巧(十三) - 后台主页面(IFrame框架)

本秂侑毒 提交于 2020-03-21 07:47:44

书接上回,在系统登录之后,就要显示主页面了,先看下效果:

界面效果



点击“退出系统”按钮:






整个页面被分为了三部分,上面的是页面标题和工具栏;左侧的是系统菜单;右侧的主内容区域。

需要特别注意的是,在主内容区域我们使用了IFrame,这也是ExtAspNet提倡的一种做法。
这种IFrame框架不仅加快了页面的加载速度,而且代码逻辑以页面的形式组织划分,对于代码编写调试以及多人开发都极其有利。


ASPX标签


    <ext:PageManager ID="PageManager1" AutoSizePanelID="BorderLayout1" HideScrollbar="true"
        runat="server" />
    <ext:BorderLayout ID="BorderLayout1" ShowBorder="false" runat="server">
        <Regions>
            <ext:Region ID="regionTop" Height="60px" ShowBorder="false" ShowHeader="false" Position="Top"
                Layout="Fit" runat="server">
            </ext:Region>
            <ext:Region ID="regionLeft" Split="true" Width="200px" Margins="0 0 0 0" ShowHeader="true"
                Title="菜单" EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
            </ext:Region>
            <ext:Region ID="regionCenter" ShowHeader="false" EnableIFrame="true" IFrameUrl="~/admin/default.aspx"
                IFrameName="main" Margins="0 0 0 0" Position="Center" runat="server">
            </ext:Region>
        </Regions>
    </ext:BorderLayout>
    

在这段ASPX标签中,还是有一些ExtAspNet的技巧的:
  • PageManager的AutoSizePanelID用来指定自动全屏的容器
  • BorderLayout的ShowBorder="false"用来去除此容器的外边框(1px的蓝色边框)
  • regionTop通过Position="Top"设置显示在页面的上部(同理regionLeft显示在左侧,regionCenter显示在中间)
  • regionTop和regionLeft容器通过Layout="Fit"来标示只有一个子控件,并且这个子控件充满父容器
  • regionCenter通过EnableIFrame,IFrameUrl,IFrameName三个属性来指定其内部是一个Iframe


下面我们来仔细看下regionTop的声明:
    <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="首页" 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="系统设置" 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="退出系统" ConfirmText="确定退出系统?" 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>
    


可以看到regionTop有一个Position="Bottom"的工具栏(我们会在这个工具栏放置一些常用的按钮),和仅有的一个子控件ContentPanel1。
此子控件会填充整个regionTop区域而不必设置宽度和高度,这得益于regionTop的Layout="Fit"属性(你也可以试着把这个属性去掉看会发生什么)。

regionLeft控件留空是因为我们以后会通过动态的方式为其添加树形的菜单。

注:ContentPanel是ExtAspNet中唯一一个可以放置非ExtAspNet控件(比如html标签,asp.net控件)的控件。



两个需要关注的地方

1. 点击按钮在Iframe中打开页面,这是很多人经常遇到的问题
    <ext:Button ID="Button1" runat="server" Text="首页" EnablePostBack="false" OnClientClick="window.open('./admin/default.aspx', 'main');">
    </ext:Button>
    

首先设置EnablePostBack="false"来禁用点击按钮回发的行为,然后注册点击按钮的客户端脚本OnClientClick,通过JavaScript函数window.open来指定在名称为name的IFrame中打开新页面。
而这个IFrame正是regionCenter所定义的(IFrameName="main"),所以点击此按钮新页面会在主内容区域打开。

2. 点击按钮弹出确认对话框,这个实现是如此的简单以至于只需要配置一下Button的属性

    <ext:Button ID="btnExit" runat="server" Text="退出系统" ConfirmText="确定退出系统?" OnClick="btnExit_Click">
    </ext:Button>
    



后台代码

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadData();
        }
    } 
    private void LoadData()
    {
        tbtWelcome.Text = String.Format("欢迎您,<span style=\"font-weight:bold;\">{0}</span>", User.Identity.Name);
    }
    
    protected void btnExit_Click(object sender, EventArgs e)
    {
        FormsAuthentication.SignOut();
        FormsAuthentication.RedirectToLoginPage();
    }
    

如果你想运行本章中使用的代码,可以从 http://appbox.codeplex.com/SourceControl/ListDownloadableCommits.aspx 下载全部源代码。



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!