.NET中easyUI的数据传输（一）

基本原理我先阐述一下：

1、将数据从数据库读出来，写入json文件，easyUI将数据再呈现出来，也可以省去写json文件的操作， 直接将json数据流给前台处理(下篇再给大家演示)；

2、增加一条数据，以json格式将数据传给后台[WebMethod]方法，该方法再进行数据库操作,也可以使用普通的post或get传值，在后台页面使用request方式读取(下篇再演示这种方式)；

3、删除、修改操作同理。

核心代码如下：

.cs页面

View Code

using System;
using BLL;
using System.Data;
using System.Web.Services;
///命名空间
namespace  ***
{
public partial class SynMenu : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
        {
           
            GetMenus();
           
        }
       //该方法是将数据从数据库里读来并写成json文件
        public bool  GetMenus()
        {
            DataTable dt = new MenuBLL().GetAllMenu();
            string str= Json.ToJson(dt);
            bool isFile=false;
            //Myfile.File_Write(编码路径,编码方式);是自己写的一个写文件方法
            isFile = Myfile.File_Write(Server.MapPath(@"..\json\menus.aspx"), str);//.net默认不能解析json文件，需将json变为aspx页面
            return isFile;
        }
      ///这个[WebMethod]特性的优点：js就可以直接给该方法传参，而不必这这张页面来逐个request参数的值
         [WebMethod]
        public static int AddThisMenu(string menuCaption,string menuNO,string menuUrl,string menuParentID)
        {
            int result = new MenuBLL().AddMenu(menuCaption, menuNO, menuUrl, menuParentID);
            return result;
        }
}
}

js部分：json数据加载

 

View Code

 <script type="text/javascript">        $(function () {
            $('#menu').datagrid({
                title: '菜单',
                iconCls: 'icon-save',
                width: 700,
                height: 350,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                collapsible: true,
                url: '../json/menus.aspx',//读取json文件，由于.net对json默认不能读取，这个aspx其实就是json文件只是后缀名不同
                sortName: 'MENU_ID',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'MENU_ID',
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { title: 'ID', field: 'MENU_ID', width: 80, sortable: true }
                ]],
                columns: [[

                    { field: 'MENU_CAPTION', title: '菜单名', width: 100, align: 'center' },
                    { field: 'MENU_PARENT_ID', title: '父菜单ID', width: 120 },
                    { field: 'MENU_NO', title: '排序', width: 150 }
                ]],
                pagination: true,
                rownumbers: true,
                toolbar: [{
                    id: 'btnadd',
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        newUser();
                    }
                }, {
                    id: 'btncut',
                    text: 'Cut',
                    iconCls: 'icon-cut',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('cut')
                    }
                }, '-', {
                    id: 'btneditor',
                    text: 'Save',
                    disabled: true,
                    iconCls: 'icon-editor',
                    handler: function () {
                        $('#btnsave').linkbutton('disable');
                        editUser();
                    }
                }]
            });
            var p = $('#menu').datagrid('getPager');
            $(p).pagination({
                onBeforeRefresh: function () {
                    alert('before refresh');
                }
            });
        });
 </script>

js部分：添加一条新数据

（将各个input的数据拼接成json数据流，以post方式传给.cs页面“SynMenu.aspx/AddThisMenu”，其中AddThisMenu的参数要与data数据流相同）

 

View Code

 <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script src="easyloader.js" type="text/javascript"></script>
…. 
   <script type="text/javascript">
        $(function () {                                //这个是一开始加载

            $('#Button1').click(function () { GoData(); });
        })
        function GoData() {
            var menuCaption = $("#menu_caption").val();                //获得输入框值
            var menuUrl = $("#menu_url").val();
            var menuParentID = $("#menu_parent_id").val();
            var menuNO = $("#menu_no").val();
            $.ajax({
                type: "Post",
                url: "SynMenu.aspx/AddThisMenu",
                data: "{'menuCaption':'" + menuCaption + "','menuNO':'" + menuNO + "','menuUrl':'" + menuUrl + "','menuParentID':'" + menuParentID + "'}",          //名字很重要！跟后台的参数名要一样
                contentType: "application/json;charset=utt-8",
                dataType: "json",
                success: function (data) {
                    $.messager.alert('弹出消息', data.d, 'info', function () { $('#dlg').window('close'); });   //弹出一个消息提示框，当点OK时关闭window
                }
            })
        }
    </script>

ASPX部分：(完全可以用html页面代替，.cs可用ashx代替)

 

View Code

<body>
    <form id="form1" runat="server">
    <table id="menu">
    </table>
    <div style="padding: 10px 20px; width: 400px; height: 280px;" id="dlg" class="easyui-dialog"
        buttons="#dlg-buttons" closed="true">
        <div class="ftitle">
            菜单信息</div>
        <div class="fitem">
            <label>
                菜单名:</label><input class="easyui-validatebox" id="menu_caption" required="true"></div>
        <div class="fitem">
            <label>
                网址:</label><input class="easyui-validatebox" id="menu_url" required="true"></div>
        <div class="fitem">
            <label>
                父菜单:</label><input class="easyui-validatebox" id="menu_parent_id" required="true"
                    validtype="number"></div>
        <div class="fitem">
            <label>
                排序:</label><input class="easyui-validatebox" id="menu_no" required="true" validtype="number"></div>
        <div class="fitem">
            <input class="easyui-linkbutton" type="button" value="保存" id="Button1" iconcls="icon-ok" />
            <input class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" type="button"
                value="取消" iconcls="icon-cancel" />
        </div>
    </div>
    </form>
</body>

 

以上代码需要稍加修改才可以运行，比如：需要一个写文件的方法以及数据库的具体操作。

这只是我对EasyUI利用Json进行数据传输的一点理解，希望对想用EasyUI的同学有所帮助，有问题或者感兴趣的可以留言讨论，页面右边有我的微博、QQ、以及邮箱，可以发消息一起讨论学习！

并且欢迎大家留言或发信指正错误，一起探讨，共同进步！

 

刘国柱作于2012-08-08

原创文章转载请注明出处