layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

点击左侧菜单栏只刷新局部,局部就用iframe。

首先先建layout页,建左侧菜单栏,然后下面的@RenderBody()

 
复制代码
 1 <div class="layui-side layui-bg-black">
 2    <div class="layui-side-scroll">
 3      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
 4      <ul class="layui-nav layui-nav-tree" lay-filter="test">
 5  
 6        <li class="layui-nav-item layui-nav-itemed Card">
 7          <a class="" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >名片审核</a>
 8        </li>
 9  
10        <li class="layui-nav-item Project">
11          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >项目审核</a>
12        </li>
13  
14        <li class="layui-nav-item Funds"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >需求审核</a></li>
15      </ul>
16    </div>
17 </div>
18 <div class="layui-body">
19   @RenderBody()
20   @RenderSection("scripts", required: false)
21 </div>
复制代码

然后在最后写上js用于点击跳转,上面的@RenderSection("scripts", required: false)和下面的#demoAdmin都在另一个页面中,也就是放iframe的页面

复制代码
 1  <script>
 2     //JavaScript代码区域
 3     layui.use('element', function () {
 4       var $ = layui.jquery
 5         , element = layui.element;     
 6     });
 7     $(".Card").click(function () {
 8       $("#demoAdmin").attr("src", "/Admin/CardManagement")
 9     });
10     $(".Project").click(function () {
11       $("#demoAdmin").attr("src", "/Admin/ProjectManagement")
12     });
13     $(".Funds").click(function () {
14       $("#demoAdmin").attr("src", "/Admin/FundsManagement")
15     });
16   </script>
复制代码

新建HomeController,新建Index页面

复制代码
 1 @{
 2   Layout = null;
 3   Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
 4 }
 5  
 6 <iframe src="/Admin/CardManagement" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;"></iframe>
 7  
 8  
 9 @section scripts{
10   <script>
11   reHeight();
12   $(window).resize(function () {
13     reHeight();
14   });
15   //设置iframe高度
16   function reHeight() {
17   var bodyHeight = $(window).height();
18   bodyHeight = bodyHeight - 107;
19   if (bodyHeight<400) {
20     bodyHeight = 400;
21   }
22   $("#demoAdmin").height(bodyHeight);
23   }
24   </script>
复制代码

引用一下上面的layout。

其他页面引用Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";

我把css和js引用都放在了另一个layout里,所以我需要引用一下,否则页面会乱。

posted @   每天进步多一点  阅读(6156)  评论(1编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示