ASP.NET 5探险(7):使用混合型控制器方便实现单页应用

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:由于在ASP.NET 5中,MVC和WEB API的技术栈合并了,所以开发混合型Controller也成为可能。

众所周知,在ASP.NET MVC 5和WEB API 2时代,两者的技术栈是独立的(开发团队也是独立的)。虽然后来两者都可以融合到OWIN中运行在一起,但是两者的控制器(Controller)代码是不能写在一起的(因为两者的基类不一致)。诚然,MVC控制器也可以通过返回Json数据来实现类似WEB API控制器的效果,但是所体现的设计效果并不是纯粹的REST API。

可能微软也意识到并行提供两套技术栈,不仅给自己的开发带来维护难度,也给用户的学习和开发带来困难。所以,在ASP.NET 5中,两者在技术栈上进行了统一,也就是在MVC中可以开发WEB API。这样的技术融合最大的体现的就是路由映射的机制。关于ASP.NET 5中的路由机制,我就不赘述了,大家可以参考其他资料,比如《解读ASP.NET 5 & MVC6系列(11):Routing路由》(http://www.cnblogs.com/TomXu/p/4496462.html)。

为了做一个SPA的示例,我尝试使用了混合型控制器来同时支持视图的处理和REST数据接口的处理,这样带来的好处是不需要为了MVC和REST API分别创建两个控制器,且能同时符合MVC和REST API的Action和路由风格。可能用文字很难描述出混合型控制器的特点,还是直接来看代码吧。

public class UserController : Controller
{
    private AccountManager _accountManager;

    public UserController(AccountManager accountManager)
    {
        _accountManager = accountManager;
    }

    //下面是mvc的action

    // GET: /<controller>/
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Edit(string id)
    {
        ViewBag.Id = id;
        return View();
    }

    //下面是api的action

    [HttpGet("[controller]/api")]
    public async Task<BasePagingListDto<UserDto>> GetAll(int page = 1, int pageSize = 10)
    {
        var query = _accountManager.UserManager.Users;
        var total = await query.CountAsync();
        var users = await query.Skip((page - 1) * pageSize).Take(pageSize).ToListAsync();
        var dto = new BasePagingListDto<UserDto>();
        dto.Items = users.ConvertAll(user => Mapper.Map<UserDto>(user));
        dto.Total = total;
        return dto;
    }

    [HttpGet("[controller]/api/{id}")]
    public async Task<IActionResult> GetById(string id)
    {
        var user = await _accountManager.UserManager.FindByIdAsync(id);
        if (user == null) return HttpNotFound();
        var dto = Mapper.Map<UserDto>(user);
        return new ObjectResult(dto);
    }

    [HttpPut("[controller]/api/{id}")]
    public async Task<IActionResult> EditById(string id, UserDto dto)
    {
        if (ModelState.IsValid)
        {
            var user = await _accountManager.UserManager.FindByIdAsync(id);
            if (user == null) return HttpNotFound();
            dto.SetValue(user);
            await _accountManager.UserManager.UpdateAsync(user);
            return new HttpStatusCodeResult((int)HttpStatusCode.Accepted);
        }
        return new HttpStatusCodeResult((int)HttpStatusCode.BadRequest);
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

在上面的代码中,Index这个Action会返回一个视图(Index.cshtml)给用户。在这个cshtml文件中,主要是利用Layout.cshtml来获得统一的母版,只包含很少的Razor代码,而使用jQuery和Knockout来加载和动态展示数据。其中加载数据是通过GetAll这个Action,获取地址还是利用"@Url.Action("GetAll")"来得到,而实际访问是GET“/User/api”。

同样,Edit这个Action会返回一个视图(Edit.cshtml)用于编辑用户的信息。加载用户的单条数据是通过GetById这个Action,实际访问是GET“/User/api/[userid]”。当需要修改数据的时候,是使用EditById这个Action,实际访问地址是PUT “/User/api/[userid]”。

这个控制器的代码也可以通过代码片段来查看:http://git.oschina.net/ike/codes/8avtl3u2p6g1ik09c5snz

时间: 2024-08-30 08:32:50

ASP.NET 5探险(7):使用混合型控制器方便实现单页应用的相关文章

走入asp.net mvc不归路:[3]创建控制器

实际上,控制器就是一个类,一个继承自Controller的类.正常创建一个Controller即可,而问题在于asp.net mvc提供了一套便捷的方法,在创建一个Controller时,可以自动创建一些Action.   1 打开项目,在Controller文件夹上右键,选择,创建Controller 2 输入控制器名,点击确定:注意,控制器名一般都有Controller作为后缀 3 框架会创建这个控制器,继续自Controller,并全默认生成一个名为Index的Action 4 其实上并没

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

ASP.NET MVC 5 - 将数据从控制器传递给视图

原文:ASP.NET MVC 5 - 将数据从控制器传递给视图 在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果会发送回浏览器.视图模板可以被控制器用来产生格式化过的HTML从而返回给浏览器. 控制器负责给任何数据或者对象提供一个必需的视图模板,用这个视图模板来Render返回给浏览器的HTML.最佳做法是:一个视图模板应该永远不会执行业务逻辑或

ASP.NET 5探险(3):使用UMEditor并实现图片上传

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天将继续上一篇来讲解百度富文本Web编辑器UEditor或UMEditor的使用. 上一篇"ASP.NET 5探险",我给大家分享了如何在ASP.NET 5中实现文件上传.我之所以研究这一问题的原因,就是要在百度的百度富文本Web编辑器UMEditor中实现图片上传.那么今天我们回过头来看看如何在ASP.NET 5的MVC 6项目中使用UMEditor(UEditor的使

asp.net MVC中form提交和控制器接受form提交过来的数据

MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的Request请求取值[HttpPost]public ActionResult AddNews(){    string a=Request["text1"];    string b=Request["text2"];}方法2:Action参数名与表单元素name值一一对应[HttpPost]public ActionResult Add

[译]用AngularJS构建大型ASP.NET单页应用(二)

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客户管理页面-新增.修改客户 单页应用中的页面与asp.net页面类似,两者都是html页面. 对于asp.net,浏览器加载html.js.数据,然后,浏览器进展示.而单页应用,页面内容通过ng-view 指令被注入到一个div标签中. 页面初始化时,浏览器通常只渲染html代码. 若在单页应用中使

简陋的 ASP.NET CORE 单页Web应用程序“框架”

我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 View) 3.Ajax无刷新跳转到新 Page,并支持H5浏览器刷新 Page.前进后退到其它 Page4.类 MVC 开发模式,Action 提供 Data,Js 渲染 View,Data 和 View 开发分离 完整代码可以访问 https://github.com/fonshen/Fonshen.

[Angularjs]asp.net mvc+angularjs+web api单页应用

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方式构建单页应用.用到的技术angularjs

七天学会ASP.NET MVC(七)——创建单页应用

注:本文为学习摘录,原文地址为:http://www.cnblogs.com/powertoolsteam/p/MVC_Seven.html 目录 引言 最后一篇学什么 实验32—整理项目组织结构 关于实验32 实验33——创建单页应用——第一部分—安装 什么是Areas? 关于实验33 实验34——创建单页应用——第二部分—显示Employee 实验35——创建单页应用——第三部分—新建Employee 实验36——创建单页应用——第三部分—上传 实验32 ———整理项目组织结构 实验32与其