Asp.Net Web Api 接口
如何让你的 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;
}
Asp.Net Web Api 接口的更多相关文章
- ASP.NET Web API 接口执行时间监控
软件产品常常会出现这样的情况:产品性能因某些无法预料的瓶颈而受到干扰,导致程序的处理效率降低,性能得不到充分的发挥.如何快速有效地找到软件产品的性能瓶颈,则是我们感兴趣的内容之一. 在本文中,我将解释 ...
- Asp.Net Web Api 接口,拥抱支持跨域访问。
如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问. 由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题 ...
- 如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问。
由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的问题. 刚开始没做任何处理,用jsonp的方式调用 web api 接口, ...
- ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...
- ASP.NET WEB API 初探
本文初步介绍如何简单创建一个ASP.NET Web Api 程序. Web Api 顾名思义就是一个Api接口,客户端可调用此接口进行业务操作.此类应用与 ASP.NET web服务(即使用扩展名. ...
- 使用ASP.NET Web API Help Pages 创建在线接口文档
操作步骤 1.新建Web API项目 2.在项目Areas文件夹下找到以下文件,取消注释图中代码. 3.右键解决方案,属性,如图设置. 4.运行程序,点击右上角API 接口列表: 详情-无参数: 详情 ...
- Asp.Net Web Api 与 Andriod 接口对接开发经验,给小伙伴分享一下!
最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用Asp.Net Web Api去跟 Andriod 那端做接口对接工作,自己也是第一次接触Web ...
- Asp.Net Web Api 与 Andriod 接口对接开发
Asp.Net Web Api 与 Andriod 接口对接开发经验,给小伙伴分享一下! 最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用A ...
- ASP.NET Web Api 2 接口API文档美化之Swagger
使用第三方提供的swgger ui 可有效提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 但本人在查阅大量资料并进行编码测试后,发现大部分的swagger实例并不能有效运行.例 ...
随机推荐
- nodejs中使用monk訪问mongodb
mongodb 安装mongodb 我认为还是用mannual install靠谱一点儿:http://docs.mongodb.org/manual/tutorial/install-mongodb ...
- ZOJ-3652-Maze(BFS)
Celica is a brave person and believer of a God in the bright side. He always fights against the mons ...
- HDU 3729 I'm Telling the Truth(二部图最大匹配+结果输出)
职务地址:HDU 3729 二分图最大匹配+按字典序输出结果. 仅仅要从数字大的開始匹配就能够保证字典序最大了.群里有人问. . 就顺手写了这题. . 代码例如以下: #include <ios ...
- 【C++模版之旅】项目中一次活用C++模板(traits)的经历
曾经曾在一个项目中碰到过一个挺简单的问题,但一时又不能用普通常规的方法去非常好的解决,最后通过C++模板的活用,通过traits相对照较巧妙的攻克了这个问题.本文主要想重现问题发生,若干解决方式的比較 ...
- bigdata_hadoop集群配置_内存分配
haoop集群 做好内存管理跟重要,不然经常会给抛出个 OutMemory ,内存溢出 以horntonworks给出推荐配置为样本,给出一种常见的Hadoop集群上各组件的内存分配方案.配置时 ...
- JavaScript模块化编程之require.js与sea.js
为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...
- HDOJ 5017 Ellipsoid
第一次尝试模拟退火..... Ellipsoid Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java ...
- oracle处理节点之间的父子关系
通常当与树的结构之间的关系处理,这是一个很复杂的事情,我们可以通过程序代码去逐层遍历父或子节点,这样做的缺点是很明显,效率不高,操作复杂性是比较大的.而当我们使用Oracle当数据库,我们可以有一个简 ...
- Cocos2d-xvision3.0加载失败,和,Vs2012环境搭建
1.安装好VS2012,下载Cocos2d-x3.0 双击击win32 sln运行VS2012 如果加载失败点击程序运行,输入devenv.exe /resetuserdata 回车,然后再进入VS, ...
- 让你的Windows不断重启的C语言代码
原文:让你的Windows不断重启的C语言代码 没有写Linux的原因是因为搞不定Linux下的权限问题,而Windows下基本上使用电脑的用户都是管理员,所以钻个空了,不多说下面是代码#includ ...