彩票走势图

在ASP.NET动作中返回更多视图

原创|行业资讯|编辑:龚雪|2014-01-21 09:19:02.000|阅读 281 次

概述:创建一个新的ActionResult类,它允许ASP.NET MVC应用作更多更新,HTML DOM不相关的部分,在单一的请求——响应往返中。这样的目的是在客户端呈现更多的局部视图。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

说明:

最近,我们有一个基于网络的项目, 我们当中(开发人员)很少人在处理它。最重要的目标是创建一个复杂的像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&lt;object&gt; data = new List&lt;object&gt;();
            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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP