首页 > 代码库 > asp.net使用easyUI 前后台数据交互
asp.net使用easyUI 前后台数据交互
// 1. asp页面使用EasyUI框架需要的Css样式和JS
<script src="http://www.mamicode.com/script/jquery-easyui-1.4.5/jquery.min.js" type="text/javascript" charset = "utf-8"></script>
<script src="http://www.mamicode.com/script/jquery-easyui-1.4.5/jquery.easyui.min.js" type="text/javascript" charset = "utf-8"></script>
<link href="http://www.mamicode.com/script/jquery-easyui-1.4.5/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="http://www.mamicode.com/script/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" type="text/css"/>
<script src="http://www.mamicode.com/script/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset = "utf-8" ></script>
<script type="text/javascript">
//=========================================================== 用户列表信息 =============================================================================
// 加载页面信息
$(function () {
$(‘#datagrid_line‘).datagrid({
pagination: true, //分页控件
loadMsg: "正在加载，请稍后……",
toolbar: [{
text: ‘添加‘,
iconCls: ‘icon-add‘,
handler: function () { add(); }
}, ‘-‘, {
text: ‘删除‘,
iconCls: ‘icon-remove‘,
handler: function () { remove(); }
}, ‘-‘, {
text: ‘编辑‘,
iconCls: ‘icon-edit‘,
handler: function () { edit(); }
}, ‘-‘, {
text: ‘刷新‘,
iconCls: ‘icon-reload‘,
handler: function () { refresh(); }
}]
});
$(‘#addDialog‘).dialog(‘close‘); // 页面加载时隐藏dialog
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在页面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 从服务器获取得到json格式数据
dataType: "json",
success: function (data) {
// alert(data.d); //返回的数据用data.d获取内容
var json = JSON.parse(data.d); // 将后台得到json格式的字符串转换为字符串
for (var i in json.rows) {
var row_data = http://www.mamicode.com/{
‘userId‘: json.rows[i].UserId,
‘userName‘: json.rows[i].UserName,
‘nickName‘: json.rows[i].NickName,
‘department‘: json.rows[i].Department,
‘phone‘: json.rows[i].Phone
};
$(‘#datagrid_line‘).datagrid(‘appendRow‘, row_data);
// $(‘#datagrid_line‘).datagrid(‘loadData‘, row_data); // 如果是loadData，loadData只是加载数据，
// 一条一条的加载,这样就会覆盖之前显示的数据，而appendRow是追加数据，不会覆盖之前显示的数据
}
$(‘#datagrid_line‘).datagrid(‘reload‘);
//设置分页控件
var p = $(‘#datagrid_line‘).datagrid(‘getPager‘);
$(p).pagination({
pageNumber: 1, //默认显示第几页
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
beforePageText: ‘第‘,
afterPageText: ‘页 共{pages}页‘,
displayMsg: ‘当前显示{from}-{to}条记录 共{total}条记录‘
});
},
error: function (err) {
$.messager.alert("提示", "加载数据失败！", "info");
}
});
});
// 添加操作
function add()
{
// 清空表单内容
$(‘#form1‘).form(‘clear‘);
$(‘#addDialog‘).dialog(‘open‘).dialog(‘setTitle‘, ‘添加用户‘);
document.getElementById("Oper").value = "http://www.mamicode.com/add";
}
// 编辑操作
function edit() {
//alert(‘edit‘);
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
if (row == null) {
$.messager.alert("提示", "请选择要修改的行！", "info");
}
//获取要修改的字段
$(‘#userNameId‘).textbox(‘setText‘, row.userName);
$(‘#nickNameId‘).textbox(‘setText‘, row.nickName);
$(‘#departmentId‘).textbox(‘setText‘, row.department);
$(‘#phoneId‘).textbox(‘setText‘,row.phone);
$(‘#addDialog‘).dialog(‘open‘).dialog(‘setTitle‘, ‘修改用户信息‘);
document.getElementById("Oper").value = "http://www.mamicode.com/modify";
document.getElementById("ID").value = http://www.mamicode.com/row.userId;
$(‘#form1‘).form(‘load‘, row);
}
// 获取添加信息并传至后台
function getVlaue()
{
var userName = $(‘#userNameId‘).textbox(‘getText‘);
var nickName = $(‘#nickNameId‘).textbox(‘getText‘);
var department = $(‘#departmentId‘).textbox(‘getText‘);
var phone = $(‘#phoneId‘).textbox(‘getText‘);
var Oper = document.getElementById("Oper").value;
if (Oper == "add") {
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //传值的方式
url: "Test.aspx/GetValueAjax", //方法所在页面和方法名
data: "{username:‘" + userName + "‘" +
",nickname:‘" + nickName + "‘" +
",department:‘" + department + "‘" +
",phone:‘" + phone + " ‘" + "}",
dataType: "json",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d);
var row_data = http://www.mamicode.com/{
‘userId‘: json.rows.UserId,
‘userName‘: json.rows.UserName,
‘nickName‘: json.rows.NickName,
‘department‘: json.rows.Department,
‘phone‘: json.rows.Phone
};
$(‘#datagrid_line‘).datagrid(‘appendRow‘, row_data);
$(‘#addDialog‘).dialog(‘close‘);
$.messager.alert("提示", "添加用户成功！", "info");
$(‘#datagrid_line‘).datagrid(‘reload‘);
},
error: function (err) {
$.messager.alert("提示", "添加用户失败！", "info");
}
});
}
else
{
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
var rowIndex = 0;
if(row)
{
var Id = row.userId;
rowIndex = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, row);
}
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //传值的方式
url: "Test.aspx/GetEditValueAjax", //方法所在页面和方法名
data: "{userId:‘" + Id + "‘" +
",username:‘" + userName + "‘" +
",nickname:‘" + nickName + "‘" +
",department:‘" + department + "‘" +
",phone:‘" + phone + "‘" + "}",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);
$(‘#addDialog‘).dialog(‘close‘);
// 在后台获取到修改后的数据，删除原来的被修改的那一行，再重新插入一行已修改的数据
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, rowIndex);
$(‘#datagrid_line‘).datagrid(‘insertRow‘, {
index: rowIndex,
row: {
‘userId‘: json.rows.UserId,
‘userName‘: json.rows.UserName,
‘nickName‘: json.rows.NickName,
‘department‘: json.rows.Department,
‘phone‘: json.rows.Phone
}
});
$(‘#datagrid_line‘).datagrid(‘reload‘);
$.messager.alert("提示", "修改用户信息成功！", "info");
},
error: function (err) {
$.messager.alert("提示", "修改用户信息失败！", "info");
}
});
}
}
// 刷新页面，重新加载数据
function refresh()
{
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在页面和方法名
data: {},
contentType: "application/json;charset=utf-8", // 从服务器获取得到json格式数据
dataType: "json",
loadMsg: "正在加载，请稍后……",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d); // 将后台得到json格式的字符串转换为字符串
// 清空datagrid中原有数据
var item = $(‘#datagrid_line‘).datagrid(‘getRows‘);
if (item) {
for (var n = item.length - 1; n >= 0; n--) {
var index = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, item[n]);
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, index);
}
}
// 将获取到的数据重新加载到页面上
for (var k in json.rows) {
var row_data = http://www.mamicode.com/{
‘userId‘: json.rows[k].UserId,
‘userName‘: json.rows[k].UserName,
‘nickName‘: json.rows[k].NickName,
‘department‘: json.rows[k].Department,
‘phone‘: json.rows[k].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
}
});
}
// 删除操作
function remove()
{
var oper = document.getElementById("Oper").value = "http://www.mamicode.com/delete";
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
var rowIndex = 0;
if(row == null)
{
$.messager.alert("提示", "请选择要删除的行！", "info");
}
if(row)
{
var userId = row.userId;
rowIndex = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘,row);
$.messager.confirm(‘提示‘, ‘你确定要删除这条信息吗？‘, function (r) {
if (r) {
$.ajax({
type: "post",
contentType: "application/json", //传值的方式
url: "Test.aspx/DeleteUser",
data: "{userId:‘" + userId + "‘" + "}",
dataType: "text",
success: function (data) {
// alert(data);
if (data.d == "success") {
$.messager.alert("提示", "删除成功！", "info");
}
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, rowIndex);
var rows = $(‘#datagrid_line‘).datagrid("getRows");
$(‘#datagrid_line‘).datagrid("loadData", rows);
},
error: function (err) {
$.messager.alert("提示", "删除失败，请重新操作！", "info");
}
});
}
})
}
}
// 带条件的查询
function SearchInfo()
{
// alert(0);
var userName = document.getElementById("userName").value;
var department = document.getElementById("department").value;
alert(userName +","+ department);
$.ajax({
type: "post",
contentType: "application/json", //传值的方式
url: "Test.aspx/SearchUser",
data: "{userName:‘" + userName + "‘" + ",department:‘" + department + "‘" + "}",
dataType: "json",
contentType: "application/json;charset=utf-8", // 从服务器获取得到json格式数据
success: function (data) {
alert(data.d);
var d = JSON.parse(data.d); // 将后台得到json格式的字符串转换为字符串
// 清空datagrid中原有数据
var item = $(‘#datagrid_line‘).datagrid(‘getRows‘);
if (item)
{
for (var i = item.length - 1; i >= 0; i--)
{
var index = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, item[i]);
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, index);
}
}
// 遍历查询到的数据
for (var j in d.rows) {
var row_data = http://www.mamicode.com/{
‘userId‘: d.rows[j].UserId,
‘userName‘: d.rows[j].UserName,
‘nickName‘: d.rows[j].NickName,
‘department‘: d.rows[j].Department,
‘phone‘: d.rows[j].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
},
error: function (error) {
$.messager.alert("提示", "查询用户信息失败，请重新操作！", "info");
}
});
}
$(function () {
console.info("第一个combobox");
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUser", //方法所在页面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 从服务器获取得到json格式数据
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
for (var i in d) {
console.info("text : " + d[i].UserName);
themecombo2.push({ "text": d[i].UserName, "id": d[i].UserId }); // combobox列表值的显示
$("#userCombobox").combobox("loadData", themecombo2);
}
},
error: function (err) {
$.messager.alert("提示", "加载数据失败！", "info");
}
});
$("#userCombobox").combobox({
onSelect: function (rec) {
console.info("id: +++ " + rec.id);
getUserInfo(rec.id);
}
});
});
function getUserInfo(id) {
console.info("userId : " + id);
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUserByUserId", //方法所在页面和方法名
data: "{userId:" + id + "}",
contentType: "application/json; charset=utf-8", // 从服务器获取得到json格式数据
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
console.info(d.UserName);
console.info(d.UserId);
themecombo2.push({ "text": d.UserName, "id": d.UserId }); // combobox列表值的显示
console.info("themecombo2 : " + themecombo2);
$("#userNameCombobox").combobox("loadData", themecombo2);
},
error: function (err) {
$.messager.alert("提示", "加载数据失败！", "info");
}
});
}
// $(‘#userCombobox‘).combobox({
// onSelect: function (rec) {
// console.info("第二个");
// console.info("userId: " + rec.id);
// console.info("userName: " + rec.text);
// $(‘#userNameCombobox‘).combobox({
// url:‘Test.aspx/getAlluserByUserId‘,
// queryParams: "{userId:‘" + rec.id + "}",
// valueField:‘UserId‘,
// textField:‘UserName‘
// });
// var url = ‘Test.aspx/getAllUserByUserId?userId=‘ + rec.id;
// $(‘#userNameCombobox‘).combobox(‘reload‘, url);
</script>
asp.net使用easyUI 前后台数据交互