xBoady 2021-11-29 00:14 采纳率: 66.7%
浏览 13
已结题

.net Mvc使用Jquery+EasyUi (datagrid)数据绑定无法显示页面,显示的是纯Json数据?

这个是我显示的结果:

img

前端js代码:


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<table id="dg" title="用户列表" class="easyui-datagrid" style="width:100%;height:100%">
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <h3>User Information</h3>
        <div style="margin-bottom:10px">
            <input name="UserId" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="UserName" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="UserPassword" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
    $(function () {

        $('#dg').datagrid({
            title: 'userlist',
            url: 'Users/Index',
            method: 'get', //默认是post,不允许对静态文件访问
            width: '700',
            iconCls: 'icon-save',
            dataType: "json",
            fitColumns: true,
            rownumbers: true, //是否加行号
            pagination: true, //是否显式分页
            pageSize: 10, //页容量,必须和pageList对应起来,否则会报错
            pageNumber: 1, //默认显示第几页
            pageList: [10, 20, 30],//分页中下拉选项的数值
            columns: [[
                { field: 'UserId', title:'用户编号' },
                { field: 'UserName', title: 'id' },
                { field: 'UserPassword', title: '姓名' }
            ]]
        });
    });

    var url;
    function newUser() { // 弹出新增
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'New User');
        $('#fm').form('clear');
        url = 'save_user.php';
    }

    //弹出编辑
    function editUser() {
        var row = $('#dg').datagrid('getSelected');

        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
            $('#fm').form('load', row);
            url = 'update_user.php?id=' + row.id;
        }
    }

    //提交数据
    function saveUser() {
        $('#fm').form('submit', {
            url: url,
            iframe: false,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            }
        });
    }

    //移除
    function destroyUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {
                if (r) {
                    $.post('destroy_user.php', { id: row.id }, function (result) {
                        if (result.success) {
                            $('#dg').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        }
    }
</script>

控制器里面的方法:

    public class UsersController : Controller
    {
        private readonly DapperHelper dapper = new DapperHelper();
        // GET: Users

        [HttpGet]
        public JsonResult Index(int? page, int? rows)
        {
            List<T_User> list = dapper.Query<T_User>("select * from T_User").ToList();

            page = page == null ? 1 : page;
            rows = rows == null ? 10 : rows;
            List<T_User> uList = list.OrderBy(a => a.T_UserId).Skip((Convert.ToInt32(page) - 1) * Convert.ToInt32(rows)).Take(Convert.ToInt32(rows)).ToList();

            var json = new
            {
                total = uList.Count(),
                rows = (from r in uList
                        select new
                        {
                            UserId = r.T_UserId,
                            UserName = r.T_UserName,
                            UserPassword = r.T_UserPassword
                        }).ToArray()
            };
            return Json(json, JsonRequestBehavior.AllowGet);
        }
    }

麻烦帮我看下,真不知道是什么问题造成的,郁闷

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 12月7日
    • 创建了问题 11月29日

    悬赏问题

    • ¥15 python的qt5界面
    • ¥15 无线电能传输系统MATLAB仿真问题
    • ¥50 如何用脚本实现输入法的热键设置
    • ¥20 我想使用一些网络协议或者部分协议也行,主要想实现类似于traceroute的一定步长内的路由拓扑功能
    • ¥30 深度学习,前后端连接
    • ¥15 孟德尔随机化结果不一致
    • ¥15 apm2.8飞控罗盘bad health,加速度计校准失败
    • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
    • ¥15 谁有desed数据集呀
    • ¥20 手写数字识别运行c仿真时,程序报错错误代码sim211-100