目录 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 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->ASP.NET Web 应用程序 ->Web API 3 创建 CrossMainController 并编写 编写如下 :
2 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") ;
3 /// <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 4 Nuget 安装 microsoft.aspnet.webapi.cors 5 跨域设置路由 设置项目 crossdomainwebapi\crossdomainwebapi\app_start\webapiconfig.cs using System; using System.Collections.Generic; using System.Linq; using System.Net.Http;
5 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" />
6 <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="width: 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',width:'20%'"> Email </th> <th data-options="field:'hasregistered'"> HasRegistered </th> <th data-options="field:'hasregistered'"> HasRegistered </th> </tr> </thead> </table> </div> </body> </html>
7 7 运行效果 启动 WebAPI, 并刷新 Jquery EasyUI 界面, 可见如下图 : 8 总结 WebAPI 提供广泛的对外开放, 可以起到整合性的作用, 例如 : 跟 Oracle ERP SAP 的 SCM MM PP 以及 SD 领域 WebAPI 形成一个 Web 标准, 对于一些微服务, 也起到关键性的作用 跨域还能不受限制让更多人访问, 当然, 也降低了安全性 PDF 下载 : 跨域 WebApi 的 Jquery EasyUI 的数据交互 pdf