天天看點

JQuery EasyUi之界面設計——母版頁以及Ajax的通用處理(三)控件指派 背景處理邏輯 前端HTML

前面介紹過JS了,就這樣個人認為還不夠用。

因為JS檔案是死的,無法使用伺服器代碼,自然不夠靈活。那麼通過母版頁就完善了這一點。那麼下面舉一個例子——控件指派。

前面說過easyui的form自帶驗證、送出、重置與指派,那麼如何利用這個指派呢?千篇一律的寫指派代碼總是那麼的令人厭煩,尤其是元素比較多的時候,用反射嘛又怕别人诟病,那麼就用JS來負責這一切吧.

那麼如何做到通用呢?那母版頁就是不錯的選擇。

下面貼出母版頁完整代碼:

從代碼中可以看出:

頁面上定義了3個全局JS變量,有注釋,我就不贅述了。

setAjaxUrl函數在表單指派加載前執行,可以實作用于更改上面的3個變量的值,或者作其他作用,建議命名為beforeFormLoad。

typeCode的值為頁面名,比如“index.aspx”,送出給處理程式用于判斷是哪個頁面,以便傳回對應的JSON資料。

那麼處理程式如何傳回對應的JSON資料呢?先看看大體結構:

JQuery EasyUi之界面設計——母版頁以及Ajax的通用處理(三)控件指派 背景處理邏輯 前端HTML

從上面代碼可以看出:

通過Type參數,可以擷取請求的頁面。

通過autoLoad參數,可以判斷是否是加載指派。注意FirstOrDefault函數,是擷取第一條資料,然後通過ToJson方法(自己定義的擴充方法)轉換為JSON資料。

通過id參數,可以判斷是否為編輯。

以上使用的是LINQ to SQL,個人認為使用LINQ to SQl開發小項目還是挺快的。關于LINQ to SQL的具體使用,就不說了。順便送大家一段伺服器分頁通用代碼(僅支援LINQ2SQL),如果覺得性能不行,請自己用存儲過程實作,這裡不考慮性能:

相比使用各種.NET Ajax架構,我還是喜歡按上面這種模式,雖然很多Ajax架構可以實作js調用C#方法,可以調用WebService,可以操作伺服器控件,但是我仍然癡迷上面的模式,因為個人覺得這樣精簡、易控制、一目了然、沒有ViewState、沒有伺服器控件、甚至沒有Cookie和Session(需要實作接口)。。。。

剛才貼的背景處理邏輯是使用者管理的編輯界面,那麼前端HTML呢?如下:

值得注意的是:

這裡使用的控件均為HTML控件。

請注意name屬性,該屬性決定送出的post參數名,同時也是form加載指派的參數名,也就是這裡的值要與背景輸出的JSON要對應。

傳回的JSON資料如下:

JQuery EasyUi之界面設計——母版頁以及Ajax的通用處理(三)控件指派 背景處理邏輯 前端HTML

這一篇就寫到這裡吧。由于最近忙,又耽誤了。。。

繼續閱讀