ASP.NET網(wǎng)站建設(shè)之代碼分離
發(fā)布時(shí)間：2013-11-22 瀏覽：315打印字號(hào)：大中小
在我們傳統(tǒng)的網(wǎng)站建設(shè)中通常是先設(shè)計(jì)網(wǎng)站頁面，再利用開發(fā)工具，在網(wǎng)站的框架內(nèi)進(jìn)行功能設(shè)計(jì)。這樣的網(wǎng)站建設(shè)存在很多弊端，其中最突出的缺點(diǎn)是不利于小組共同開發(fā)，各環(huán)節(jié)之間依賴性太強(qiáng)。
在ASP.NET中我們可以利用后臺(tái)編碼，把HTML用戶界面設(shè)計(jì)（顏色、美學(xué)等）與頁面代碼區(qū)分開來。這樣就可以解決我們小組的并行開發(fā)問題。
其主題思想是：美工來進(jìn)行網(wǎng)站頁面的設(shè)計(jì)，程序員對(duì)網(wǎng)站要實(shí)現(xiàn)的功能分模塊開發(fā)。待到頁面和功能模塊開發(fā)完畢后，我們只要在美工界面中對(duì)其HTML代碼稍加修改，就可以完成對(duì)應(yīng)的功能。
下面就用一個(gè)小例子來進(jìn)行說明。
程序員完成的功能有如下模塊：
1. 在左邊的Column1處點(diǎn)擊，中間的三個(gè)內(nèi)容顯示小組三條新聞
2. 在Column2處點(diǎn)擊，中間的三個(gè)內(nèi)容顯示三個(gè)人員情況
3. 在Column3處點(diǎn)擊，彈出一個(gè)窗口顯示一張照片。
為了測(cè)試，我們可以將這三個(gè)功能分別交給兩個(gè)程序員來做。
甲程序員：完成模塊1和2
1． 甲可以先建立一個(gè)WebApplication,在界面上放入兩個(gè)ImageButton:IBtnNews，IBtnMember和六個(gè)Label:Lb1Title,Lb1Detail, Lb2Title,Lb2Detail, Lb3Title,Lb3Detail。生成一個(gè)Web應(yīng)用程序，點(diǎn)擊IBNews,六個(gè)Label顯示小組新聞，點(diǎn)擊IBMember,六個(gè)Label顯示小組三名成員。這樣我們就為建立源文件創(chuàng)建好了條件。
2． 我們建立一個(gè)C#類文件CodeBehind.cs。
3． 由于我們是建立的Web程序，則需要在添加引用中，添加System.Web.dll應(yīng)用。
4． 去掉構(gòu)造函數(shù)，因?yàn)楹笈_(tái)編碼不需要?jiǎng)?chuàng)建類。
5． 讓類從Page對(duì)象上繼承功能，即
public class CodeBehind:System.Web.UI.Page
6． 將剛才生成的WebApplication中的相關(guān)代碼復(fù)制進(jìn)來，主要有兩個(gè)部分：聲明部分和方法部分，在這里把應(yīng)用程序中的可訪問級(jí)別protected，改為public，因?yàn)橹挥羞@樣外部的代碼才可以訪問我們的方法和變量，要注意的是頁面上所有與后臺(tái)編碼文件交戶的控件都要有一個(gè)對(duì)應(yīng)的本地變量。
7． 生成一個(gè)CodeBehind.cs。
至此，甲程序員的工作完成。乙程序員可以用同樣的方式生成他的CodeBehind.cs文件。甲乙兩位程序員進(jìn)行代碼合成，完成一個(gè)完整的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=" ";
Response.Write(strScript);
}
}
}
下面我們來說明如何將建好的后臺(tái)代碼和美工好的網(wǎng)頁結(jié)合起來。
1．集成工程師生成一個(gè)新的WebApplication，將CodeBehind.cs文件保存在bin目錄下，并將其加入引用。
2．集成工程師將美工好的網(wǎng)頁的圖片加入對(duì)應(yīng)的引用，復(fù)制HTML代碼，放入新的WebApplication的頁面中，這樣，我們就可以看到美工好的頁面展現(xiàn)在我們的.aspx文件中。
3．更改頁面最上面的黃色代碼，其中Codebehind="CodeBehind.cs"：讓頁面后臺(tái)支持的代碼指向我們寫好的cs文件。Inherits="codetest.CodeBehind"：讓頁面繼承于類CodeBehind中的功能，codetest為我們定義的名詞空間。
4．在HTML代碼中內(nèi)填入< form id="Form1" method="post" runat="server">在上面加上。
5．相對(duì)應(yīng)的地方拖入Web控件，注意這里的ID要與cs文件中的定義對(duì)應(yīng)。
6．在HTML代碼中，找到Web控件，添加對(duì)應(yīng)的方法名稱。
這樣就結(jié)合完畢。運(yùn)行看看效果如何。
大家看上面在改動(dòng)HTML代碼的時(shí)候稍顯麻煩，我們還有一種更簡(jiǎn)單的方法，只要在后臺(tái)文件中加入幾行代碼，我們就不必在HTML中找到控件的位置，加入事件引用了。
在后臺(tái)文件中加入
protected override void OnInit(EventArgs e)
//此方法引發(fā)Init事件，當(dāng)服務(wù)器控件初始化是發(fā)生。
{
初始化控件方法（）
base.OnInit(e);
}
private void初始化控件方法（）;
{
this.控件名.Click+=new EventHandler(控件事件響應(yīng)方法);
}
上面兩個(gè)方法的加入，我們可以看到，只要我們?cè)诤笈_(tái)代碼中加入初始化控件的方法，就可以將對(duì)應(yīng)的事件加入進(jìn)去，而不用在HTML代碼中加入事件引用了。同樣，我們將常用的Page_Load事件也可以實(shí)現(xiàn)
只要加入：
Private void Page_Load(object sender,System.EventArgs e)
{
代碼；
}
private void初始化控件方法（）;
{
this.控件名.Click+=new System.EventHandler(控件事件響應(yīng)方法);
this.Load+=new System.EventHandler(this.Page_Load);
}
EventHandler:是表示將處理不包含事件數(shù)據(jù)的事件的方法。
控件事件響應(yīng)方法只要符合：方法名（object sender,System.EventArgs e）就可以。
目前存在的問題：
1． 如何保持美工所作的效果不因使用了Web控件而受影響。
2． 多人在做同一個(gè)網(wǎng)頁的時(shí)候，只能通過合并cs文件的方法來集成后臺(tái)代碼。不利于代碼的維護(hù)。
