這篇文章主要為大家展示了“支持Ajax跨域訪問ASP.NET Web Api 2的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“支持Ajax跨域訪問ASP.NET Web Api 2的示例分析”這篇文章吧。

郊區(qū)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

首先打開Visual Studio 2013,創(chuàng)建一個(gè)空白的解決方案，命名為：CrossDomainAccessWebAPI。

再創(chuàng)建一個(gè)空的Web Api項(xiàng)目，命名為：CrossDomainAccess.WebAPI

接著我們右鍵單擊剛才創(chuàng)建的解決方案,創(chuàng)建一個(gè)空的Web項(xiàng)目用來模擬我們的網(wǎng)站對(duì)WebAPI項(xiàng)目進(jìn)行跨域調(diào)用，如下：

完成以上步驟以后，我們的解決方案目錄如下圖所示：

下面我們?cè)谀M網(wǎng)站的Web項(xiàng)目中通過Nuget添加jQuery，一下是添加jQuery包的界面：

添加完成后，到這里我們就完成了前期的準(zhǔn)備工作。下面在WebAPI項(xiàng)目的Models文件夾中添加是一個(gè)實(shí)體類UserInfo,具體代碼如下：

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項(xiàng)目中添加一個(gè)示例控制器：UserInfoController，這個(gè)控制器用來返回?cái)?shù)據(jù)集合，具體代碼如下：

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
 {
  /// <summary>
  /// 獲取用戶信息集合的方法
  /// </summary>
  /// <returns>返回用戶信息集合</returns>
  public IHttpActionResult GetList()
  {
   //對(duì)象集合模擬數(shù)據(jù)
   List<UserInfo> list = new List<UserInfo>()
   {
    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的路由規(guī)則，以便通過api/{controller}/{action}的方式進(jìn)行訪問，同時(shí)讓修改序列化方式，讓W(xué)ebAPI默認(rèn)輸出json格式的數(shù)據(jù)，具體操作如下：

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 配置和服務(wù)

   // 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());
  }
 }
}

重新生成一下項(xiàng)目，并在瀏覽器中訪問，這時(shí)我們可以的到j(luò)son格式的數(shù)據(jù)，如下：

復(fù)制代碼 代碼如下:

[{"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端的數(shù)據(jù)輸出就準(zhǔn)備好了。為了測(cè)試是否可以跨域訪問，我們?cè)俎D(zhuǎn)到CorsDemo.UI網(wǎng)站項(xiàng)目中。首先創(chuàng)建一個(gè)index.aspx頁面（這個(gè)命名自己可以任意?。┖蟠蜷_，修改成如下的代碼：

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="Scripts/jquery-2.2.3.min.js"></script>
 <script type="text/javascript">
  $(function () {
   $('#getData').click(function () {
    $.ajax({
     url: 'http://localhost:29867/api/UserInfo/getlist',
     dataType: 'json',
     success: function (data) {
      //以表格的形式在瀏覽器控制臺(tái)顯示數(shù)據(jù),IE下不支持
      console.table(data);
     }
    });
   });
  });
 </script>
</head>
<body>
 <form id="form1" runat="server">
  <div>
   <input type="button" value="跨域獲取數(shù)據(jù)" id="getData" />
  </div>
 </form>
</body>
</html>

完成以上步驟以后，啟動(dòng)WebAPI項(xiàng)目和Web項(xiàng)目，并在Web項(xiàng)目的Index頁面中點(diǎn)擊跨域獲取數(shù)據(jù)按鈕，打開瀏覽器控制臺(tái)查看請(qǐng)求結(jié)果，在控制臺(tái)會(huì)出現(xiàn)如下結(jié)果：

控制臺(tái)提示我們跨域請(qǐng)求被阻止，同時(shí)提示CORS頭部信息確實(shí)，所以我們可以通過去WebAPI配置CORS來讓其支持跨域訪問。

那現(xiàn)在我們?cè)赪ebAPI項(xiàng)目中通過Nuget添加Microsoft.AspNet.WebApi.Cors ,然后在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。具體操作如下：

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 配置和服務(wù)
   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());
  }

  /// <summary>
  /// 允許跨域調(diào)用
  /// </summary>
  /// <param name="config"></param>
  private static void EnableCrossSiteRequests(HttpConfiguration config)
  {
   //對(duì)所有的請(qǐng)求來源沒有任何限制
   var cors = new EnableCorsAttribute(
    origins: "*",
    headers: "*",
    methods: "*"
    );
   config.EnableCors(cors);
  }
 }
}

現(xiàn)在，我們?cè)僦匦律蒞ebAPI項(xiàng)目并運(yùn)行，接著在頁面http://localhost:31521/Index.aspx中點(diǎn)擊按鈕“跨域獲取數(shù)據(jù)”，通過firebug的控制臺(tái)，我們可以看到數(shù)據(jù)跨域加載成功了，如下：

以上是“支持Ajax跨域訪問ASP.NET Web Api 2的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：支持Ajax跨域訪問ASP.NETWebApi2的示例分析-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://aaarwkj.com/article28/dohpcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、Google、網(wǎng)站排名、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)