前端页面——js如何让数据传输更灵活
我们之前已经说过一些关于前端页面的问题，今天我们来说说数据如何在页面和部分视图之间传递。
我们的项目中最基本的功能就是增、删、改、查。那么我们在实现的时候就会在主视图上添加一些部分视图，页面加载的时候我们先影藏部分视图，当单击添加或者修改的时候，再显示相应的部分视图。那么当我们在修改的时候，数据是如何变化的呢？
一.整体过程图
我们先来看看这个变化过程的整体图。
二、过程讲解
1、页面加载
已组织机构页面为例，当我们加载时，需要查询出所有的组织机构
1.1主视图的加载url
<div id="btnAreas" style="margin-bottom: 5px; margin-top: 10px;">
@* 2、加载按钮*@
@{Html.RenderAction("PermissionBtnsPartial", "ControlsPartial");}
</div>
@*3、先调用 对应的业务Controller中的表头数据*@
@{Html.RenderAction("ShowOrganizationProperties", "BasicOrganization");}
@* 4、加载 数据表格 datagrid 加参数——查询业务数据的url *@
@{ Html.RenderAction("DataGrid", "ControlsPartial", new { url = "/BasicOrganization/QueryOrganizationInfo" });}
@*右键快捷键方式*@
@{Html.RenderAction("MenuPartial", "ControlsPartial");}1.2Controller中调用WCF实现查询
#region 查询某组织机构下的所有机构信息+QueryOrganizationInfo()+崔晓光+2015年8月11日16:10:10
/// <summary>
/// 查询某组织机构下的所有机构信息
/// </summary>
/// <param name="id">机构ID</param>
public JsonResult QueryOrganizationInfo()
{
int total;
int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
List<BasicOrganizationViewModel> lschosecourse = new List<BasicOrganizationViewModel>();
try
{
//调用WCF相应的查询方法，得到查询结果
lschosecourse=organizationService.LeafQueryAllOrganization(pageSize, pageIndex, out total);
}
}
catch (Exception ex)
{
throw new Exception(ex.ToString());
}
//返回Json字符串
return Json(lschosecourse, JsonRequestBehavior.AllowGet);
}
#endregion1.4加载完成后显示到页面，如下
2、单击修改
页面上触发的事件都是通过JS实现的，我们需要补货按钮的ID来实现
//编辑按钮事件
$("#edit").bind("click", EditOk);3、JS转换
我们需要通过JS代码将数据从表格中得到，然后重新赋值给编辑（部分视图）中相应的控件。
//编辑1-打开编辑信息的窗口
function EditOk() {
//编辑步骤：选中行，进行修改，
var rows = $('#dg').datagrid('getSelections');
if (rows.length == 1) {//如果选中一行，可以编辑
$.each(rows, function (i, n) {//得到选中的数据
if (i == 0) {
//机构简介
Note = n.Note;
//机构层次
LevelName = n.LevelName;
//机构类型
OrganizationTypeName = n.OrganizationTypeName;
//父机构ID
OrganizationPID = n.OrganizationPID;
//机构名称
OrganizationName = n.OrganizationName;
//机构ID
OrganizationID = n.OrganizationID;
} else {
$.messager.show({
title: '提示消息',
msg: '请选中一行进行编辑！',
timeout: 5000,
showType: 'slide'
});
}
});
/*************将得到的数据传给相应的控件****************/
//异步查询上级分支名称
$.post("/BasicOrganization/GetOrganizationInfo", "OrganizationID=" + OrganizationPID, function (data) {
document.getElementById("EditpParentID").value = data;
});
//机构名称
document.getElementById("EditpNameID").value = OrganizationName;
//机构ID
document.getElementById("EditOrganizationID").value = OrganizationID;
//机构类型
document.getElementById("EditLevelTypeId").value = OrganizationTypeName;
//机构简介
document.getElementById("EditNote").value = Note;
$('#EditOrganizationInfo').window('open'); // 打开窗口
$('#Editwin').window('open'); // 打开窗口
} else if (rows.length < 1) {
$.messager.show({
title: '提示消息',
msg: '请选中要编辑的行！',
timeout: 5000,
showType: 'slide'
});
} else {
$.messager.show({
title: '提示消息',
msg: '请选中一行进行编辑！',
timeout: 5000,
showType: 'slide'
});
};
}4、打开
也就是上边出现的这段代码
$('#EditOrganizationInfo').window('open'); // 打开窗口 
5、保存
首先是触发JS事件
//编辑分支保存
function EditPersonsubmit() {
$('#Editee').form('submit', {
//保存方法调用的Controller的URL地址
url: "/BasicOrganization/ModifySchoolInfo",
onSubmit: function () {
var isValid = $(this).form('validate');
if (!isValid) {
}
return isValid; // 返回false终止表单提交
},
success: function (data) {
if (data > 0) {
$.messager.alert('提示', '编辑成功！');
$('#EditOrganizationInfo').window('close'); // close a window
$("#dg").datagrid("reload"); // 重新载入当前页面数据
} else {
$.messager.alert('提示信息', '编辑失败，请联系管理员！', 'warning');
}
}
});
}其他的调用略
三、总结
通过以上学习，我们知道了，js是页面和控制器的桥梁，通过JS使我们的数据可以灵活的穿梭于页面和控制器之间，从而达到我们想要的效果。