Asp.Net Web Api 接口

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

 

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

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

Asp.Net Web Api 接口_第1张图片

如果你想用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的参数标识。

 Asp.Net Web Api 接口_第2张图片

 测试代码如下:

复制代码
<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>
复制代码

返回接口如下:

Asp.Net Web Api 接口_第3张图片

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

 

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

 

CSS预处理技术现在已经非常成熟,比较流行的有LessSass,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;
}
复制代码

 

 
 
分类:  CSS/CSS3工作心得
标签:  sassless
在寂寞的日子里沉淀自己,在程序的日子里找到自己,我为梦想而坚持!
 

你可能感兴趣的:(less,sass)