ASP.NET网站建设之代码分离

在我们传统的网站建设中通常是先设计网站页面，再利用开发工具，在网站的框架内进行功能设计。这样的网站建设存在很多弊端，其中最突出的缺点是不利于小组共同开发，各环节之间依赖性太强。

在ASP.NET中我们可以利用后台编码，把HTML用户界面设计（颜色、美学等）与页面代码区分开来。这样就可以解决我们小组的并行开发问题。

其主题思想是：美工来进行网站页面的设计，程序员对网站要实现的功能分模块开发。待到页面和功能模块开发完毕后，我们只要在美工界面中对其HTML代码稍加修改，就可以完成对应的功能。

下面就用一个小例子来进行说明。



程序员完成的功能有如下模块：

1. 在左边的Column1处点击，中间的三个内容显示小组三条新闻

2. 在Column2处点击，中间的三个内容显示三个人员情况

3. 在Column3处点击，弹出一个窗口显示一张照片。

为了测试，我们可以将这三个功能分别交给两个程序员来做。

甲程序员：完成模块1和2

1． 甲可以先建立一个WebApplication,在界面上放入两个ImageButton:IBtnNews，IBtnMember和六个Label:Lb1Title,Lb1Detail, Lb2Title,Lb2Detail, Lb3Title,Lb3Detail。生成一个Web应用程序，点击IBNews,六个Label显示小组新闻，点击IBMember,六个Label显示小组三名成员。这样我们就为建立源文件创建好了条件。

2． 我们建立一个C#类文件CodeBehind.cs。

3． 由于我们是建立的Web程序，则需要在添加引用中，添加System.Web.dll应用。

4． 去掉构造函数，因为后台编码不需要创建类。

5． 让类从Page对象上继承功能，即

public class CodeBehind:System.Web.UI.Page

6． 将刚才生成的WebApplication中的相关代码复制进来，主要有两个部分：声明部分和方法部分，在这里把应用程序中的可访问级别protected，改为public，因为只有这样外部的代码才可以访问我们的方法和变量，要注意的是页面上所有与后台编码文件交户的控件都要有一个对应的本地变量。

7． 生成一个CodeBehind.cs。

至此，甲程序员的工作完成。乙程序员可以用同样的方式生成他的CodeBehind.cs文件。甲乙两位程序员进行代码合成，完成一个完整的CodeBehinde.cs;

代码如下：

using System;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace codetest

{

public class News:System.Web.UI.Page

{

public System.Web.UI.WebControls.Label Lb1Title;

public System.Web.UI.WebControls.Label Lb1Detail;

public System.Web.UI.WebControls.Label Lb2Title;

public System.Web.UI.WebControls.Label Lb2Detail;

public System.Web.UI.WebControls.Label Lb3Title;

public System.Web.UI.WebControls.Label Lb3Detail;

public System.Web.UI.WebControls.ImageButton IBtnNews;

public System.Web.UI.WebControls.ImageButton IIBtnMember;

public System.Web.UI.WebControls.ImageButton IBtnContact;



public void IBtnNews_Click(object sender, System.Web.UI.ImageClickEventArgs e)

{

…………………………

}



public void IIBtnMember_Click(object sender, System.Web.UI.ImageClickEventArgs e)

{

…………………………

}





public void IBtnContact_Click(object sender, System.Web.UI.ImageClickEventArgs e)

{

string strScript="<script language=javascript>/n";

strScript+="window.alert("+"/"电话：66763467/""+");";

strScript+="</script>";

Response.Write(strScript);

}



}

}

下面我们来说明如何将建好的后台代码和美工好的网页结合起来。

1．集成工程师生成一个新的WebApplication，将CodeBehind.cs文件保存在bin目录下，并将其加入引用。

2．集成工程师将美工好的网页的图片加入对应的引用，复制HTML代码，放入新的WebApplication的页面中，这样，我们就可以看到美工好的页面展现在我们的.aspx文件中。

3．更改页面最上面的黄色代码，其中Codebehind="CodeBehind.cs"：让页面后台支持的代码指向我们写好的cs文件。Inherits="codetest.CodeBehind"：让页面继承于类CodeBehind中的功能，codetest为我们定义的名词空间。

4．在HTML代码中<body>内填入< form id="Form1" method="post" runat="server">在</body>上面加上</form>。

5．相对应的地方拖入Web控件，注意这里的ID要与cs文件中的定义对应。

6．在HTML代码中，找到Web控件，添加对应的方法名称。

这样就结合完毕。运行看看效果如何。





大家看上面在改动HTML代码的时候稍显麻烦，我们还有一种更简单的方法，只要在后台文件中加入几行代码，我们就不必在HTML中找到控件的位置，加入事件引用了。

在后台文件中加入

protected override void OnInit(EventArgs e)

//此方法引发Init事件，当服务器控件初始化是发生。

{

初始化控件方法（）

base.OnInit(e);

}

private void初始化控件方法（）;

{

this.控件名.Click+=new EventHandler(控件事件响应方法);

}

上面两个方法的加入，我们可以看到，只要我们在后台代码中加入初始化控件的方法，就可以将对应的事件加入进去，而不用在HTML代码中加入事件引用了。同样，我们将常用的Page_Load事件也可以实现

只要加入：

Private void Page_Load(object sender,System.EventArgs e)

{

代码；

}

private void初始化控件方法（）;

{

this.控件名.Click+=new System.EventHandler(控件事件响应方法);

this.Load+=new System.EventHandler(this.Page_Load);

}

EventHandler:是表示将处理不包含事件数据的事件的方法。

控件事件响应方法只要符合：方法名（object sender,System.EventArgs e）就可以。



目前存在的问题：

1． 如何保持美工所作的效果不因使用了Web控件而受影响。

2． 多人在做同一个网页的时候，只能通过合并cs文件的方法来集成后台代码。不利于代码的维护。





作者Blog：http://blog.youkuaiyun.com/lfeng15/