DWZ在APS.NET WebForm中的使用（一）

1.前言

在最近的項目開發中，使用到了前端框架DWZ。DWZ是一款較為優秀的后臺管理界面框架，但官方發布的文檔確實令人汗顏，簡單幾頁了事，有點對自己的產品不負責任了。同時感謝網友石頭的熱心幫助，在我這種菜鳥遇到困難時給予極大的幫助。

2.介紹

引用官方描述：DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。

其好處在于可以減少項目開發中Jquery的編寫時間，將重心放在業務開發上。

3.使用

由于篇幅太長不利于閱讀，計劃將講述內容一分為二。本貼主要介紹DWZ搭建和使用，下一帖闡述個人開發所遇到的問題。

1.將DWZ簽入到自己的項目中

做到這點很容易，首先去官網下載最新的DWZ包：https://code.csdn.net/dwzteam/dwz_jui，然后重命名文件夾后，拷貝到VS中，如圖3.1.1

（圖3.1.1）

為了避免沖突并保持dwz文件的完整性，建議再另外構建如imags、js等文件夾。

2.構建首頁

找到首頁示例，將對應代碼拷入Index.aspx中，修改相應的路徑，便成功搭建，如圖3.2.1。

也許你會有如下疑問：1.是否有必要引用這么多js文件？ 2.js初始化代碼是什么意思？ 3.標簽中的target和rel是什么意思？

下面我將逐個解答：

1.是否有必要引用這么多js文件？

答案是否定的。

示例中的js是為了展示所有功能，實際開發中，如果項目不涉及的就沒必要引用，比如富文本編輯。

此框架有個特點:主頁面引用，其他子頁面均可享受引用。原因在于子頁面均以div的形式內嵌在主頁面，故能達此效果。

回歸話題，細心查看你會發現，引用分為4個方面（CSS，外部js，框架js，語言定義）。如果確定項目中沒有富文本和文件上傳功能，大可以將如圖3.2.2紅色區域剔除。圖3.2.3所示為DWZ框架所需js，第一次見到時驚呼 My God。其實，這是DWZ開發小組為了開源，將每種功能分別封裝成一個js，方便大家調試。你會在dwz的bin文件夾下發現dwz.mini.js,dwz.mini.js是將上述js集中并壓縮成一個js。在項目開發中，我們可以將dwz.mini.js直接替換圖3.2.3所示js，因為我們基本不需要修改js。如果必須修改某些js，我們也可以通過bin文件下的gzjs.bat重新打包dwz.mini.js。

友情提示：如果直接從bin文件將dwz.mini.js引入是沒有任何效果的，您可以將其拷貝到js文件夾中。

（圖3.2.1）

（圖3.2.2）

（圖3.2.3）

2.js初始化代碼是什么意思？

如果用一句話概括:初始化并定義框架所需資源。如圖3.2.4所示，①：加載xml，此XML保存了DWZ框架初始所需的所有配置，也可以理解為配置文件。②：定義登錄頁面URL，當驗證身份失效時，用于重新登錄。③：定義狀態碼，表示請求的結果④：定義分頁參數⑤：可以理解成鍵值對，statusCode即為③，message表示對狀態的描述，以json的形式返回。⑥：hideMode:navTab組件切換的隱藏方式，支持的值有’display’，’offsets’負數偏移位置的值，默認值為’display’⑦：調試模式⑧：回調函數⑨：調用初始化函數⑩：加載界面主題

（圖3.2.4）

3.標簽中的target和rel是什么意思？

target：頁面展示模式，navTab以選項卡的方式展示頁面，dialog以彈出層的形式展示。

rel：可以理解成頁面的ID，當通過js代碼去指定刷新某頁面時，這個就尤為重要了。在實際開發中建議為每個界面起個不同的ID，也顯的規范些。

3.標簽控件的使用

標簽的使用可以結合demo示例和官方文檔，基本沒有多大問題。

下面一章，將介紹一下開發過程中需注意的問題。