专注于.NET编程学习和技术分享

使用c#实现LayUI的table json数据接口

LayUI API文档

LayUI是一款比较好用的前端框架,体积较小,内容非常丰富,这里贴出我自己使用C#实现LayUI的table json数据接口方式。

首先看一下要实现的json数据格式。

{"code":0,
 "msg":"",
 "count":1000,
 "data":
 [{
  "id":10000,
  "username":"user-0",
  "sex":"女",
  "city":"城市-0",
  "sign":"签名-0",
  "experience":255,
  "logins":24,
  "wealth":82830700,
  "classify":"作家",
  "score":57
 },
 { "id":10001,
  "username":"user-1",
  "sex":"男",
  "city":"城市-1",
  "sign":"签名-1",
  "experience":884,
  "logins":58,
  "wealth":64928690,
  "classify":"词人",
  "score":27
 }]
}

1、新建一个抽象类

创建EntityBase作为实体类的基类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace HRMS.Model
{
    public abstract class EntityBase
    {

    }
}

2、新建实体类

继承EntityBase

using HRMS.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// UserEntity 的摘要说明
/// </summary>
public class UserEntity: EntityBase
{
    public int id { set; get; }
    public string name { set; get; }
    public string email { set; get; }
}

3、创建工具类

using HRMS.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// EntityDataCreate 的摘要说明
/// </summary>
public class EntityDataCreate
{
    public int code { set; get; }
    public string msg { set; get; }
    public int count { set; get; }
    public List<EntityBase> data { set; get; }

    public EntityDataCreate(List<EntityBase> odata)
    {
        this.data = odata;
        this.code = 0;
        this.msg = "";
        this.count = odata.Count;
    }

}

4、创建WebService服务

注意这里需要引用Newtonsoft.Json,网上下载Newtonsoft.Json或者使用VS>工具包>NuGet包管理工具>程序包管理器控制台,程序包源选择nuget.org,输入Install-Package Newtonsoft.Json安装成功后就可以在类型using了。

using HRMS.Model;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace HRMS.Control
{
    /// <summary>
    /// UserWebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
    // [System.Web.Script.Services.ScriptService]
    public class UserWebService : System.Web.Services.WebService
    {

        public List<EntityBase> CreateDemoEntityData()
        {
            //模拟数据
            int id_num = 1000;
            List<EntityBase> datas = new List<EntityBase>()
            {
                new UserEntity() {id = id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id = id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id = id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id = id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id =id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id =id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id =id_num+=1,name ="leiyidao",email="[email protected]"},
                new UserEntity() {id =id_num+=1,name ="leiyidao",email="[email protected]"}

            };
            return datas;
        }

        [WebMethod]
        public void GetAllUser()
        {
           
            List<EntityBase> datas = CreateDemoEntityData();
            EntityDataCreate data = new EntityDataCreate(datas);
            //生成json数据
            string stuJson = JsonConvert.SerializeObject(data);
            Context.Response.Write(stuJson);
        }
    }
}

到这里,数据接口已经实现了,在前台中调用试试看吧。

5、创建前台

alluser.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../src/css/layui.css">
    <script src="../src/layui.js"></script>
    <script src="js/alluser.js"></script>
</head>
<body>
    <div class="layui-col-md4">
        <table id="tbUser" lay-filter="test"></table>
    </div>
</body>
</html >

alluser.js

layui.use('table', function () {
    var table = layui.table;
 
    //第一个实例
    table.render({
        elem: '#tbUser'
        , height: 415
        , url: '../../Control/UserWebService.asmx/GetAllUser' //数据接口
        , method: 'post'
        , page: true
        , cols: [[ //表头
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'name', title: '用户名', width: 200 }
            , { field: 'email', title: '邮箱', width: 200, sort: true }
        ]]
    });

});

实现效果如下

 

 

 

 

 

 

 

 

 

 

 

未经允许不得转载:墨鱼巴巴 » 使用c#实现LayUI的table json数据接口
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址