說明：

最近，我們有一個基于網絡的項目， 我們當中（開發人員）很少人在處理它。最重要的目標是創建一個復雜的像FaceBook的UI，但我們并不想構建復雜而繁瑣的客戶端代碼。現在的計劃是將頁面切成許多嵌套的，甚至有時相當小的局部視圖，并轉移最終HTML片段到客戶端。用很簡單的JS.ajax功能，做服務器端的大部分工作。

很快，就能看出MVC框架的內置ActionResults并不適合。因此得創建一個自己的解決方案。

解決方案

我們已經創建了一個新的ActionResult類，它允許ASP.NET MVC應用作更多更新，HTML DOM不相關的部分，在單一的請求——響應往返中。這樣的目的是在客戶端呈現更多的局部視圖，因此它被叫做MultipartialResult。

舉個例子，你是在處理一個基于Web的郵件讀取者，當用戶選擇一個郵件然后點擊刪除按鈕，會有這么幾件事同時發生：

• 當前郵件應該被從listbox移除，下一封郵件應該被選中。
• 預覽窗格應該隨著新選擇中的郵件內容而更新。
• 器展示收件箱內郵件數量的指示器應該被更新。

有了MultipartialResult，處理刪除點擊的動作看起來如下：

public ActionResult OnDelete(long EmailId)
{
     //... does the deleting
     //... creates the model for the new InboxList partial view (InboxListModel)
     //... creates the model for the PreviewPane partial view (PreviewPaneModel)
     //... calculates the number of the emails (EmailCount)
     //... renders the browser title with the updated unread email number (BrowserTitle)
    
     MultipartialResult result = new MultipartialResult();
     result.AddView("_InboxList","InboxListDiv",InboxListModel);
     result.AddView("_PreviewPane","PreviewDiv",PreviewPaneModel);
     result.AddContent(EmailCount.ToString(),"EmailCountDiv");
     result.AddScript(string.Format("document.title='{0}';",BrowserTitle));
     return result;
}

AddView功能將致使“InboxListDiv”HTML元素被更新。AddContent功能將使“EmailCountDiv”HTML元素內容將被以給出的string更新。

AddScript功能將使給出的JavaScript代碼在客戶端上被執行。

客戶端上的事件處理器（運行無需刷新頁面），你需要做的僅僅是調用OnSuccess JavaScript事件中的MultipartialUpdate。

@Ajax.ActionLink("Delete", "OnDelete", new { EmailId = Model.CurrentEmail.Id }, <br />new AjaxOptions { OnSuccess = "MultipartialUpdate" })

或者，你可以在Ajax上用它：

@using (Ajax.BeginForm("OnDelete", 
 new { EmailId = Model.CurrentEmail.Id }, new AjaxOptions { OnSuccess = "MultipartialUpdate" }))

或者你可以在jQuery .post或ajax功能。

function deleteClicked(emailId) { 
    $.ajax({
        url: "/inbox/ondelete",
        type: "POST",
        data: { emailId: emailId },
        success: function (result) {
            MultipartialUpdate(result);
        },
    });

背景：

MultiPartial的理念很簡單。它是繼承了JsonReuslt類，呈現指定元素為字符串，收集這些字符串，封包為一個json數據，并發送這個json到客戶端。

在客戶端，一個小的JavaScript功能遍歷這些字符串，并相應更新DOM。

當收集不同類型結果時，MultipartialResult，通過內容正確地標記它們：

public MultipartialResult AddView(string viewName, string containerId, object model = null)
{ 
        views.Add(new View() { Kind = ViewKind.View, 
        ViewName = viewName, ContainerId = containerId, Model = model });
  return this;
}
public MultipartialResult AddContent(string content, string containerId)
{
  views.Add(new View() { Kind = ViewKind.Content, Content = content, ContainerId = containerId });
  return this;
} 
public MultipartialResult AddScript(string script)
{ 
  views.Add(new View() { Kind = ViewKind.Script, Script = script });
  return this;
}

 在動作返回Result對象后，MVC框架調用ExecuteResult功能，通過挨個處理元素，產生了一個json字符串：

public override void ExecuteResult(ControllerContext context)
        {
            List<object> data = new List<object>();
            foreach (var view in views)
            {
                string html = string.Empty;
                if (view.Kind == ViewKind.View)
                {
                    //view result
                    html = RenderPartialViewToString(mController, view.ViewName, view.Model);
                    data.Add(new { updateTargetId = view.ContainerId, html = html });
                }
                else if (view.Kind == ViewKind.Content)
                {
                    //content result
                    html = view.Content;
                    data.Add(new { updateTargetId = view.ContainerId, html = html });
                }
                else if (view.Kind == ViewKind.Script)
                {
                        //script result
                    data.Add(new { script = view.Script });
                }
            }
            Data = data;
            base.ExecuteResult(context);
        }

注意渲染局部視圖為字符串并非本文的主題。

emo