layer弹窗传递值的方法

共有三种传值方法

1.通过layer.open()中的success回调方法传值。

弹出层layer本质上是一个iframe，可以通过js获取其dom元素然后对相应的标签赋值。

代码示例:(这里是使用layui的table组件，在点击工具栏时打开弹出层，主要是success回调函数中的代码)

            //监听工具条
            table.on('tool(user)', function (obj) {
                var data = obj.data;
                console.info("tool");
                if (obj.event === 'edit') {//实现操作
                    //layer.msg('ID：'+ data.id + ' 的查看操作');
                    layer.open({
                        type: 2,
                        content: '/Storage/OutStorageDetail2',
                        title: "修改用户",
                        area: ["700px", "450px"],
                        end: function () { // layui 关闭弹框时的回调函数
                            $("#reloadBtn").click();
                        },
                        success: function (layero, index) {
                        //向layer页面传值，传值主要代码
                            var body = layer.getChildFrame('body', index);
                            
                            //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            //var iframeWin = window[layero.find('iframe')[0]['name']];
                            
                            //将弹窗页面中属性名name="fixure_id"的标签赋值
                            body.find("[name='fixure_id']").val(data.fixure_id);
                        }

                    });
                }
            });

参考：
layui给layer弹出层如何传值？

2.利用后台.net mvc的控制器方法传值，由于.net mvc框架中每个页面view都有对应的action方法，所以可以从后台传值到layer中。

具体思路：

1.在layer.open()的content参数中将少量信息拼接传递到后台，如userID

2.在页面view对应的后台action方法中接收该userID并查找到对应的要传的值，通过ViewBag等传递到layer中。

代码示例:（前端view代码）

            //监听工具条
            table.on('tool(user)', function (obj) {
                var data = obj.data;
                console.info("tool");
                if (obj.event === 'edit') {//实现操作
                    //layer.msg('ID：'+ data.id + ' 的查看操作');
                    layer.open({
                        type: 2,
                        content: '/Storage/UserDetail?userGuid=' + data.UserGuid,
                        title: "修改用户",
                        area: ["700px", "450px"],
                        end: function () { // layui 关闭弹框时的回调函数
                            $("#reloadBtn").click();
                        }
                    });
                }
            });              

后台控制器的action方法：(这里通过前台传来的userGuid，使用ef获得用户所有信息，最后通过ViewBag将数据在传回前端弹窗的view)

        public ActionResult UserDetail(Guid? userGuid)
        {

            if (userGuid == null)
            {
                return View();
            }

            using (ruanmouDbContext context = new ruanmouDbContext())
            {
                rm_UserInfo userinfo = context.rm_UserInfo.FirstOrDefault(u => u.UserGuid == userGuid);
                ViewBag.userInfo = Newtonsoft.Json.JsonConvert.SerializeObject(userinfo);
                return View();
            }


        }

layer前端弹窗view接收值的代码：

		
       var userInfo = @ViewBag.userInfo ; 
        var jsonUser = JSON.parse(userInfo);

3.(不推荐)在layer的content参数的url拼接字符串进行传值，但此方法只能传少量的值（通过url地址传值）

这种方法其前端的layeropen()方法的代码与第二种类似，但前端弹窗获取值的方法与第二种不同，其前端直接用js从url地址中获取参数值，这种方法我还没实际使用过，不是很推荐。

用js从url地址中取值的参考代码：

/**
 * [通过参数名获取url中的参数值]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param  {[string]} queryName [参数名]
 * @return {[string]}           [参数值]
 */
function GetQueryValue(queryName) {
    var query = decodeURI(window.location.search.substring(1));
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == queryName) { return pair[1]; }
    }
    return null;
}

//使用方法
var queryVal=GetQueryValue('name');
console.log(queryVal);// 小明

参考：
js获取url参数值的方法总结