半岛外围网上直营

说明：

最近，我们有一个基于网络的项目， 我们当中（开发人员）很少人在处理它。最重要的目标是创建一个复杂的像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