1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->

Size: px

Start display at page:

Download "1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->"

玄洁雷
5 years ago
Views:

1 目录 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果总结... 7

2 1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->ASP.NET Web 应用程序 ->Web API 3 创建 CrossMainController 并编写编写如下 :

3 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 List<UserInfoViewModel> liststudent = new List<UserInfoViewModel>(); for (int i = 0; i < 55; i++) UserInfoViewModel student = new Models.UserInfoViewModel(); Random ran = new Random(); student. = 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") ;

4 3 /// <summary> /// form 提交数据 /// </summary> public class formuserinfo public int page get; set; public int rows get; set; public string get; set; 启动运行 :

5 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;

6 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" />

7 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: ' method: 'post', pagination:true, pagesize:15, pagelist: [5, 10, 15], queryparams: ' ': "> <thead> <tr> <th data-options="field:'ck',checkbox:true"> </th> <th data-options="field:' ',width:'20%'"> </th> <th data-options="field:'hasregistered'"> HasRegistered </th> <th data-options="field:'hasregistered'"> HasRegistered </th> </tr> </thead> </table> </div> </body> </html>

8 7 7 运行效果启动 WebAPI, 并刷新 Jquery EasyUI 界面, 可见如下图 : 8 总结 WebAPI 提供广泛的对外开放, 可以起到整合性的作用, 例如 : 跟 Oracle ERP SAP 的 SCM MM PP 以及 SD 领域 WebAPI 形成一个 Web 标准, 对于一些微服务, 也起到关键性的作用跨域还能不受限制让更多人访问, 当然, 也降低了安全性 PDF 下载 : 跨域 WebApi 的 Jquery EasyUI 的数据交互 pdf

<ADB6ADB1C25EA8FAA6DB2D4D56432E706466>

<ADB6ADB1C25EA8FAA6DB2D4D56432E706466> packages 3-31 PART 3-31 03-03 ASP.NET ASP.N MVC ASP.NET ASP.N MVC 4 ASP.NET ASP.NE MVC Entity Entity Framework Code First 2 TIPS Visual Studio 20NuGetEntity NuGetEntity Framework5.0 CHAPTER 03 59 3-3-1

1 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->

1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->