目录
1 大概思路... 1
2 创建WebAPI 1
3 创建CrossMainController并编写... 1
4 Nuget安装microsoft.aspnet.webapi.cors. 4
5 跨域设置路由... 4
6 编写Jquery EasyUI界面... 5
7 运行效果... 7
8 总结... 7
1 大概思路
l 创建WebAPI
l 创建CrossMainController并编写
l Nuget安装microsoft.aspnet.webapi.cors
l 跨域设置路由
l 编写Jquery EasyUI界面
l 运行效果
2 创建WebAPI
创建WebAPI，新建->项目->ASP.NET Web应用程序->Web API
3 创建CrossMainController并编写
编写如下：
using CrossdomainWebApi.Models; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace CrossdomainWebApi.Controllers { [RoutePrefix("api/CrossMain")] public class CrossMainController : ApiController { [Route("GetUserInfo")] [HttpPost] public HttpResponseMessage GetUserInfo([FromBody]formUserInfo obj) { //[FromBody]int page, [FromBody]int rows, [FromBody]string email List<UserInfoViewModel> listStudent = new List<UserInfoViewModel>(); for (int i = 0; i < 55; i++) { UserInfoViewModel student = new Models.UserInfoViewModel(); Random ran = new Random(); student.Email = i.ToString() + ran.Next(100, 999).ToString() + "System@qq.com"; student.HasRegistered = true; student.LoginProvider = "Yes"; listStudent.Add(student); } int page = obj.page; int rows = obj.rows; List<UserInfoViewModel> ts = new List<UserInfoViewModel>(); for (int i = (page - 1) * rows; i < (page * rows>listStudent.Count? listStudent.Count:page * rows) ; i++) { ts.Add(listStudent[i]); } string json= Newtonsoft.Json.JsonConvert.SerializeObject(new { rows = ts, total = listStudent.Count, success = true }); return new HttpResponseMessage { Content = new StringContent(json, System.Text.Encoding.UTF8, "text/plain") }; } } /// <summary> /// form提交数据 /// </summary> public class formUserInfo { public int page { get; set; } public int rows { get; set; } public string email { get; set; } } }
启动运行：http://localhost:26735/help
4 Nuget安装microsoft.aspnet.webapi.cors
5 跨域设置路由
设置项目 crossdomainwebapicrossdomainwebapiapp_startwebapiconfig.cs
using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; using Microsoft.Owin.Security.OAuth; using Newtonsoft.Json.Serialization; //跨域引用 using System.Web.Http.Cors; namespace CrossdomainWebApi { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Configure Web API to use only bearer token authentication. //config.SuppressDefaultHostAuthentication(); //config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); //跨域配置 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
6 编写Jquery EasyUI界面
前台界面代码如下：
<!DOCTYPE HTML> <html> <head> <title>Ems SA</title> <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/bootstrap/easyui.css" /> <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="JqueryEasyui/demo/demo.css" /> <script type="text/javascript" src="JqueryEasyui/jquery.min.js"></script> <script type="text/javascript" src="JqueryEasyui/jquery.easyui.min.js"></script> <script type="text/javascript"> function doSearch() { } </script> </head> <body> <div> <table id="dg" class="easyui-datagrid" style=" 100%; height: auto; min-height: 400px" data-options=" iconCls: 'icon-edit', singleSelect: true, url: 'http://localhost:26735/Api/CrossMain/GetUserInfo', method: 'post', pagination:true, pageSize:15, pageList: [5, 10, 15], queryParams: {'email': ‘’} "> <thead> <tr> <th data-options="field:'ck',checkbox:true"> </th> <th data-options="field:'Email','20%'"> Email </th> <th data-options="field:'HasRegistered'"> HasRegistered </th> <th data-options="field:'HasRegistered'"> HasRegistered </th> </tr> </thead> </table> </div> </body> </html>
7 运行效果
启动WebAPI，并刷新Jquery EasyUI界面，可见如下图：
8 总结
WebAPI提供广泛的对外开放，可以起到整合性的作用，例如：跟Oracle ERP、SAP的SCM、MM、PP以及SD领域。WebAPI形成一个Web标准，对于一些微服务，也起到关键性的作用。跨域还能不受限制让更多人访问，当然，也降低了安全性。
源代码下载：
http://download.csdn.net/download/ruby_matlab/10117635
PDF下载：