本文共 4570 字，大约阅读时间需要 15 分钟。

       我们之前已经说过一些关于前端页面的问题，今天我们来说说数据如何在页面和部分视图之间传递。

       我们的项目中最基本的功能就是增、删、改、查。那么我们在实现的时候就会在主视图上添加一些部分视图，页面加载的时候我们先影藏部分视图，当单击添加或者修改的时候，再显示相应的部分视图。那么当我们在修改的时候，数据是如何变化的呢？

一.整体过程图

我们先来看看这个变化过程的整体图。

二、过程讲解

1、页面加载

       已组织机构页面为例，当我们加载时，需要查询出所有的组织机构

1.1主视图的加载url

   
         @* 2、加载按钮*@     @{Html.RenderAction("PermissionBtnsPartial", "ControlsPartial");}
   
     @*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        /// 
        /// 查询某组织机构下的所有机构信息        /// 
        /// 机构ID        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
   
     lschosecourse = new List
    
     ();            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使我们的数据可以灵活的穿梭于页面和控制器之间，从而达到我们想要的效果。