支持Ajax跨域访问ASP.NETWebApi2的示例分析-创新互联

这篇文章主要为大家展示了“支持Ajax跨域访问ASP.NET Web Api 2的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“支持Ajax跨域访问ASP.NET Web Api 2的示例分析”这篇文章吧。

郊区ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

首先打开Visual Studio 2013,创建一个空白的解决方案,命名为:CrossDomainAccessWebAPI。

再创建一个空的Web Api项目,命名为:CrossDomainAccess.WebAPI

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

接着我们右键单击刚才创建的解决方案,创建一个空的Web项目用来模拟我们的网站对WebAPI项目进行跨域调用,如下:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

完成以上步骤以后,我们的解决方案目录如下图所示:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

下面我们在模拟网站的Web项目中通过Nuget添加jQuery,一下是添加jQuery包的界面:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

添加完成后,到这里我们就完成了前期的准备工作。下面在WebAPI项目的Models文件夹中添加是一个实体类UserInfo,具体代码如下:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CrossDomainAccess.WebAPI.Models
{
 public class UserInfo
 {
  public int Id { get; set; }

  public string UserName { get; set; }

  public string UserPass { get; set; }

  public string Email { get; set; }

  public DateTime RegTime { get; set; }
 }
}

然后在WebAPI项目中添加一个示例控制器:UserInfoController,这个控制器用来返回数据集合,具体代码如下:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using CrossDomainAccess.WebAPI.Models;

namespace CrossDomainAccess.WebAPI.Controllers
{
 public class UserInfoController : ApiController
 {
  /// 
  /// 获取用户信息集合的方法
  /// 
  /// 返回用户信息集合
  public IHttpActionResult GetList()
  {
   //对象集合模拟数据
   List list = new List()
   {
    new UserInfo()
    {
     Id = 1,
     UserName = "张三",
     UserPass = "FDASDFAS",
     Email = "zhangsan@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 2,
     UserName = "李四",
     UserPass = "FDASDFAS",
     Email = "lisi@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 3,
     UserName = "王五",
     UserPass = "FDASDFAS",
     Email = "wangwu@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 4,
     UserName = "赵六",
     UserPass = "FDASDFAS",
     Email = "zhaoliu@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 5,
     UserName = "田七",
     UserPass = "FDASDFAS",
     Email = "tianqi@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 6,
     UserName = "王八",
     UserPass = "FDASDFAS",
     Email = "wangba@163.com",
     RegTime = DateTime.Now
    }
   };
   return Ok(list);
  }
 }
}

接着我们需要修改一下App_Start目录下的WebApiConfig.cs文件中webapi的路由规则,以便通过api/{controller}/{action}的方式进行访问,同时让修改序列化方式,让WebAPI默认输出json格式的数据,具体操作如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Formatting;
using System.Web.Http;

namespace CrossDomainAccess.WebAPI
{
 public static class WebApiConfig
 {
  public static void Register(HttpConfiguration config)
  {
   // Web API 配置和服务

   // Web API 路由
   config.MapHttpAttributeRoutes();

   config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
   );
   //清除所有序列化格式
   config.Formatters.Clear();
   //添加Json格式的序列化器
   config.Formatters.Add(new JsonMediaTypeFormatter());
  }
 }
}

重新生成一下项目,并在浏览器中访问,这时我们可以的到json格式的数据,如下:

复制代码 代码如下:

[{"Id":1,"UserName":"张三","UserPass":"FDASDFAS","Email":"zhangsan@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":2,"UserName":"李四","UserPass":"FDASDFAS","Email":"lisi@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":3,"UserName":"王五","UserPass":"FDASDFAS","Email":"wangwu@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":4,"UserName":"赵六","UserPass":"FDASDFAS","Email":"zhaoliu@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":5,"UserName":"田七","UserPass":"FDASDFAS","Email":"tianqi@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":6,"UserName":"王八","UserPass":"FDASDFAS","Email":"wangba@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"}]

好了,到这里我们Web Api端的数据输出就准备好了。为了测试是否可以跨域访问,我们再转到CorsDemo.UI网站项目中。首先创建一个index.aspx页面(这个命名自己可以任意取)后打开,修改成如下的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CrossDomainAccess.Web.Index" %>





 
 
 
 
  $(function () {
   $('#getData').click(function () {
    $.ajax({
     url: 'http://localhost:29867/api/UserInfo/getlist',
     dataType: 'json',
     success: function (data) {
      //以表格的形式在浏览器控制台显示数据,IE下不支持
      console.table(data);
     }
    });
   });
  });
 


 
  
      
 

完成以上步骤以后,启动WebAPI项目和Web项目,并在Web项目的Index页面中点击跨域获取数据按钮,打开浏览器控制台查看请求结果,在控制台会出现如下结果:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

控制台提示我们跨域请求被阻止,同时提示CORS头部信息确实,所以我们可以通过去WebAPI配置CORS来让其支持跨域访问。

那现在我们在WebAPI项目中通过Nuget添加Microsoft.AspNet.WebApi.Cors ,然后在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。具体操作如下:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Formatting;
using System.Web.Http;
using System.Web.Http.Cors;

namespace CrossDomainAccess.WebAPI
{
 public static class WebApiConfig
 {
  public static void Register(HttpConfiguration config)
  {
   // Web API 配置和服务
   EnableCrossSiteRequests(config);
   // Web API 路由
   config.MapHttpAttributeRoutes();

   config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
   );
   //清除所有序列化格式
   config.Formatters.Clear();
   //添加Json格式的序列化器
   config.Formatters.Add(new JsonMediaTypeFormatter());
  }

  /// 
  /// 允许跨域调用
  /// 
  /// 
  private static void EnableCrossSiteRequests(HttpConfiguration config)
  {
   //对所有的请求来源没有任何限制
   var cors = new EnableCorsAttribute(
    origins: "*",
    headers: "*",
    methods: "*"
    );
   config.EnableCors(cors);
  }
 }
}

现在,我们再重新生成WebAPI项目并运行,接着在页面http://localhost:31521/Index.aspx中点击按钮“跨域获取数据”,通过firebug的控制台,我们可以看到数据跨域加载成功了,如下:

支持Ajax跨域访问ASP.NET Web Api 2的示例分析

以上是“支持Ajax跨域访问ASP.NET Web Api 2的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:支持Ajax跨域访问ASP.NETWebApi2的示例分析-创新互联
分享网址:http://scyanting.com/article/dohpcp.html