Jquery easyui+Jsonp+asp.net+翻页 事件版

于 2013-08-13 17:12:00 发布
阅读量141 收藏
点赞数
文章标签： javascript json xhtml ViewUI
本文介绍了一个使用JQuery EasyUI结合JSONP实现动态分页的应用案例。通过事件触发翻页功能，展示了如何在ASP.NET环境中利用JSONP进行跨域数据请求，并实现了用户信息列表的增删改查功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Jquery easyui+Jsonp+asp.net+翻页 事件版

说明

Jsonp原理介绍:http://www.jb51.net/article/31167.htm

说明:这个是纯事件翻页,如果正常开发(小弟才疏学浅自己认为的),是需要靠参数传递来翻页不需要自己定义翻页事件,我这里是为了了解才这样做的,具体请看Test1/Default.aspx.exclude

构造文件

basic.html

显示页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta  charset="UTF-8"/>
    <title>用户信息列表</title>
    <link  rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <link  rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <link  rel="stylesheet" type="text/css" href="../demo/demo.css"/>
    <script type="text/javascript" src="../JS/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>用户信息列表</h2>
    <div class="demo-info" style="margin-bottom:10px;">
        <div class="demo-tip icon-tip"></div>
        <div>全部用户信息列表.</div>
    </div>
    <div style="margin:10px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="Add()">Add</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="Update()">Update</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="Delete()">Delete</a>
    </div>
   <table id="tg" class="easyui-datagrid" title="用户信息列表" style="width:700px;height:350px" data-options="
        singleSelect:true,
        collapsible:true,
        autoRowHeight:false,
        fitColumns:true,
        pagination:true,
        pageSize:10,
        pageList:[10,20,50,100],
        rownumbers:true,
        toolbar:'#tb',
        striped:true
   ">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'userId',width:80">用户ID</th>
            <th data-options="field:'userName',width:100">用户名称</th>
            <th data-options="field:'age',width:80,align:'right'">年龄</th>
            <th data-options="field:'phone',width:80">手机</th>
            <th data-options="field:'address',width:250">地址</th>
        </tr>
    </thead>
   </table>
   <div id="update" class="easyui-window" title="修改用户信息" data-options="modal:true,closed:true,collapsible:false,minimizable:false,maximizable:false,iconCls:'icon-save'" style="width:500px;height:300px;padding:10px 50px;">
        <form id="from_user" name="from_user" style="width:100%;height:100%">
            <table style="width:100%;height:100%">
                <tr>
                    <td>用户ID:</td>
                    <td><input class="easyui-validatebox" type="text" id="txtuserId" name="txtuserId" data-options="required:true" disabled="disabled" readonly="readonly"/></td>
                </tr>
                <tr>
                    <td>用户名称:</td>
                    <td><input class="easyui-validatebox" type="text" id="txtuserName" name="txtuserName" data-options="required:true,validType:'length[2,10]'"/></td>
                </tr>
                <tr>
                    <td>年龄:</td>
                    <td><input class="easyui-numberbox" id="txtage" name="txtage" data-options="required:true"/></td>
                </tr>
                <tr>
                    <td>手机:</td>
                    <td><input class="easyui-validatebox" type="text" id="txtphone" name="txtphone" data-options="required:true,validType:'phone'"/></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input class="easyui-validatebox" type="text" id="txtaddress" name="txtaddress" data-options="validType:'length[0,20]'"/></td>
                </tr>
                <tr>
                    <td>用户类型:</td>
                    <td><input class="easyui-combobox"  id="txttype" name="txttype" data-options="valueField:'id',textField:'text',panelHeight:'auto',editable:false,value:'1'"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a id="save" href="javascript:void(0)" class="easyui-linkbutton">Save</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="cancel()">Cancel</a>
                    </td>
                </tr>
            </table>
        </form>
   </div>
   <div id="tb" style="height:auto;">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="Add()">Add</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" οnclick="Update()">Update</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="Delete()">Delete</a>
   </div>
   <script type="text/javascript">
        $(document).ready(function(){
            loadData(0,10);
            loadCombobox();
            $('#tg').datagrid('getPager').pagination({
                onSelectPage:SelectPage,
                onBeforeRefresh:SelectPage,
                beforePageText:'第',
                afterPageText:'页  共{pages}页',
                displayMag:'当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
        });
        function loadCombobox(){
            $.ajax({
                type:"get",
                async:false,
                url:'Handler.ashx?cmd=GetUserType',
                dataType:"jsonp",
                jsonp:'callback',
                jsonpCallback:'_dg_loadData',
                success:function(json){
                    $('#txttype').combobox('loadData',json);
                },
                error:function(error,state){
                    $.messager.alert('系统提示',error+"  -1 "+state,'error');
                }
            });
        }
        function pagerFilter(data){
			if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
//					pager.pagination('refresh',{
//						pageNumber:pageNum,
//						pageSize:pageSize
//						
//					});
					loadData((opts.pageNumber-1)*parseInt(opts.pageSize),start + parseInt(opts.pageSize));
				}
			});
			if (!data.originalRows){
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}
		function SelectPage(pageNum, pageSize){
		    var opts = $('#tg').datagrid('options');
		    opts.pageNumber = pageNum;
			opts.pageSize = pageSize;
		    loadData((opts.pageNumber-1)*parseInt(opts.pageSize),(opts.pageNumber-1)*parseInt(opts.pageSize) + parseInt(opts.pageSize));
		}
        function loadData(start,end){
            $.ajax({
                type:"get",
                async:false,
                url:'Handler.ashx?cmd=GetUserName&start='+start+'&end='+end,
                dataType:"jsonp",
                jsonp:'callback',
                jsonpCallback:'_dg_loadData',
                success:function(json){
                    $('#tg').datagrid('loadData',json);
                },
                error:function(error,state){
                    $.messager.alert('系统提示',error+"  0 "+state,'error');
                }
            });
        }
        function Add(){
            cancel();
            $('#save').unbind().bind('click',UserSave);
            $('#update').window('open');
        }
        function Update(){
            var row=$('#tg').datagrid('getSelected');
            if(row){
                $('#txtuserId').val(row.userId);
                $.ajax({
                    type:'get',
                    async:false,
                    url:'Handler.ashx',
                    data:"cmd=GetUser&userId="+escape(row.userId),
                    dataType:"jsonp",
                    jsonp:'callback',
                    jsonpCallback:'_dg_loadData',
                    success:function(json){
                        $('#txtuserName').val(json.userName);
//                        $('#txtage').val(json.age);
//                        $('input[name="txtage"]').attr('value',row.age);
                        $('#txtage').numberbox('setValue',json.age);
                        $('#txtphone').val(json.phone);
                        $('#txtaddress').val(json.address);
                        $('#txttype').combobox('setValue',json.type);
                        $('#save').unbind().bind('click',UserUpdate);
                        $('#update').window('open');
                    },
                    error:function(error,state){
                        $.messager.alert('系统提示',error+"  1 "+state,'error');
                    }
                });
            }
        }
        function Delete(){
            var row=$('#tg').datagrid('getSelected');
            if(row){
                $.messager.confirm('系统提示','是否删除该用户信息?',function(result){
                    if(result){
                        UserDelete(row.userId)
                    }
                });
            }
        }
        function UserSave(){
            if(!$('#from_user').form('validate')){
                return;
            }
            var txtuserId=$('#txtuserId').val();
            var txtuserName=$('#txtuserName').val();
            var txtage=$('#txtage').val();
            var txtphone=$('#txtphone').val();
            var txtaddress=$('#txtaddress').val();
            var txttype=$('#txttype').combobox('getValue');
            $.ajax({
                type:'get',
                async:false,
                url:'Handler.ashx',
                data:"cmd=SaveUserName&userId="+escape($('#txtuserId').val())+"&userName="+escape($('#txtuserName').val())+"&age="+escape($('#txtage').val())+
                    "&phone="+escape($('#txtphone').val())+"&address="+escape($('#txtaddress').val())+"&type="+escape($('#txttype').combobox('getValue')),
                dataType:"jsonp",
                jsonp:'callback',
                jsonpCallback:'_dg_loadData',
                success:function(json){
//                    $('#tg').datagrid('loadData',json);
                    SelectPage($('#tg').datagrid('options').pageNumber,$('#tg').datagrid('options').pageSize);
                    $.messager.alert('系统提示','添加用户信息成功.','info');
                    $('#update').window('close');
                },
                error:function(error,state){
                    $.messager.alert('系统提示',error+"  1 "+state,'error');
                }
            });
        }
        function UserUpdate(){
            if(!$('#from_user').form('validate')){
                return;
            }
            var txtuserId=$('#txtuserId').val();
            var txtuserName=$('#txtuserName').val();
            var txtage=$('#txtage').val();
            var txtphone=$('#txtphone').val();
            var txtaddress=$('#txtaddress').val();
            var txttype=$('#txttype').combobox('getValue');
            $.ajax({
                type:'get',
                async:false,
                url:'Handler.ashx',
                data:"cmd=UpdateUserName&userId="+escape($('#txtuserId').val())+"&userName="+escape($('#txtuserName').val())+"&age="+escape($('#txtage').val())+
                    "&phone="+escape($('#txtphone').val())+"&address="+escape($('#txtaddress').val())+"&type="+escape($('#txttype').combobox('getValue')),
                dataType:"jsonp",
                jsonp:'callback',
                jsonpCallback:'_dg_loadData',
                success:function(json){
//                    $('#tg').datagrid('loadData',json);
                    SelectPage($('#tg').datagrid('options').pageNumber,$('#tg').datagrid('options').pageSize);
                    $.messager.alert('系统提示','更新用户信息成功.','info');
                    $('#update').window('close');
                },
                error:function(error,state){
                    $.messager.alert('系统提示',error+"  2 "+state,'error');
                }
            });
        }
        function UserDelete(userId){
            if(!userId) return false;
            $.ajax({
                type:'get',
                async:false,
                url:'Handler.ashx',
                data:"cmd=DeleteUserName&userId="+escape(userId),
                dataType:"jsonp",
                jsonp:'callback',
                jsonpCallback:'_dg_loadData',
                success:function(json){
//                    $('#tg').datagrid('loadData',json);
                    SelectPage($('#tg').datagrid('options').pageNumber,$('#tg').datagrid('options').pageSize);
                    $.messager.alert('系统提示','删除用户信息成功.','info');
                    $('#update').window('close');
                },
                error:function(error,state){
                    $.messager.alert('系统提示',error+"  3 "+state,'error');
                }
            });
        }
        function cancel(){
            $('#txtuserId').val('');
            $('#txtuserName').val('');
            $('#txtage').val('');
            $('input[name="txtage"]').attr('');
            $('#txtphone').val('');
            $('#txtaddress').val('');
            $('#txttype').combobox('setValue','1');
            $('#update').window('close');
        }
   </script>
</body>
</html>

Handler.ashx

操作数据页面

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Reflection;
using System.Collections.Generic;
using System.Transactions;

public class Handler : IHttpHandler {

    public List<User> users = new List<User>();
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "application/jsonp";

        string cmd = context.Request["cmd"];
        if (!string.IsNullOrEmpty(cmd))
        {
            MethodInfo Method = this.GetType().GetMethod(cmd,BindingFlags.NonPublic|BindingFlags.Instance);
            if (Method!=null)
            {
                Method.Invoke(this, new object[] { context });
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    void GetUserType(HttpContext context)
    {
        string callback = context.Request["callback"];
        string json = callback + "([" +
                "{\"id\":1,\"text\":\"普通用户\"}," +
                "{\"id\":2,\"text\":\"高级用户\"}," +
                "{\"id\":3,\"text\":\"铜牌用户\"}," +
                "{\"id\":4,\"text\":\"银牌用户\"}," +
                "{\"id\":5,\"text\":\"金牌用户\"}," +
                "{\"id\":6,\"text\":\"钻石用户\"}," +
            "])";
        context.Response.Write(json);
        context.Response.End();
    }

    void GetUserName(HttpContext context)
    {
        string callback = context.Request["callback"];
        users = context.Cache["users"] as List<User>;
        if (users==null)
        {
            users = new List<User>();
        }
        string json = callback + "({\"total\":" + users.Count + ",\"rows\":[";
        int start = int.Parse(context.Request["start"]);
        int end = int.Parse(context.Request["end"]);
        if (end>users.Count)
        {
            end = users.Count;
        }
        for (int i = start; i < end; i++)
        {
            User user = users[i];
            json += "{\"userId\":" + user.userId + ",\"userName\":\"" + user.userName + "\",\"age\":" + user.age + ",\"phone\":\"" + user.phone + "\",\"address\":\"" + user.address + "\"},";
        }
        json += "]})";
        //string json = callback+"({\"total\":28,\"rows\":["+
        //        "{\"userId\":1,\"userName\":\"A1\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":2,\"userName\":\"A2\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":3,\"userName\":\"A3\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":4,\"userName\":\"A4\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":5,\"userName\":\"A5\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":6,\"userName\":\"A6\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":7,\"userName\":\"A7\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":8,\"userName\":\"A8\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":9,\"userName\":\"A9\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":10,\"userName\":\"A10\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":11,\"userName\":\"A11\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"},"+
        //        "{\"userId\":12,\"userName\":\"A12\",\"age\":18,\"phone\":\"15612345678\",\"address\":\"XXXXXXX\"}"+
        //    "]})";
        context.Response.Write(json);
        context.Response.End();
    }

    void UpdateUserName(HttpContext context)
    {
        string callback = context.Request["callback"];
        users = context.Cache["users"] as List<User>;
        if (users == null)
        {
            users = new List<User>();
        }
        string userId = context.Request["userId"];
        string userName = context.Request["userName"];
        string age = context.Request["age"];
        string phone = context.Request["phone"];
        string address = context.Request["address"];
        string type = context.Request["type"];
        //string json = callback + "({\"total\":" + users.Count + ",\"rows\":[";
        foreach (User user in users)
        {
            if (user.userId == int.Parse(userId))
            {
                user.userName = userName;
                user.age = int.Parse(age);
                user.phone = phone;
                user.address = address;
                user.type = int.Parse(type);
            }
        }
        context.Cache.Remove("users");
        context.Cache.Insert("users",users);
        //foreach (User user in users)
        //{
        //    json += "{\"userId\":" + user.userId + ",\"userName\":\"" + user.userName + "\",\"age\":" + user.age + ",\"phone\":\"" + user.phone + "\",\"address\":\"" + user.address + "\"},";
        //}
        //json += "]})";
        context.Response.Write(callback + "(1)");
        context.Response.End();
    }

    void SaveUserName(HttpContext context)
    {
        string callback = context.Request["callback"];
        users = context.Cache["users"] as List<User>;
        if (users == null)
        {
            users = new List<User>();
        }
        string userId = context.Request["userId"];
        string userName = context.Request["userName"];
        string age = context.Request["age"];
        string phone = context.Request["phone"];
        string address = context.Request["address"];
        string type = context.Request["type"];
        //string json = callback + "({\"total\":" + users.Count + ",\"rows\":[";
        using (TransactionScope transaction = new TransactionScope())
        {
            User _users = new User(users[users.Count - 1].userId + 1, userName, int.Parse(age), phone, address,int.Parse(type));
            users.Add(_users);
            context.Cache.Remove("users");
            context.Cache.Insert("users", users);
            transaction.Complete();
        }
        //foreach (User user in users)
        //{
        //    json += "{\"userId\":" + user.userId + ",\"userName\":\"" + user.userName + "\",\"age\":" + user.age + ",\"phone\":\"" + user.phone + "\",\"address\":\"" + user.address + "\"},";
        //}
        //json += "]})";
        context.Response.Write(callback + "(1)");
        context.Response.End();
    }

    void DeleteUserName(HttpContext context)
    {
        string callback = context.Request["callback"];
        users = context.Cache["users"] as List<User>;
        if (users == null)
        {
            users = new List<User>();
        }
        string userId = context.Request["userId"];
        //string json = callback + "({\"total\":" + users.Count + ",\"rows\":[";
        User _user = null;
        foreach (User user in users)
        {
            if (user.userId == int.Parse(userId))
            {
                _user = user;
            }
        }
        users.Remove(_user);
        context.Cache.Remove("users");
        context.Cache.Insert("users", users);
        //foreach (User user in users)
        //{
        //    json += "{\"userId\":" + user.userId + ",\"userName\":\"" + user.userName + "\",\"age\":" + user.age + ",\"phone\":\"" + user.phone + "\",\"address\":\"" + user.address + "\"},";
        //}
        //json += "]})";
        context.Response.Write(callback+"(1)");
        context.Response.End();
    }

    void GetUser(HttpContext context)
    {
        string callback = context.Request["callback"];
        users = context.Cache["users"] as List<User>;
        if (users == null)
        {
            users = new List<User>();
        }
        string userId = context.Request["userId"];
        string json = callback + "(";
        User _user = null;
        foreach (User user in users)
        {
            if (user.userId == int.Parse(userId))
            {
                _user = user;
            }
        }
        json += "{\"userId\":" + _user.userId + ",\"userName\":\"" + _user.userName + "\",\"age\":" + _user.age + ",\"phone\":\"" + _user.phone + "\",\"address\":\"" + _user.address + "\",\"type\":\"" + _user.type + "\"}";
        json += ")";
        context.Response.Write(json);
        context.Response.End();
    }

}


Global.asax

初始化数据

<%@ Application Language="C#" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e) 
    {
        // 在应用程序启动时运行的代码

        System.Collections.Generic.List<User> users = new System.Collections.Generic.List<User>();
        for (int i = 1; i <= 100; i++)
        {
            users.Add(new User(i, "A" + i, new Random().Next(20), "15612345678", "XXXXXX" + new Random().Next(100), new Random().Next(1, 6)));
        }
        //建立回调委托的一个实例
        CacheItemRemovedCallback callBack = new CacheItemRemovedCallback(CacheItemRemoved);
        HttpContext.Current.Cache.Insert("users", users, null, DateTime.Now.AddDays(1), TimeSpan.Zero, CacheItemPriority.High, callBack);
    }

    void CacheItemRemoved(string key, object value, CacheItemRemovedReason reason)
    {
        System.Collections.Generic.List<User> users = new System.Collections.Generic.List<User>();
        if(HttpContext.Current.Cache[key] != null){
            HttpContext.Current.Cache.Remove(key);
        }
        users.Add(new User(-1,"缓存已被清除",-1,"---","清除原因:"+reason,1));
        HttpContext.Current.Cache.Insert(key, users);
    }
    
    void Application_End(object sender, EventArgs e) 
    {
        //  在应用程序关闭时运行的代码

    }
        
    void Application_Error(object sender, EventArgs e) 
    { 
        // 在出现未处理的错误时运行的代码

    }

    void Session_Start(object sender, EventArgs e) 
    {
        // 在新会话启动时运行的代码

    }

    void Session_End(object sender, EventArgs e) 
    {
        // 在会话结束时运行的代码。 
        // 注意: 只有在 Web.config 文件中的 sessionstate 模式设置为
        // InProc 时，才会引发 Session_End 事件。如果会话模式设置为 StateServer 
        // 或 SQLServer，则不会引发该事件。

    }
       
</script>

完成

Ok,用事件翻页已经好了,下载Demo



iteye_10018
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值