一步一步使用Ext JS MVC與Asp.Net MVC 3開發簡單的CMS後台管理系統之使用者管理（2）

現在，建立視圖，在Scripts\app\view目錄下先建立目錄Users，然後在該目錄下建立View.js。要使用Grid顯示使用者信 息，因而要從Grid面板派生出視圖。定義的時候要注意視圖的類名。還有就是一定要定義別名，因為在控制器中是使用widget方法建立的視圖執行個體。如果 不想定義別名，那就要修改建立執行個體的方式。具體的基本定義代碼如下：

Ext.define('SimpleCMS.view.Users.View',{

    extend: 'Ext.grid.Panel',

    alias: 'widget.usersview',

    title: "使用者管理",

    id: "usersView",

 

    initComponent: function () {

        var me = this;

 

        me.callParent(arguments);

    }

 

});

 

 

代碼中的id可根據需要定義，在這裡是不管有沒有用，先定義。如果項目類太多，要注意避免id衝突。標題定義可有可無，因為是在標籤頁內，看自己需要。

Grid需要Store，因而先添加store配置項，使用的Store是Users，因而定義代碼如下：

store: "Users",

 

列的定義，可以直接使用配置項定義，也可以在initComponent方法內定義，具體看情況，例如當前例子，要為列添加編輯組件，因而在initComponent方法內定義比較合適，代碼如下：

me.columns= [

     { text: '使用者名稱', dataIndex: 'Username', flex: 1 },

     { text: '電子郵件', dataIndex: 'Email', flex: 1 },

     { text: '角色', dataIndex: 'Roles', flex: 1 },

    { xtype: "datecolumn", text: '建立時間', dataIndex: 'Created', format:"Y-m-d H:i:s", width: 150 },

    { xtype: "datecolumn", text: '最後登入時間', dataIndex: 'Created', format:"Y-m-d H:i:s", width: 150 },

    { xtype: 'checkcolumn', dataIndex:"IsApproved", text: "允許登入", winth: 150 }

]

 

 

現 在定義都是一些基礎代碼，還沒定義編輯組件，這樣有個好處，先調試好顯示，再進入下一階段，可以減少錯誤。在最後一個欄位，使用了擴充 CheckColumn，因而要在Ext包中將CheckColumn.js檔案複製到Ext\ux目錄下，並添加requires配置項，代碼如下：

requires:["Ext.ux.CheckColumn"],

 

接著要在頂部工具列添加一個分頁工具條，代碼如下：

me.tbar= {

    xtype: "pagingtoolbar",

    pageSize: 50, displayInfo: true, store: me.store

}

 

這裡設定了每頁顯示的記錄數為50條記錄，可根據自己情況做調整。

最後要在底部工具列添加一段解說文字，代碼如下：

me.bbar = ["雙擊使用者可進入編輯狀態，使用者密碼預設為“123456”。重設密碼可將使用者密碼重設為“123456”。"]

 

好了，視圖的雛形已經出來了，可以調試一下效果了。在瀏覽器開啟頁面，並使用admin登入，切換到使用者管理標籤頁將看到21所示的效果。

650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1243034J9-0.PNG" />

圖21 沒有設定好布局的使用者管理檢視

是 不是覺得有點奇怪，底部工具列居然在Grid的標題列下。對於筆者來說，看到這情況就知道是布局沒設定好造成Grid主體部分高度為0。對於新手，要調試 原因也不難，尤其是現在有Illuminations外掛程式，在Firebug中將面板切換到Illuminations面板，然後單擊點選按鈕，然後單擊 視圖的標題列，會在Firebug看到22所示的效果。

650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1243032012-1.PNG" />

圖22 在Illuminations面板找到對象

在 元素右邊的路徑上，單擊圖中黃色高亮部分的視圖，然後23那樣把滑鼠移動到視圖對象上，將看到頁面中，視圖部分用紅色邊框圈起來了，這說明視圖並沒有 填滿整個標籤頁主體，說明標籤頁的布局出問題了。在VS中切換到主面板視圖MainPanel.js），在添加使用者管理面板的地方加入以下代碼：

layout:"fit"

650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1243031155-2.PNG" />圖23 查看視圖的位置

 

使用Fit布局後，視圖就可填滿標籤頁面板主體了，現在重新整理一下頁面，切換到使用者管理標籤頁，就可看到24所示的正確的效果了。

 650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1243035649-3.PNG" />

圖24 正確的視圖顯示

現在，在伺服器端建立Users控制器，為Grid提供資料。在Controllers目錄建立一個名稱為UsersController的控制器。加入必要的引用後，將Index方法修改為List方法，返回結果為JObject，代碼如下：

publicJObject List()

{

}

 

使用Membership提供者的GetAllUsers就可進行分頁，唯一問題是不能進行排序，在這裡就不做處理了。還有個要注意的地方就是角色返回的必須是數組形式，不然在為Combobox設定值的時候會出問題。

現在要返回的資料結構是這樣的：

{

     success : true or false,

     total  : 記錄總數,

     Msg    : 錯誤資訊,

     data   : 由當前頁記錄組成的數組

}

 

結構中，success表示返回結果是否成功。如果不成功，可通過Msg擷取錯誤資訊。如果成功，就從data中讀取資料。結構中的total非常重要，用戶端會根據該值來計算頁數，所以一定要正確返回，不然分頁就會亂。

在之前MyFunction類中建立WriteJObjectResult方法要適應該結構，就要加參數，不過重載該方法，也是不錯的選擇，代碼如下：

publicstatic JObject WriteJObjectResult(bool success, int total,string message,JArray data)

{

    return new JObject {

        newJProperty("success",success),

        new JProperty("total",total),

        new JProperty("Msg",message),

        new JProperty("data",data)

    };

}

 

好了，現在可以完成List方法的代碼了，代碼如下：

publicJObject List()

{

    try

    {

        int pagesize = 50;

        int page = 0;

        int.TryParse(Request["page"],out page);

        if (page <= 0) page = 1;

        int total = 0;

        JArray ja = new JArray();

        foreach (MembershipUser c inMembership.GetAllUsers(page - 1, pagesize, out total))

        {

            string[] rolesForUser =Roles.GetRolesForUser(c.UserName);

            ja.Add(new JObject {

                newJProperty("id",c.ProviderUserKey),

                newJProperty("Username",c.UserName),

                newJProperty("Email",c.Email),

                newJProperty("IsApproved",c.IsApproved),

                newJProperty("LastLoginDate",c.LastLoginDate.ToString("yyyy-MM-ddhh:mm:ss")),

                newJProperty("Created",c.CreationDate.ToString("yyyy-MM-ddhh:mm:ss")),

                newJProperty("Roles",new JArray(rolesForUser.Select(m=>m)))

            });

        }

        returnMyFunction.WriteJObjectResult(true, total, "", ja);

    }

    catch (Exception e)

    {

        returnMyFunction.WriteJObjectResult(false, 0, e.Message, null);

    }

}

 

上 面代碼，第一個要注意的是GetAllUsers方法中，分頁居然是從0開始算第一頁。第二個要注意的是使用GetRolesForUser方法根據使用者 名返回的角色是字串數組，然後通過LINQ就可直接將它轉換為JSON數組。其它代碼沒太大難度，不明白的可直接發郵件或留言給我。

為了防止意外情況，這裡添加了try模組，在錯誤的時候會將錯誤資訊作為Msg關鍵字的值返回。至於是否需要這樣直接返回錯誤資訊，這還是得根據項目或自己喜好去決定了。

而 在用戶端指令碼，目前是沒有處理錯誤資訊的代碼的，因而在這裡返回的錯誤資訊，用戶端是看不到。如果要處理這樣的錯誤資訊，就要在Store的Proxy中 監聽exception事件。因為exception事件的回呼函數是一致的，因而可以統一到一個函數中處理，就不用複製再複製了。

先切換到Index.cshtml，在Ext.ns下添加以下代碼定義處理exception事件的回調：

    SimpleCMS.ProxyException = function (proxy,response, opts) {

        Ext.Msg.alert("錯誤資訊",opts.error);

    }

 

在 exception事件的回呼函數的第三個參數返回的是Operation對象，當success為false時，它會將Msg關鍵字的值複製到對象的 error屬性，因而直接調用該屬性就可獲得錯誤資訊了。在這裡要處理的意外情況其實還有很多，如伺服器沒有返回資料、響應延時等等，在這裡就不一一列舉 了，大家可根據API的說明完善該函數。

接著，切換到Users的Store，在proxy定義內添加listeners配置項來監聽exception事件，代碼如下：

        listeners:{

            exception :SimpleCMS.ProxyException

        }

 

或許會有人問，為什麼不在控制器中為proxy寫監聽代碼？這……筆者確實不知道怎麼回答，還是老規矩，個人喜好吧。筆者認為，把什麼東西都往控制器中塞，是否有這樣的必要，代碼是否真的這樣就容易維護？這問題展開來估計又是罵戰，還是根據個人喜好選吧！

要測試exception事件是否能正常執行，在pagesize的定義代碼前添加以下代碼拋出一個異常：

throw new Exception("發生錯誤了。");

 

重建一下解決方案，然後重新整理頁面，切換到使用者管理將看到25所示的錯誤資訊，說明監聽代碼運作正常。

650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/124303K40-4.PNG" />

圖25 exception事件顯示的錯誤資訊

把拋出異常代碼刪除，然後再編譯一下。在瀏覽器中關閉對話方塊，然後單擊分頁工具列的重新整理按鈕，就可看到26所示的資料了。

 650) this.width=650;" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1243032461-5.PNG" />

使用者資料列表已經完成了，餘下就是完成添加、編輯、刪除和重設密碼操作了，這個，下文再說。

原始碼下載：http://download.csdn.net/detail/tianxiaode/4600348

本文出自 “黃燈橋的部落格” 部落格，請務必保留此出處http://dqhuang.blog.51cto.com/2522725/1007495