跨域WebApi的Jquery EasyUI的数据交互

时间：2022-11-23 10:58:55

目录

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

跨域WebApi的Jquery EasyUI的数据交互

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

跨域WebApi的Jquery EasyUI的数据交互

4       Nuget安装microsoft.aspnet.webapi.cors

跨域WebApi的Jquery EasyUI的数据交互

跨域WebApi的Jquery EasyUI的数据交互

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界面，可见如下图：

跨域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

相关文章