前端页面——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);

        }
        #endregion

1.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使我们的数据可以灵活的穿梭于页面和控制器之间，从而达到我们想要的效果。