VonPortal的頁面設計思路

在MVC架構中，咱們的頁面能夠經過三種方式進行加載，即RenderBody()，RenderAction()和RenderPartial()，其中RenderBody()主要是在系統主框架基礎上的加載，這個基本被主框架使用，對於模塊的加載沒有太大的價值，咱們在設計Portal時主要是考慮 RenderAction() 和 RenderPartial()。

在Controller中也是同樣，若是是Action直接展現，咱們可能是返回View（）而，Partial則是採用PartialView（）返回。

根據經驗咱們在設計模塊時要注意採用哪一種方式進行，下面是我根據本身的研發經驗積累制定的模塊研發原則：

一、管理模塊：即須要Admin或高級管理權限的，不是對外發布或展示的，咱們通常採用固定皮膚的方式，即模塊中直接採用指定框架文件，並且一個頁面只包含一個管理模塊的運行，這樣簡化了頁面加載和管理技術，易於快速開發，節約人力和資源。關鍵是這部分頁面不對外，沒有其餘用戶使用，所以指定皮膚或框架是沒有太大問題的，通常客戶均可以接受；

二、展示模塊：採用PartialView方式展示，首先要求本身不含有任何框架信息，即在cshtml文件中不指定本身的 layout 參數，而是等待皮膚加載後所用有的，這些模塊可能是採用動態加載的方式加載到界面中的，所以不能含有 layout 參數，不然會看到兩種頭信息的加載；展示模塊採用 return PartialView(...); 方式返回。

關於展示模塊的參數傳遞思路，因爲展示模塊可能在一個頁面中屢次加載，關鍵內容建議採用guid的變量進行命名，經常使用的方法以下：

在Controller文件中
public ActionResult Index()
{
  ViewBag.tagID = System.Guid.NewGuid();
  return View();
}

在界面文件中
<div id="@ViewBag.tagID">
... ...
</div>

這樣即解決了模塊的重複性，同時也解決了javascript的定位與調用。

關於ajax在頁面中的調用與加載，有些模塊設計的內容是經過ajax來調用生成的，這種模塊每每在加載初始中是空的，若是咱們在頁面加載時再經過ajax來調用，就會浪費不少系統時間和資源，這種模塊在設計時須要採用雙重加載模式，即頁面參數加載和ajax加載並存，當模塊加載時系統會在後臺處理中直接得到數據，經過 return View(data); 返給頁面，同時也支持ajax在運行過程當中替換掉原有內容，完成內容的ajax自動更新功能。

因爲界面中的模塊都是動態加載的，所以要求模塊的功能是單一的，例如新聞欄目和新聞列表及新聞內容是獨立的三個模塊，這樣就方便用戶經過頁面加載進行組合使用，但這三個模塊是相輔相乘的，這就須要創建一套客戶端的頁面模塊間通訊機制。

下面是我經過javascript創建的一套頁面間模塊通信機制代碼：

//javascript級信息交互功能，即聽口和說口間的信息傳遞
//能夠經過 $(function(){$.regListener("惟一編碼", "事件名稱", 回調函數);}); 回調函數聲明爲 function 回調函數(執行參數)，來進行註冊，經過 $.sendPageMsg("事件名稱", 執行參數); 函數進行通信
(function ($) {
    var listeners = new Array();
    function listener(id, msgName, callback) {
        this.id = id;
        this.msgName = msgName;
        this.callback = callback;
    }
    $.regListener = function (id, msgName, callback) {
        for (arr in listeners) {
            if (arr.id == id && arr.msgName == msgName) return;
        }
        var obj = new listener(id, msgName, callback);
        listeners[listeners.length] = obj;
    }
    $.sendPageMsg = function (msgName, msg)
    {
        for (idx in listeners) {
            if (listeners[idx].msgName == msgName) listeners[idx].callback(msg);
        }
    }
})(jQuery);

這種機制會造成兩種通信模塊，即發送模塊和接收模塊：

發送模塊完成信息的發送，即經過發送來傳遞參數；

接收模塊接收到信息後，經過ajax完成信息的更新和展現；

經過這種機制就能夠完成信息的客戶端自動更新和變化。

這就要求接收模塊的啓動和加載時註冊本身，即聽口註冊，樣例代碼以下：

<script type="text/javascript">
    function loadNewsCallback(param)
    {
        $.ajax(...);
    }
    $(function(){
        $.regListener("news", "loadNews", loadNewsCallback);
    });
</script>

其中

$(function(){
        $.regListener("news", "loadNews", loadNewsCallback);
    });

完成了聽口的註冊，系統一旦收到 「loadNews」的信息就會調用 loadNewsCallback 完成頁面相應內容的更新。

發送就簡單不少了。

<script type="text/javascript">
    function eventOnClick(obj, id)
    {
        $.sendPageMsg("loadNews", id);
    }
</script>

在新聞列表中調用 eventOnClick 就能夠了，或者直接將 $.sendPageMsg("loadNews", id); 寫入列表的中項目的 onClick 事件中就能夠了。