BS架构ERP系统开发全系列之白金教程－主界面设计

１、打开VS2012

新建ERP专案，如图

在ERP解决方案上，右击添加新建项目，新建一个CommonTools共用类库，如图

删除Class1.cs，在CommonTools右击，添加新建类，输入BasePage，结果如图

在ERP专案上右击，打开ERP专案所在文件夹，如下图

添加４个文件夹（ＷＳ存放WebService），如图

将上一章所介绍的js类库全部下载到js文件夹，如图

在解决方案上单击显示所有文件

选中添加的的４个文件夹，右击，包在项目中

在CommonTools上添加System.Web引用

打开BasePage文件，代码修改如下

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace CommonTools
{
    public class BasePage : Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            AddCss(this.Page, "~/js/JqueryEasyUI/themes/default/easyui.css");
            AddCss(this.Page, "~/js/JqueryEasyUI/themes/icon.css");
            AddCss(this.Page, "~/js/My97DatePicker/skin/WdatePicker.css");
            AddScript(this.Page, "~/js/JqueryEasyUI/jquery.min.js");
            AddScript(this.Page, "~/js/jquery-ui/jquery-ui.min.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/jquery.easyui.min.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/locale/easyui-lang-zh_CN.js");
            AddCss(this.Page, "~/js/jquery-ui/themes/redmond/jquery-ui.css");
            AddCss(this.Page, "~/css/ui.jqgrid.css");
            AddScript(this.Page, "~/js/jqGrid/i18n/grid.locale-cn.js");
            AddScript(this.Page, "~/js/jqGrid/jquery.jqGrid.min.js");
            AddScript(this.Page, "~/js/jqGrid/jqGridExportToExcel.js");
            AddScript(this.Page, "~/js/My97DatePicker/WdatePicker.js");
            AddScript(this.Page, "~/js/JqueryEasyUI/plugins/jquery.my97.js");            
        }
        public static void AddScript(System.Web.UI.Page page, string url)
        {
            HtmlGenericControl JsControl = new HtmlGenericControl("script");
            JsControl.Attributes.Add("type", "text/javascript");
            JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
            page.Header.Controls.Add(JsControl);
        }
        public static void AddEndScript(System.Web.UI.Page page, string url)
        {
            HtmlGenericControl JsControl = new HtmlGenericControl("script");
            JsControl.Attributes.Add("type", "text/javascript");
            JsControl.Attributes.Add("src", page.ResolveClientUrl(url));
            page.Controls.Add(JsControl);
        }
        public static void AddCss(System.Web.UI.Page page, string url)
        {
            HtmlLink CssControl = new HtmlLink();
            CssControl.Href = url;
            CssControl.Attributes.Add("rel", "stylesheet");
            CssControl.Attributes.Add("type", "text/css");
            page.Header.Controls.Add(CssControl);
        }
    }
}

在ＥＲＰ上右击，添加CommonTools引用

ＥＲＰ专案上右击，添加web窗体，命名为

Index页面，按F7，切换到.cs页面，将页面继承basepage，如图

再按F7切换到.aspx页面视图

添加代码如下

    
    


    

        

            

                

                    

                        
                        

                            登出
                        
                    
                
                

                    
部门：
                    
姓名：
                
            
        
        

            

            
        
        

            

                

                    
                
            
        
    

修改顶部的li标签css样式变为横向

#top {
	BACKGROUND: url(../images/topbg.gif) repeat-x;FONT-SIZE: 12px;OVERFLOW: hidden;
}
#logo {
	BACKGROUND: url(../images/logo.gif) no-repeat; float :left; height :72px; OVERFLOW: hidden;
}
#menu{HEIGHT: 48px;OVERFLOW: hidden;}
#logo ul{padding:5px 0 0 460px;list-style:none;}
#logo ul li{float:left;HEIGHT: 30px;border:solid 1px #d4e4f3;}
#logo ul li a {
	DISPLAY: block; BACKGROUND: url(../images/digital_left.gif) no-repeat left top;COLOR: #2867b1;FLOAT: left;HEIGHT: 30px; LINE-HEIGHT: 20px; TEXT-DECORATION: none;OVERFLOW: hidden;
}
#logo ul li a SPAN {
	DISPLAY: block;FONT-WEIGHT: bold; BACKGROUND: url(../images/digital_side.gif) no-repeat right top;padding:7px 13px 0 13px;  FLOAT: left; CURSOR: pointer;OVERFLOW: hidden;HEIGHT: 30px;
}
#logo ul li a:hover{
	background:url(../images/seg_left.gif) no-repeat left top;COLOR: #fff;	
}
#logo ul li a:hover SPAN
{   
	background:url(../images/seg_side.gif) no-repeat right top;
}
#SubMenu {
	MARGIN-LEFT: 460px;COLOR: #fff;FONT-WEIGHT: bold; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: left;
}
#SubMenu div{
	float:left;width:200px;
}
#TreeView1 a:link,a:visited {text-decoration:none; color:#126499;}
#TreeView1 a:hover,a:active {text-decoration:underline; color:#126499;}
#TreeView1 tr:hover {
    background-color:#e6e6e6;
}
.easyui-tree,.easyui-tree .tree-node-selected,.easyui-tree span:hover {    
    color:#126499
}

至此主页面已经做完，在浏览器中查看即可，看到如下效果页面（建议用google chrome）

QQ：25489181

邮箱：[email protected]

针对程序员的养生保健微信18136761128(专治颈椎、久坐导到慢性疾病，已经上央视了，假一罚十)