返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性

2022-02-24 16:49:23

[索引页]
[源码下载]

返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性

作者：webabcd

介绍
asp.net mvc 之 asp.net mvc 5.0 新特性

  • MVC5, WebAPI2(Attribute Routing, Cross Origin Request Sharing, OData), SignalR, SPA(Single Page Application)

示例
1、简介 MVC5 的新特性
MVC50/Index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性</title>

</head>

<body>

    <h2>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性 之 MVC5</h2>

    <p>

        现在可以继承 System.Web.Http.AuthorizeAttribute, ExceptionFilterAttribute 了

    </p>

    <p>

        内置支持 oauth 到一些知名网站，代码参见 App_Start/Startup.Auth.cs；效果参见 http://localhost:26659（进去后点击登录）

    </p>

</body>

</html>

MVC50/App_Start/Startup.Auth.cs

using Microsoft.AspNet.Identity;

using Microsoft.Owin;

using Microsoft.Owin.Security.Cookies;

using Owin;

namespace MVC50

{

    public partial class Startup

    {

        // 有关配置身份验证的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301864

        public void ConfigureAuth(IAppBuilder app)

        {

            // 使应用程序可以使用 Cookie 来存储已登录用户的信息

            app.UseCookieAuthentication(new CookieAuthenticationOptions

            {

                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,

                LoginPath = new PathString("/Account/Login")

            });

            // Use a cookie to temporarily store information about a user logging in with a third party login provider

            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

            // 取消注释以下行可允许使用第三方登录提供程序登录

            //app.UseMicrosoftAccountAuthentication(

            //    clientId: "",

            //    clientSecret: "");

            //app.UseTwitterAuthentication(

            //   consumerKey: "",

            //   consumerSecret: "");

            //app.UseFacebookAuthentication(

            //   appId: "",

            //   appSecret: "");

            // 支持使用 google 账户登录

            app.UseGoogleAuthentication();

        }

    }

}

2、简介 WebAPI2 的新特性
WebAPI2/Index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性</title>

</head>

<body>

    <h2>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性 之 WebAPI2</h2>

    <p>

        <a href="AttributeRouting.html" target="_blank">WebAPI2 - Attribute Routing</a>

    </p>

    <p>

        <a href="CORS.html" target="_blank">WebAPI2 - Cross Origin Request Sharing</a>

    </p>

    <p>

        <a href="OData.html" target="_blank">WebAPI2 - OData</a>

    </p>

</body>

</html>

2.1 演示 WebAPI2 - Attribute Routing
WebAPI2/Controllers/AttributeRoutingController.cs

/*

 * 用于演示 Attribute Routing 特性

 */

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace WebAPI2.Controllers

{

    public class AttributeRoutingController : ApiController

    {

        // 经典路由方式（路由配置来自 RouteConfig）

        // http://localhost:26700/api/AttributeRouting?name=webabcd

        public string Get(string name)

        {

            string result = "Hello: " + name + " (经典路由)";

            return result;

        }

        // Attribute Routing 路由方式，让 Action 可以有自己自定义的路由方式

        // http://localhost:26700/hello/webabcd

        [Route("hello/{name}")]

        public string Get2(string name)

        {

            string result = "Hello: " + name + " (Attribute Routing)";

            return result;

        }

    }

}

WebAPI2/AttributeRouting.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <title>Attribute Routing</title>

</head>

<body>

    <script type="text/javascript">

        // 调用经典路由方式的 api

        var result = $.get("http://localhost:26700/api/AttributeRouting?name=webabcd", function (msg) {

            alert(msg);

        });

        // 调用 Attribute Routing 路由方式的 api

        var result = $.get("http://localhost:26700/hello/webabcd", function (msg) {

            alert(msg);

        });

    </script>

</body>

</html>

2.2 演示 WebAPI2 - Cross Origin Request Sharing
WebAPI2/Controllers/CORSController.cs

/*

 * 演示 web api 对 cors(Cross Origin Resource Sharing) 的支持

 *

 * 注：请先行参见 WebApiConfig.cs

 */

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace WebAPI2.Controllers

{

    public class CORSController : ApiController

    {

        public string Get()

        {

            return "Hello: Cross Origin Resource Sharing";

        }

    }

}

WebAPI2/App_Start/WebApiConfig.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Http;

namespace WebAPI2

{

    public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            // Web API configuration and services

            // Web API routes

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

            // nuget 中搜索 ASP.NET Cross-Origin Support，然后安装

            // 使本 api 支持 cors

            var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*");

            config.EnableCors(cors);

            // nuget 中搜索 ASP.NET Web API OData

            // 使本 api 支持 odata 查询

            config.EnableQuerySupport();

        }

    }

}

WebAPI2/CORS.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="Scripts/jquery-1.10.2.js"></script>

    <title>Cross Origin Request Sharing</title>

</head>

<body>

    <script type="text/javascript">

        if (jQuery.support.cors) {

            jQuery.support.cors = true;

            var result = $.get("http://localhost:26700/api/cors", function (msg) {

                alert(msg);

            });

        }

        else {

            alert("浏览器不支持 cors");

        }

        /*

         * cors：全称 Cross Origin Resource Sharing，用于支持 ajax 跨域调用，支持此协议的的浏览器有 Internet Explorer 8+，Firefox 3.5+，Safari 4+ 和 Chrome 等

         *

         * 测试场景：要把客户端与服务端配置为不同的域名

         *

         * 本例可以通过 ajax 跨域调用 api/cors 接口，会发现如下效果

         * 1、请求头中会出现 Origin: http://xxx.com.cn (此域名为 host 此客户端的域名)

         * 2、响应头中会出现 Access-Control-Allow-Origin: *

         *

         * 另：关于 cors 协议的更多详细内容网上搜一下即可

         */

    </script>

</body>

</html>

2.3 演示 WebAPI2 - OData
WebAPI2/Controllers/ODataController.cs

/*

 * 演示如何让 web api 支持 odata 协议

 *

 * 注：请先行参见 WebApiConfig.cs

 */

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using System.Web.Http.OData.Query;

namespace WebAPI2.Controllers

{

    public class ODataController : ApiController

    {

        // 有很多 attribute 可以设置，以下仅举 2 例，更多详细内容参见文档

        // [Queryable(AllowedQueryOptions = AllowedQueryOptions.Skip | AllowedQueryOptions.Top)] // 仅支持 skip 查询和 top 查询

        // [Queryable(MaxTop = 100)] // 指定 top 参数的最大值为 100

        public IQueryable Get()

        {

            List<Product> products = new List<Product>();

            Random random = new Random();

            for (int i = ; i < ; i++)

            {

                Product product = new Product();

                product.ProductId = i;

                product.Name = i.ToString().PadLeft(, '');

                product.Price = random.Next(, );

                products.Add(product);

            }

            return products.AsQueryable();

        }

    }

    public class Product

    {

        public int ProductId { get; set; }

        public string Name { get; set; }

        public int Price { get; set; }

    }

}

WebAPI2/App_Start/WebApiConfig.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Http;

namespace WebAPI2

{

    public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            // Web API configuration and services

            // Web API routes

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

            // nuget 中搜索 ASP.NET Cross-Origin Support，然后安装

            // 使本 api 支持 cors

            var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*");

            config.EnableCors(cors);

            // nuget 中搜索 ASP.NET Web API OData

            // 使本 api 支持 odata 查询

            config.EnableQuerySupport();

        }

    }

}

WebAPI2/OData.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <title>OData</title>

</head>

<body>

    <script type="text/javascript">

        var result = $.get("http://localhost:26700/api/odata?$top=2", function (msg) {

            alert(msg[0].ProductId);

        });

        var result = $.get("http://localhost:26700/api/odata?$filter=ProductId eq 100", function (msg) {

            alert(msg[0].ProductId);

        });

        // $select 就是 WebAPI2 中新增的查询参数之一

        var result = $.get("http://localhost:26700/api/odata?$filter=ProductId eq 100&$select=Name", function (msg) {

            alert(msg[0].ProductId);

            alert(msg[0].Name);

        });

    </script>

</body>

</html>

3、简介 SignalR 的特性
SignalR/Index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>实时通信 - SignalR</title>

</head>

<body>

    <h2>实时通信 - SignalR</h2>

    <p>

         SignalR（可以在 nuget 中安装），支持 ajax 长轮询和 WebSocket，更多内容参见：http://www.asp.net/signalr

    </p>

</body>

</html>

4、简介 SPA(Single Page Application) 的特性
SPA/Index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性</title>

</head>

<body>

    <h2>返璞归真 asp.net mvc - asp.net mvc 5.0 新特性 之 SPA(Single Page Application)</h2>

    <p>

        knockout.js - 用于支持 MVVM 模式，有效实现 js 和 html 的分离

    </p>

    <p>

        modernizr.js - 用来检测浏览器功能支持情况的 JavaScript 库

    </p>

    <p>

        respond.js - 目标是使得那些不支持 CSS3 Media Queryes 特性的浏览器能够支持

    </p>

</body>

</html>

OK
[源码下载]

上一篇：POJ 1179 - Polygon - [区间DP]


下一篇：如果IDEA右上角的tomcat消失了，解决办法