如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。

 

由于 web api 项目通常是被做成了一个独立站点，来提供数据，在做web api 项目的时候，不免前端会遇到跨域访问接口的问题。

刚开始没做任何处理，用jsonp的方式调用 web api 接口，总是报一个错误，如下：

如果你想用JSONP来获得跨域的数据，WebAPI本身是不支持javascript的callback的，它返回的JSON是这样的：

{"YourSignature":"嫁人要嫁程序员，钱多话少死得早"}

然而，JSONP请求期望得到这样的JSON：

jQuery123456([{"YourSignature":"嫁人要嫁程序员，钱多话少死得早"}])

所以我们需要对WebAPI做拓展，让它支持这样的callback

解决方案如下：

只需要给全局注册一个JsonCallbackAttribute，就可以判断接口的访问是属于跨域，还是非跨域，正常的返回。

因为我们的接口，可能是用来给 移动端（Android 、IOS）做数据接口，也有可能是给网站用，所以，考虑到可能存在跨域的问题。

   GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());
 public class JsonCallbackAttribute : ActionFilterAttribute

    {

        private const string CallbackQueryParameter = "callback";

        public override void OnActionExecuted(HttpActionExecutedContext context)

        {

            var callback = string.Empty;

            if (IsJsonp(out callback))

            {

                var jsonBuilder = new StringBuilder(callback);

                jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);

                context.Response.Content = new StringContent(jsonBuilder.ToString());

                //context.Response.Content = new StringContent("C(\"a\")");

            }

            base.OnActionExecuted(context);

        }

        private bool IsJsonp(out string callback)

        {

            callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);

        }

结合下面图片不难开出，请求的地址带回了，callback的参数标识。

测试代码如下：

<html>

<head>

    <title>团队信息列表</title>

    <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.1.js")"></script>

</head>

<body>

    <ul id="contacts"></ul>

    <script type="text/javascript">

        $(function () {

            $.ajax({

                Type: "GET",

                url: "http://app.uni2uni.com/api/CloudService/GetAllGroup",

                dataType: "jsonp",

                success: listContacts

            });

        });

        function listContacts(contacts) {

            alert(contacts);

            $.each(contacts.data, function (index, contact) {

                var html = "<li><ul>";

                html += "<li>GroupName: " + contact.GroupName + "</li>";

                html += "<li>GroupPicture:" + contact.GroupPicture + "</li>";

                html += "</ul>";

                $("#contacts").append($(html));

            });

        }

    </script>

</body>

</html>

返回接口如下：

相关文章推荐：http://diaosbook.com/Post/2013/12/27/tips-for-aspnet-webapi-cors

使用Sass预定义一些常用的样式，非常方便

 

CSS预处理技术现在已经非常成熟，比较流行的有Less，Sass，Stylus，在开发过程中提升我们的工作效率，缩短开发时间，方便管理和维护代码，可以根据自己的喜好选择一款自己喜欢的工具开发，使用很接近，差别很小，语法类似。再选择一款编译工具koala，国产工具，koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。还可以在node.js里编译。我使用的是SASS，使用SASS+Compass完胜LESS。

常用CSS预定义：

1：ellipsis，省略号，当超过宽度时，显示省略号：

@mixin ell() {

    overflow: hidden;

-ms-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

}

2：display:inline-block;IE6,7块级元素对inline-block支持不好，需要触发Layout；内联元素就不需要了。

@mixin dib() {

    display: inline-block;

    *display: inline;

    *zoom: 1;

}

3：清除浮动，貌似最完美的解决方案

/* clearfix */

@mixin clearfix {

    &:after {

        clear: both;

        content: '.';

        display: block;

        height: 0;

        line-height: 0;

        overflow: hidden;

    }

    *height: 1%;

}

4：最小高度，IE6不支持min-height，但是使用height能达到一样的效果

/* minheight */

@mixin minHeight($min-height) {

    min-height: $min-height;

    height: auto !important;

    height: $min-height;

}

5：使用纯CSS现实三角形，兼容所有浏览器；使用了三个参数，第一个是"方向"，第二个是"大小"，第三个是"颜色"，省得每次都写一大堆代码，非常方便啦；

/* 箭头

arrow(direction,

size,

color);

*/

@mixin arrow($direction,

$size,

$color) {

    width: 0;

    height: 0;

    line-height: 0;

    font-size: 0;

    overflow: hidden;

    border-width: $size;

    cursor: pointer;

    @if $direction == top {

        border-style: dashed dashed solid dashed;

        border-color: transparent transparent $color transparent;

        border-top: none;

    }

    @else if $direction == bottom {

        border-style: solid dashed dashed dashed;

        border-color: $color transparent transparent transparent;

        border-bottom: none;

    }

    @else if $direction == right {

        border-style: dashed dashed dashed solid;

        border-color: transparent transparent transparent $color;

        border-right: none;

    }

    @else if $direction == left {

        border-style: dashed solid dashed dashed;

        border-color: transparent $color transparent transparent;

        border-left: none;

    }

}

使用实例：

test.scss

.arrow{

   @include arrow(bottom,10px,#F00);//向下，10px大小，红色箭头，立马出现  使用@include导入

}

编译结果：

 .arrow {

    width: 0;

    height: 0;

    line-height: 0;

    font-size: 0;

    overflow: hidden;

    border-width: 10px;

    cursor: pointer;

    border-style: solid dashed dashed dashed;

    border-color: red transparent transparent transparent;

    border-bottom: none;

}
 
 
标签: sass, less
在寂寞的日子里沉淀自己，在程序的日子里找到自己，我为梦想而坚持！
 

Asp.Net Web Api 接口的更多相关文章

  1. ASP.NET Web API 接口执行时间监控

    软件产品常常会出现这样的情况:产品性能因某些无法预料的瓶颈而受到干扰,导致程序的处理效率降低,性能得不到充分的发挥.如何快速有效地找到软件产品的性能瓶颈,则是我们感兴趣的内容之一. 在本文中,我将解释 ...

  2. Asp.Net Web Api 接口，拥抱支持跨域访问。

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题 ...

  3. 如何让你的 Asp.Net Web Api 接口，拥抱支持跨域访问。

    由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...

  4. ASP.NET Web API 入门 （API接口、寄宿方式、HttpClient调用）

    一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...

  5. ASP.NET WEB API 初探

    本文初步介绍如何简单创建一个ASP.NET Web Api 程序. Web Api 顾名思义就是一个Api接口,客户端可调用此接口进行业务操作.此类应用与 ASP.NET  web服务(即使用扩展名. ...

  6. 使用ASP.NET Web API Help Pages 创建在线接口文档

    操作步骤 1.新建Web API项目 2.在项目Areas文件夹下找到以下文件,取消注释图中代码. 3.右键解决方案,属性,如图设置. 4.运行程序,点击右上角API 接口列表: 详情-无参数: 详情 ...

  7. Asp.Net Web Api 与 Andriod 接口对接开发经验，给小伙伴分享一下！

    最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用Asp.Net Web Api去跟 Andriod 那端做接口对接工作,自己也是第一次接触Web ...

  8. Asp.Net Web Api 与 Andriod 接口对接开发

    Asp.Net Web Api 与 Andriod 接口对接开发经验,给小伙伴分享一下!   最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用A ...

  9. ASP.NET Web Api 2 接口API文档美化之Swagger

    使用第三方提供的swgger ui 可有效提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 但本人在查阅大量资料并进行编码测试后,发现大部分的swagger实例并不能有效运行.例 ...

随机推荐

  1. 在sd卡，创建目录和文件

    在本文中,sd卡的情况下创建的文件和目录,介绍如何创建目录和文件的重点. 1. 路径问题(以下的样例是在Java中測试的,在Android中相同适用) 1.1 假设须要在目录中创建文件的目录存在,直接 ...

  2. 分享个人Vim型材

    大力支持开源精神.保持开源大旗,今天,我将分享我自己以及结合自己的实际使用互联网的vimrc,我可以给你下的参考,不要见笑哈,说明我rc我写了一个非常详细,可以看看详细.同时,我们也希望借此机会结识了 ...

  3. Ohloh研究报告

    1.底       由于近期接合ospaf同样是一个开源项目的成熟度分析工具,由于该项目现在Ohloh我们有共同的东西,这么ohloh我们进行了调查.       简单的说,初始ohloh是一个代码搜 ...

  4. JavaScript通告/订阅的例子

    原文链接: Pub/Sub JavaScript Object原始日期: 2014年6一个月11日本: 2014年6月13日 翻译人员: 铁锚 高效AJAX站点的三大杀器: 事件代理, 浏览历史管理, ...

  5. JavaEE(3) - RMI服务器和客户端

    1. 开发RMI服务器 Net Beans创建java project: (qs) (Server.java) package server; import java.rmi.*; //远程接口必须集 ...

  6. SRM 587 Div II L3：ThreeColorabilityEasyy

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12699 这道题目是第一次在比赛的时候做出来的,开始还想用bru ...

  7. 十天学Linux内核之第七天---电源开和关时都发生了什么

    原文:十天学Linux内核之第七天---电源开和关时都发生了什么 说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自 ...

  8. Nyoj 一笔画问题(图论)

    描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. 规定,所有的边都只能画一次,不能重复画.   输入 第一行只有一个正整数N(N&l ...

  9. SQL Profile （总结4）--使用演示示例

    前提:sql profile工具的相关视图 dba_sql_profile 10g: sys.sqlprof$attr  &  sqlprof$ 11g: sys.sqlobj$data  & ...

  10. 解决Unity3d 4.3 动画系统带来的烦恼

    近期有非常多同学问我关于unity3d 4.3更新之后动画系统和曾经不一样了,并且之前用的非常熟练的创建动画和修修改画非常多操作都不好用了,那么在这里和大家分享一下三杀的个人经验,方便大家使用unit ...