MVC微信菜单点击列表iframe框架局部刷新

最新推荐文章于 2022-10-24 14:14:52 发布
最新推荐文章于 2022-10-24 14:14:52 发布
阅读量285 收藏
点赞数
分类专栏： MVC学习 文章标签： mvc 微信菜单列表 iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42931967/article/details/84674074
版权

这是效果图，点击微信下面的菜单会弹出相应的页面，底部和头部不懂在这里插入图片描述
首先添加一个控制器。MobileController.cs。添加要显示的页面。

public class MobileController : Controller
    {
        // GET: Mobile
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult iframe1Name()
        {
            return View();
        }
        public ActionResult ViewPage1()
        {
            return View();
        }
        
    }

新建index.cshtml 视图页

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>头部标题栏</title>
    <link rel="stylesheet" type="text/css" href="~/Content/style1.css" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .headTop {
            width: 100%;
            height: 3.5em;
            background: #4F77AB;
            text-align: center;
            line-height: 3.5em;
        }

        .goBack {
            display: inline-block;
            width: 10%;
        }

            .goBack img {
                width: 20px;
                vertical-align: middle;
            }

        .titles {
            display: inline-block;
            width: 70%;
            color: #fff;
            font-size: 1.2em;
        }

        .myself {
            display: inline-block;
            width: 15%;
        }

            .myself img {
                width: 25px;
                vertical-align: middle;
            }
    </style>
</head>
<body>
    <header class="headTop">
        <p class="goBack"><a href="javascript:history.go(-1);"><img src="~/images/back.png" /></a></p>
        <p class="titles">营销服务智慧管控平台</p>
        <p class="myself"><a href="@Url.Action("Index")"><img src="~/images/home.png"></a></p>
    </header>

    <div class="">
        <iframe  id="iframe1Name" src="@Url.Action("iframe1Name")"  name="iframe1Name" width="100%" height="900" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </div>
    <div class="btn3 clearfix">
        <div class="menu">
            <div class="bt-name">营销KPL</div>
            <div class="sanjiao"></div>
            <div class="new-sub">
                <ul>
                    <li><a id="a1" name="@Url.Action("iframe1Name")">首页面</a></li>
                    <li><a id="a2" name="@Url.Action("ViewPage1")">二、第二个</a></li>
                </ul>
                <div class="tiggle"></div>
                <div class="innertiggle"></div>
            </div>
        </div><!--menu-->
        <div class="menu">
            <div class="bt-name">智能表</div>
            <div class="sanjiao"></div>
            <div class="new-sub">
                <ul>
                    <li><a id="a3" name="@Url.Action("iframe1Name")">地图概览</a></li>
                    <li><a id="a4" name="@Url.Action("iframe1Name")">实时监控</a></li>
                    <li><a id="a5" name="@Url.Action("iframe1Name")">仪表统计</a></li>
                </ul>
                <div class="tiggle"></div>
                <div class="innertiggle"></div>
            </div>
        </div><!--menu-->
        <div class="menu">
            <div class="bt-name">综合查询</div>
            <div class="sanjiao"></div>
            <div class="new-sub">
                <ul>
                    <li><a id="a6" name="@Url.Action("iframe1Name")">三、第一个</a></li>
                    <li><a id="a7" name="@Url.Action("iframe1Name")">三、第二个</a></li>
                    <li><a id="a8" name="@Url.Action("iframe1Name")">三、第三个</a></li>
                </ul>
                <div class="tiggle"></div>
                <div class="innertiggle"></div>
            </div>
        </div><!--menu-->
    </div><!--btn3-->
    <script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            @*var URL = "@Html.Raw(ViewBag.iframe1Name)";
            var iframe1Name = $("#iframe1Name");
            if (URL != "") {
                iframe1Name.attr("src", URL);
            }*@
            //document.getElementById("iframe1Name").src = "/Mobile/iframe1Name";

            $("#a1").click(function () {
                var name = $(this).attr("name");
                $("#iframe1Name").attr("src", name).ready();
            });
            $("#a2").click(function () {
                var name = $(this).attr("name");
                $("#iframe1Name").attr("src", name).ready();
            });
            $("#a3").click(function () {
                var name = $(this).attr("name");
                $("#iframe1Name").attr("src", name).ready();
            })
        })
		//弹出垂直菜单

		$(".menu").click(function() {
		    if ($(this).hasClass("cura")) {
		        $(this).children(".new-sub").hide(); //当前菜单下的二级菜单隐藏
		        $(".menu").removeClass("cura"); //同一级的菜单项
		    } else {
		        $(".menu").removeClass("cura"); //移除所有的样式
		        $(this).addClass("cura"); //给当前菜单添加特定样式
		        $(".menu").children(".new-sub").slideUp("fast"); //隐藏所有的二级菜单
		        $(this).children(".new-sub").slideDown("fast"); //展示当前的二级菜单
		    }
		});
    </script>
</body>
</html>

iframe框架中的src="@Url.Action(“iframe1Name”)"加载MobileController.cs中的iframe1Name这个页面。

$("#a1").click(function () {
var name = $(this).attr(“name”);
$("#iframe1Name").attr(“src”, name).ready();
});
点击下面的弹出菜单获取iframe的id，替换他的name中的页面地址。
点击切换菜单，只需修改li中name中的页面地址。注意添加的页面地址要在MobileController.cs控制器中定义。

                <li><a id="a1" name="@Url.Action("iframe1Name")">首页面</a></li>
                <li><a id="a2" name="@Url.Action("ViewPage1")">二、第二个</a></li>

底部切换菜单的样式 

html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{color:#333;}
body,button,input,select,textarea,h2,h3,h4,h5,h6{font:14px 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial}
img,fieldset{border:0;vertical-align:middle}
input{padding:0;margin:0;outline:none;}
a{text-decoration:none;color:#4c4c4c;}
a:hover{text-decoration:none;}
ul,li,ol{list-style:none}
img{max-width:100%;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
.clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;zoom:1;}
.l{float:left;}.r{float:right;}
/*reset样式重置*/
.btn3{
	position:fixed;
  z-index:999;
  bottom:0px;
  border-top:1px solid #b3b3b3;
  background:#e6e6e6;
  width:100%;
  text-align:center;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }
.menu{position:relative;
    float:left;
    width:33.33%;
    height:50px;
    line-height:50px;
    background:#fff;
    border-right:1px solid #ebebeb;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
.menu:last-child{border-right:none;}
.new-sub{position:absolute;
      bottom:60px;
      z-index:999;
      width:100%;
      padding: 0px 10px;
      box-sizing:border-box;
      -webkit-box-sizing:border-box;
      border: 1px solid #EEEEEE;
      border-radius: 5px;
      display:none;}
.new-sub li{width: 100%;
        background:#fff;
          z-index:999;
        float:none;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        border-top:1px solid #f2f2f2;
        
        }
.new-sub li a{display:block;
          z-index:999;
          height:50px;
          line-height:50px;
          text-align:left;
          background:#fff;
          color:#333;
          border:none;
          text-align:center;
          font-size:16px;
          cursor: pointer;
          }
.sanjiao{position:absolute;bottom:5px;right:5px;width:0;height:0;border:5px solid transparent;border-right:5px solid #000;border-bottom:5px solid #000;opacity:.5;}
.bt-name{font-size:16px;color:#000;}
.bt-name a{display:block;font-size:16px;color:#000;}
.new-sub .tiggle{
	width:0px;
      height:0px;
      position:absolute;
      left:50%;
      margin-left:-10px;
      bottom:-9px;
      border-top:10px solid #EEEEEE;
      border-left:10px solid transparent;
      border-right:10px solid transparent;
      z-index:10;
  }
  .new-sub .innertiggle{
  	width:0px;
      height:0px;
      position:absolute;
      left:50%;
      margin-left:-9px;
      bottom:-8px;
      border-top:9px solid white;
      border-left:9px solid transparent;
      border-right:9px solid transparent;
      z-index:11;
}
不说再见＠(￣-￣)＠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe之局部刷新
04-28
iframe之局部刷新 - 行知 - JavaEye技术网站.mht
iframe实现页面局部刷新操作
09-26
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
.net MVC中如何使用iframe实现局部刷新
热门推荐
jjp837661103的专栏
08-05 2万+
今天有人遇到在MVC中局部刷新问题，可以防止整个也页面进行刷新，出现抖动现象。 网页中的布局还是选用的是table布局，其实DIV+CSS不是一样的原理和操作过程，这里只是示范怎么进行局部刷新。 首先在VS新建一个MVC工程，保证运行正常。 接下来修改Home/Index视图，如下： 主页 --%>
iframe实现局部更新
weixin_30649859的博客
03-06 101
<a href="#" id="a1" name="format.html">1</a> <a href="#" id="a2" name="1.html">2</a> <iframe src="" id="iframe"></iframe> 　　 $(function(){ $("#a1").cl...
＜iframe＞实现页面局部刷新
qq_39702981的博客
10-24 958
实现页面局部刷新
MVC微信开发框架.zip
08-14
本系统基于T4模板开发MVC5+EF6微信开发框架，内集微信管理后台功能，只需添加功能模块即可快速开发微信应用。 开发语言：asp.net C# 数据库：sqlserver2008 开发工具：vs2017
C# MVC 微信支付教程系列之公众号支付代码
12-26
今天，我们接着讲微信支付的系列教程，前面，我们讲了这个微信红包和扫码支付。现在，我们讲讲这个公众号支付。公众号支付的应用环境常见的用户通过公众号，然后再通过公众号里面的菜单链接，进入公众号的商城，然后...
.NET MVC 微信扫码登录
03-22
.NET MVC 微信扫码登录，网站微信扫码登录，获取iconurl,openid,unionid,token等基本信息获取
MVC微信扫码登录.rar
07-05
在本文中，我们将深入探讨如何使用C# .ASP.NET MVC框架实现微信扫码登录功能。微信扫码登录是一种便捷的用户身份验证方式，它允许用户通过扫描微信应用中的二维码快速登录到网站，无需输入用户名和密码。以下是你...
.net MVC微信公众平台支付源码
03-14
.net MVC环境下的微信公众平台支付源码
使用iframe实现点击导航无刷新切换页面
10-11
使用iframe实现点击导航页面无刷切换，使用bootstrap布局
点击菜单实现内容局部刷新
ChpeShy的博客
06-25 1万+
原理： 利用window.addEventListener("popstate", function(e) {});方法监听浏览器url的变化，判断当前的url动态局部刷新内容区域。(发现不太喜欢打字描述，还是直接贴代码好了。。。未来的我啊，回顾这段代码应该能看懂吧。)&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;...
微信小程序局部刷新触发整页刷新效果
weixin_39168678的博客
11-21 2221
效果图 如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop }, 2信息栏监听下拉状态的改变而改...
微信小程序mvc框架
最新发布
08-06
微信小程序是由微信官方推出的一种应用程序形态，具有轻量级、便捷高效的特点。而MVC框架是一种常用的软件架构模式，用于组织和管理应用程序的代码结构。 在微信小程序开发中，MVC框架也得到了广泛的应用。简单来说，微信小程序的MVC框架将应用程序分为三个部分：模型（Model）、视图（View）和控制器（Controller）。 首先，模型（Model）负责存储和处理数据。在微信小程序中，模型通常是由数据结构、数据源以及对数据的操作方法组成。它可以实现数据的增加、删除、修改、查询等操作，同时也可以处理数据之间的相互依赖关系。 其次，视图（View）负责展示数据和用户交互。在微信小程序中，视图通常是由wxml（微信小程序页面的XML结构描述）以及相应的样式表wxss（微信小程序页面的样式表）组成。视图通过模板引擎将数据与DOM元素进行绑定，实现数据的展示。 最后，控制器（Controller）负责处理用户的输入和业务逻辑的处理。在微信小程序中，控制器通常是由wxs（微信小程序页面的脚本）编写的，可以监听用户的交互事件，获取用户的输入，并根据业务逻辑进行相应的处理。控制器也可以通过模型进行数据的获取和更新，然后将更新后的数据传递给视图进行展示。 通过MVC框架，微信小程序的开发者可以将应用程序的逻辑和展示分离开来，实现代码的复用和维护的便捷性。同时，MVC框架还可以提高代码的可读性和可扩展性，使开发者能够更加高效地开发和维护微信小程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值