基於 .NET 平台的分層架構實戰 (十一)：表示層實現與關注點分離

表示層的重要性與評價指標

表示層是系統「門面」。系統設計再優秀、代碼再漂亮、擴展性再高，用戶最終接觸的是表示層。優劣兩指標：美觀 (外觀設計漂亮) 與 易用 (良好用戶體驗)。設計涉及美工、用戶心理等非技術因素，本文聚焦技術實現角度。

表示層職責與技術選擇

• 職責：接受用戶輸入、向用戶呈現資訊 (即用戶交互)。
• 技術：C/S 用 Windows Forms，B/S 用 Web 頁面。Ajax 後分同步/異步 B/S。本文討論同步 B/S (傳統 ASP.NET)，異步留下文。不使用 MVC (Struts/ASP.NET MVC)，用傳統 ASP.NET 模型突出分層重點、照顧初學者。

案例：管理員登錄用例

圍繞「管理員登錄」逐步實現。

1. 設計介面：結構與表現分離

建立 Login.aspx，代碼僅含頁面結構，無外觀代碼。引用兩外部 CSS：Common.css (全局通用)、Login.aspx.css (頁面專用)。提倡：aspx 只存結構，專門資料夾 (Styles) 放 CSS，每頁配套同名 CSS，結構與表現分離。類似「標準化網頁設計」(DIV+CSS)，但不那麼嚴格，適當處用 Table 佈局。

Login.aspx 結構代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html ...>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
  <title>NGuestBook-管理員登錄</title>
  <link href="Styles/Common.css" rel="stylesheet" type="text/css" />
  <link href="Styles/Login.aspx.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
    <div id="container">
      <div id="box">
        <h1>NGuestBook管理員登錄</h1>
        <table id="forms" ...> ... </table>
        <div id="buttons">
          <asp:Button ID="Submit" ... OnClick="Submit_Click" />
          <asp:Button ID="Cancel" ... OnClick="Cancel_Click" />
        </div>
      </div>
    </div>
  </form>
</body>
</html>

Common.css (全局重置與容器)

* { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { font-size:12px; }
#container { width:100%; }

Login.aspx.css (頁面專用樣式)

#box { width:40%; margin:200px auto; border:3px solid #036; }
h1 { margin:1px; padding:5px 0; font-size:14px; color:#FFF; background:#036; text-align:center; }
#forms { margin:20px auto; font-size:12px; color:#036; }
#forms input { margin:10px; border:0; border-bottom:1px solid #036; width:160px; }
#buttons { margin-bottom:20px; text-align:center; }
#buttons input { margin:0 10px; }

2. 表示邏輯：代碼隱藏頁

邏輯：依用戶名密碼檢查是否系統管理員 (定義於 Web.config，唯一，可增刪改普通管理員) → 是則 Session 存資訊、導向後台管理頁；否則檢查普通管理員 (調用 BLL) → 是則 Session 存資訊、導向主頁；否則顯示失敗提示。後台頁與主頁需 Session 檢查控制權限 (如顯示修改/刪除按鈕)。

Web.config 配置系統管理員

<add key="AdministartorName" value="admin"/>
<add key="AdministartorPassword" value="123456"/>

Web.config 一般不允許請求，密碼相對安全。

Login.aspx.cs 核心代碼

public partial class Login : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) { }
    protected void Cancel_Click(object sender, EventArgs e) {
        this.Name.Text = ""; this.Password.Text = "";
    }
    protected void Submit_Click(object sender, EventArgs e) {
        string administratorName = ConfigurationManager.AppSettings["AdministartorName"];
        string administratorPassword = ConfigurationManager.AppSettings["AdministartorPassword"];
        // 系統管理員
        if (this.Name.Text == administratorName && this.Password.Text == administratorPassword) {
            Session["Administrator"] = "Administrator";
            Response.Redirect("~/Manage.aspx"); return;
        }
        // 普通管理員
        AdminInfo admin = BLLFactory.CreateAdminBLL().Login(this.Name.Text, this.Password.Text);
        if (admin != null) {
            Session["Admin"] = admin;
            Response.Redirect("~/Default.aspx");
        } else {
            Response.Redirect("~/Error.aspx?errMsg=登錄失敗");
        }
    }
}