目录
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 ListlistStudent = new List (); 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() + "[email protected]"; student.HasRegistered = true; student.LoginProvider = "Yes"; listStudent.Add(student); } int page = obj.page; int rows = obj.rows; List ts = new List (); 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") }; } } /// /// form提交数据 /// 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 跨域设置路由
设置项目 crossdomainwebapi\crossdomainwebapi\app_start\webapiconfig.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 SAtitle>
<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="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 运行效果
启动WebAPI，并刷新Jquery EasyUI界面，可见如下图：
8 总结
WebAPI提供广泛的对外开放，可以起到整合性的作用，例如：跟Oracle ERP、SAP的SCM、MM、PP以及SD领域。WebAPI形成一个Web标准，对于一些微服务，也起到关键性的作用。跨域还能不受限制让更多人访问，当然，也降低了安全性。
源代码下载：
http://download.csdn.net/download/ruby_matlab/10117635
PDF下载：
跨域WebApi的Jquery EasyUI的数据交互pdf