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 = ; i < ; i++)

            {

                UserInfoViewModel student = new Models.UserInfoViewModel();

                Random ran = new Random();

                student.Email = i.ToString() + ran.Next(, ).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 - ) * 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 跨域设置路由

设置项目 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 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="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

跨域WebApi的Jquery EasyUI的数据交互的更多相关文章

浅析Ajax跨域原理及JQuery中的实现分析
AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...
Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑（转载）
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
ajax 跨域webapi 最简单的demo（只介绍Get）
这几天遇到一个nodejs的项目,使用VSCode开发,需要连接数据库的,但是用nodejs连接数据库比较繁琐,需要安装很多东西,本人也懒得去研究了.后来想到建一个WebAPI然后用ajax来调用,避 ...
JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
跨域问题及jQuery中Ajax传参的讲解
1.跨域:不再同一服务器下,就是协议,域名,端口,有一个不一样: 浏览器对于javascript的同源策略的限制: 案例: 以 http://172.164.23:8088/ 为例相同域名:172. ...
套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

随机推荐

onload和ready的区别
onload和ready的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行 $(document).read()是DOM结构绘制完毕后就执行,不必等到加 ...
C语言简单实现链栈基本几个功能（适合新手看，大神可指正）
接着上一次的顺序栈,今天我记一下链栈,因为我也是刚学不久,有些地方也稍稍理解不了,所以,一起共勉.我会用我自己结合教材上画的图,争取跟代码一起结合,用文字和图最大化的解释代码,这样的话 ...
POI颜色设置
package com.java.connect.poi; import java.io.FileOutputStream; import java.io.IOException; import or ...
怎样获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,非常easy的道理,不用载入和依赖烦人的Flash或其它第三方插件来播放视频,也是大功一件.我们能够通过自己定义控件对视频进行显示和操控,当中一个常见 ...
使用javascript正则表达式实现遍历html字符串
最近在尝试实现一个js模板引擎,其中涉及到使用js解析html字符串的功能.由于我实现的这个模板不止是要能替换参数输出html字符串,还要可以解析出每个dom元素的名称及参数啥的. 网上找到了一个叫做 ...
【转载】Java 类加载与初始化
原文地址:http://www.cnblogs.com/zhguang/p/3154584.html 目录类加载器动态加载链接初始化示例类加载器在了解Java的机制之前,需要先了解类在J ...
【JavaScript】 JS面向对象的模式与实践（重点整治原型这个熊孩子 (/= _ =)/~┴┴ ）
参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript> —— KYLE SIMPSON 在JS的面向 ...
[UWP]了解模板化控件(10)：原则与技巧
1. 原则推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...
mongodb副本集配置
需要用到mongodb的时候单个实例肯定是不行的,挂了怎么办,那然后呢,跟mysql一样搞主从备份吗,是可以的mongodb这么弄,不过官网已经不推荐了这么干了,推荐使用副本集的模式,然后数据再大一点 ...
用Azure AD 实现Web 应用身份认证的Multi-Factor Authentication(MFA)
最近客户有个需求,希望把面向public的Web应用中的终端用户数据库由Azure AD来实现,同时希望可以用MFA来实现用户身份认证.这个想法非常好,通过使用Azure的managed servic ...

跨域WebApi的Jquery EasyUI的数据交互