需求说明：

　　一个表单页面，点击提交之后，进入后台进行一系列数据交互，然后将交互信息返回至页面中，并以弹框形式展示

应用场景：

　　添加、修改、删除数据后，返回数据操作是否成功，以及一些其他信息

前期准备：

实现过程：

　　首先，来一段最原始简单的HTML和后台代码，请忽略CSS

 <html>

 <head>

     <title>Default</title>

     <!-- CSS文件引用 -->

     <link href="/Content/Script/Plug/layui/css/layui.css" rel="stylesheet">

 </head>

 <body>

     <form action="/Home/Default" method="post" class="layui-form" style="width:80%;margin:0px auto;">

         <fieldset>

             <legend>表单</legend>

             <!-- 输入框 -->

             <div class="layui-form-item">

                 <label class="layui-form-label">输入框</label>

                 <div class="layui-input-block">

                     <input type="text" name="title" placeholder="请输入文字" class="layui-input">

                 </div>

             </div>

             <!-- 提交按扭 -->

             <div class="layui-form-item">

                 <div class="layui-input-block">

                     <input type="submit" class="layui-btn layui-btn-block">

                 </div>

             </div>

         </fieldset>

     </form>

     <!-- JS文件引用 -->

     <script src="/Content/Script/jquery-3.2.1.min.js"></script>

     <script src="/Content/Script/Plug/layui/layui.all.js"></script>

 </body>

 </html>

效果如下（图1）：

紧接着，是一段简单的后台代码：

         public ActionResult Default() {

             return View();

         }

         [HttpPost]

         public ActionResult Default(string title) {

             return View();

         }

代码的执行过程是这样的，

首先进入第一个Defult()方法，简称Get方法，展示页面

在页面中，点击表单的提交按钮，会进入第二个Gefult()方法，简称Post方法，进行数据处理，然后返回页面

Get方法可以暂时忽略，它和返回弹框信息并没有什么关系，我们主要是对Post方法进行改造

要实现弹框效果，其实很简单，略微改造就OK：

         [HttpPost]

         public ActionResult Default(string title) {

             return Content("<script>alert('" + title + "')</script >");

         }

但这样的效果非常不友好，非常难看不说，每个浏览器alert出来的弹框样式都不一致，而且，还有这样那样的bug，效果如图（图2）：

根据layui的文档，layer.msg("msg");执行的弹框还是非常不错的，那我们就将alert修改为layer.msg();：

         [HttpPost]

         public ActionResult Default(string title) {

             return Content("<script>layer.msg('" + title + "')</script >");

         }

然后，执行就炸毛了，弹框没有出现，页面也是一片空白：

可以看到，拼接出来的script代码并没有问题，然而控制台却报错：Default:1 Uncaught ReferenceError: layer is not defined，没找到layer对象

这是什么原因呢？？再看当前页面的HTML：

只有一些最基本的标签，以及head里面一个孤零零的script代码，这样错误就很明显了，

layer.msg();这个方法是要依赖于layui.js的，现在还没有引用文件，自然会报错，

那么，问题又来了，为什么返回的视图只有一段script代码呢？？

仔细观察，不难发现，比较原始代码和当前代码，最大的不同是return 的内容不一样了，

原始代码：return View();// 返回当前视图对应的html代码

当前代码：return Content("");// 返回传入的字符串

现在问题就很明了了，

如果我要返回页面的话，肯定是要返回View()的，那里面有需要的各种文件的引用，

　　然后在返回View();的情况下，返回字符串，如果不考虑使用ViewBag，因为总感觉用那个的非常不方便，那么我们只能使用View("Msg");来返回信息

　　这样的话，如果我要对页面返回一个实例对象，就又呵呵了，所以，使用View();返回的方法不作考虑

那么就只能使用Content();方法返回信息了，

　　其实页面信息不显示的问题还是很好解决的，可以这样返回：return Content("<script>location.htrf='/Home/Default';</script>");

　　利用js进行页面跳转，就会跳转至Get方法，而Get方法是return View();所以页面信息显示的问题解决了，

　　但是，如何弹框呢？

　　如果将弹框代码layer.msg("Msg");写在跳转之前，那个时候还没有引用文件，所以肯定是报错，无法弹框的，说不定还会因为报错导致跳转代码无法执行，所以pass，

　　若写在跳转之后，嗯，页面已经跳转了，你这个弹框先不说能不能弹出来，哪怕弹出来也看不到了，毕竟已经跳转到另外一个页面了，

　　很好，现在局面又陷入了僵局，，，

　　想想，现在我们应该怎么处理？？？

　　能不能让跳转和弹框分开，既然它们相看两厌，那就让它们互不相关，互不影响怎么样，你跳你的页面，我弹我的框，咱们画好三八线

　　那么，这根三八线怎么画，用什么画？？答案是iframe

　　新建一个页面Index，该引用的引用好，然后将页面Default嵌入到iframe中，

　　这样跳转的话，只是iframe跳转，而我的弹框，完全可以跳出Default文件引用的约束，利用父窗Index的引用实现

具体实现过程如下：

新建一个父窗的后台和HTML：

         public ActionResult Index() {

             return View();

         }
 @{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>@ViewBag.Title</title>

     <!-- CSS文件引用 -->

     <link href="~/Content/Script/Plug/layui/css/layui.css" rel="stylesheet" />

     <!-- JS文件引用 -->

     <script src="~/Content/Script/jquery-3.2.1.min.js"></script>

     <script src="~/Content/Script/Plug/layui/layui.all.js"></script>

 </head>

 <body>

     <script>

         $(function () {

             // 创建iframe

             layer.open({

             type: 2,// 2为iframe

             title: false,// 去掉标题

             closeBtn: 0,// 去掉关闭按钮

             shade: false,// 关闭遮罩层

             maxmin: false, // 关闭最大化最小化按钮

             area: ['100%', '100%'],// 直接最大化，充当Index内容

             anim:5,// 渐变出现

             content: '@Url.Action("Default", "Home")'// iframe链接地址

             });

         });

     </script>

 </body>

 </html>

这样运行出来的效果和图1是一毛一样的，但是仔细观察，会发现它们的路径是不一样的，

图1的路径是http://localhost:50082/Home/Default，现在运行出来的路径是http://localhost:50082/Home/Index

这时候，就已经将Default页面用iframe嵌入Index页面了，而且毫无违和感，修改anim属性，还能有一些意外的进入动画效果，相当不错来着，，

接下来就是返回消息弹框了，我已经封装好了，直接贴代码：

         [HttpPost]

         public ActionResult Default(string title) {

             return Content(LayerMsg(title));

         }

         /// <summary>

         /// 返回页面消息弹框

         /// </summary>

         /// <param name="msg">消息内容</param>

         /// <param name="url">跳转链接</param>

         /// <param name="icon">消息类型,[-1,6]</param>

         /// <param name="anim">消息动画,[-1,6]</param>

         /// <param name="time">出现时间,（单位:ms）</param>

         /// <returns></returns>

         public string LayerMsg(string msg, string url = "", int? icon=null, int anim = -, int time = ) {

             // 链接,若为空，返回当前页面

             if (string.IsNullOrEmpty(url))

                 url = HttpContext.Current.Request.RawUrl;

             // 动画

             anim = anim % ;

             if (anim < )

                 anim = new Random().Next(, );

             StringBuilder str = new StringBuilder();

             object[] key = { "anim", "time", "icon" };

             object[] val = {  anim, time, icon };

             str.Append("<script>");

             str.Append("location.href='" + url + "'; ");

             // 由于要返回的是父窗的方法，所以加上'parent.'

             str.Append("parent.layer.msg('" + msg + "',{");

             str.Append(MosaicKeyVal(key, val) + "});");

             str.Append("</script>");

             return str.ToString();

         }

         /// <summary>

         /// 拼接键值对

         /// </summary>

         /// <param name="key">键</param>

         /// <param name="val">值</param>

         /// <returns></returns>

         public string MosaicKeyVal(object[] key, object[] val) {

             if (key.Length != val.Length)

                 return "";

             StringBuilder str = new StringBuilder();

             for (int i = ; i < key.Length; i++) {

                 if (string.IsNullOrEmpty(key[i] + ""))

                     continue;

                 if (string.IsNullOrEmpty(val[i] + ""))

                     continue;

                 // 添加逗号

                 if (str.Length > )

                     str.Append(",");

                 // 添加键值对

                 str.Append(string.Format(" '{0}':'{1}'  ", key[i].ToString(), val[i].ToString()));

             }

             return str.ToString(); ;

         }

效果以及返回的script代码如图：

至此就大功告成了，那几个参数大家可以看着传过去玩玩，有惊喜的，

尚待思考：

　　有人对这个方法提出了一个需求，就是点击提交之后，不仅可以弹框，还要保证文本框里面的信息不会丢失，

　　对于这个需求我表示相当无奈，除非使用ViewBag，还没有比较好的解决方法，或许是我的思路还不够开阔吧，

　　那货说可以监听所有的onsubmit事件，将submit提交更改为ajax异步，这样数据就能保留下来了，而且，弹框也更简单了，直接使用success事件就好，

　　但是这样总感觉哪里不对劲，也尝试这样写过，确实能够实现最开始的需求，不过会顺带出一大堆的问题，

　　比如说，我加入表单验证插件Validform之后，用ajax提交，验证插件就完全失效了，这还只是最初步的实验，估计那些看得见的看不见的问题会更多，

　　哪位大佬有更好的解决思路，，欢迎指点

利用layer实现MVC页面数据互交提示弹框的更多相关文章

  1. JS 信息提示弹框封装

    // 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '&l ...

  2. PL/SQL Developer的错误提示弹框的文本显示乱码问题

    问题:Windows中文环境下,PL/SQL Developer的错误提示弹框文本为乱码,如下: 解决过程:1.使用SELECT * FROM v$nls_parameters;查询得知服务器的字符集 ...

  3. AspNetCore MVC页面数据提交验证

    2019/05/14,AspNetCore 2.2.0 摘要:AspNetCore MVC使用数据注释配合jquery.validate提交页面进行前端加后端的数据验证 主要用到了jquery.val ...

  4. SpringMVC中利用@InitBinder来对页面数据进行解析绑定

    同步发布:http://www.yuanrengu.com/index.php/springmvc-user-initbinder.html 在使用SpingMVC框架的项目中,经常会遇到页面某些数据 ...

  5. 利用python抓取页面数据

    1.首先是安装python(注意python3.X和python2.X是不兼容的,我们最好用python3.X) 安装方法:安装python 2.安装成功后,再进行我们需要的插件安装.(这里我们需要用 ...

  6. 利用js生成读取页面数据并导出为excel

    //核心,js部分 */var navs = new Vue({ el: '#navs', data: { navs: [] }, ready: function () { this.$http.ge ...

  7. 移动端遮罩及阻止页面滑动，实用！！！ 我们经常做一个fixed定位的遮罩和一个提示弹框，这时就要用到。记录--

    document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; document.getElementByI ...

  8. ionic提示弹框

    //提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...

  9. js+css jQuery实现页面后退执行 & 遮罩弹框

    JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...

随机推荐

  1. esp8266 SDK开发之编译流程

    最近刚完成自己8266的小项目,已经发布在github上,有兴趣的朋友可以看一下 github地址:esp-ujn 1. 通过MQTT协议与服务器交互 2. 内置HTTP服务器,支持通过浏览器进行参数 ...

  2. spring mvc 复杂参数注入

    过了这么久,又重新把博客拾起来了 来上海工作也已经有将近两周的时间了, 今天在整理项目的时候,遇到了一个关于参数注入的问题 背景: 我的开发前台用的是extjs4,在对后台spring mvc提交表单 ...

  3. javascript算法题判断输入年份是否是闰年

    用户输入一个年份,判断这个年是否是闰年.判断闰年条件:① 非整百年数除以4,无余为闰,有余不闰:② 整百年数除以400,无余为闰,有余不闰.比如:2000年,整百数年,就要用②公式,除以400,无余数 ...

  4. javascript设计模式——单例模式

    前面的话 单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScri ...

  5. 关于promise的详细讲解

    到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读 ...

  6. 数组a和&a区别

    假设我们定义一个数组char a[16]; 那么a与&a分别代表什么呢?它们完全一样吗? a其实代表的是数组中首元素的地址,即a[0]的地址,&a代表的是整个数组的起始地址.我们做个测 ...

  7. Python爬虫(八)_Requests的使用

    Requests:让HTTP服务人类 虽然Python的标准库中urllib2模块中已经包含了平常我们使用的大多数功能,但是它的API使用起来让人感觉不太好,而Requests自称"HTTP ...

  8. Android官方技术文档翻译——Gradle 插件用户指南（5）

    昨晚把第五章未译完的几句话攻克了.只是第六章没怎么译,明后天又是周末,假设周一前第六章翻译完的话,周一再发第六章. 本文译自Android官方技术文档<Gradle Plugin User Gu ...

  9. 解析XML文件之使用SAM解析器

    XML是一种常见的传输数据方式,所以在开发中,我们会遇到对XML文件进行解析的时候,本篇主要介绍使用SAM解析器,对XML文件进行解析. SAX解析器的长处是显而易见的.那就是SAX并不须要将全部的文 ...

  10. KNN K~近邻算法笔记

    K~近邻算法是最简单的机器学习算法.工作原理就是:将新数据的每一个特征与样本集中数据相应的特征进行比較.然后算法提取样本集中特征最相似的数据的分类标签.一般来说.仅仅提取样本数据集中前K个最相似的数据 ...