这个是我显示的结果:
前端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);
}
}
麻烦帮我看下,真不知道是什么问题造成的,郁闷