ASP.NET Core MVC 是一个强大的后端框架，而 Layui 是一个流行的前端 UI 框架，两者的结合可以快速搭建出高质量的 Web 应用。本教程将带你一步步实现一个基于 ASP.NET Core MVC 和 Layui 的上左右结构模板。顶部展示 Logo 和用户信息，左侧为菜单栏，右侧为内容区域。通过这个教程，你将学习到如何在 ASP.NET Core MVC 项目中集成 Layui，如何构建清晰的页面结构，以及如何实现一些基本的交互功能。无论你是初学者还是有一定经验的开发者，这个教程都将为你提供实用的指导，帮助你快速掌握相关技能，提升开发效率。

1. 环境准备与项目创建

1.1 安装.NET Core SDK

在开始开发之前，需要确保已安装最新版本的.NET Core SDK。可以从.NET官网下载并安装。安装完成后，通过命令行运行dotnet --version来验证安装是否成功，确保版本号显示的是最新版本。

1.2 创建ASP.NET Core MVC项目

打开命令行工具，输入以下命令来创建一个新的ASP.NET Core MVC项目：

dotnet new mvc -n LayuiMvcDemo

这将创建一个名为LayuiMvcDemo的项目文件夹，并在其中生成一个默认的ASP.NET Core MVC项目结构。进入项目文件夹：

cd LayuiMvcDemo

然后运行以下命令启动项目：

dotnet run

此时，项目将运行在本地开发服务器上，默认访问地址为https://localhost:5001。打开浏览器访问该地址，可以看到默认的ASP.NET Core MVC项目的欢迎页面。

2. 引入Layui框架

2.1 添加Layui前端资源

在ASP.NET Core MVC项目中使用Layui，首先需要将Layui的前端资源文件添加到项目中。可以通过以下几种方式来完成：

  • 下载Layui资源文件：访问Layui的官网，在首页找到“下载”按钮，选择适合的版本进行下载。下载完成后，将解压后的文件夹中的css、js、images等文件夹复制到项目的wwwroot目录下。例如，将css文件夹放在wwwroot/css路径下，js文件夹放在wwwroot/js路径下，images文件夹放在wwwroot/images路径下。

  • 使用CDN链接：为了方便和减少本地文件的管理，也可以直接在HTML页面中通过CDN链接引入Layui的资源文件。在项目的Views/Shared/_Layout.cshtml文件的<head>标签中添加以下CDN链接：

    HTML

  • <!-- Layui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.7.4/dist/css/layui.css" media="all">
<!-- Layui JS -->
<script src="https://cdn.jsdelivr.net/npm/layui@2.7.4/dist/layui.js"></script>

    使用CDN链接时，无需手动下载和复制文件，但需要确保网络环境能够正常访问CDN服务器。

2.2 配置Layui路径

在添加了Layui的前端资源后，需要对项目的路径进行配置，以便正确加载Layui的资源文件。

  • 配置静态文件路径：在Startup.cs文件的Configure方法中，确保已经启用了静态文件服务。如果没有启用，需要添加以下代码：

  • app.UseStaticFiles();

    这样，项目就可以正确地访问wwwroot目录下的静态文件，包括Layui的资源文件。

  • 配置Layui模块路径：Layui的模块化功能需要正确配置模块路径才能正常使用。在HTML页面中，通过layui.config方法来配置模块路径。在Views/Shared/_Layout.cshtml文件的<script>标签中添加以下代码：

  • <script>
    layui.config({
        base: '/js/layui/' // 设置Layui模块的路径，根据实际路径进行调整
    });
</script>

    这里假设将Layui的js文件夹放在了wwwroot/js/layui路径下，根据实际的文件存放路径进行调整。通过配置模块路径，可以方便地使用Layui的模块功能，例如加载不同的组件和模块。

3. 构建上左右结构布局

3.1 创建顶部导航栏

在Views/Shared/_Layout.cshtml文件中，使用Layui的布局组件来创建顶部导航栏。顶部导航栏包括左边的Logo和右边的登录用户信息。

  • HTML代码：

  • <div class="layui-header">
    <div class="layui-logo">Logo</div>
    <div class="layui-user-info">
        <a href="javascript:;">登录用户</a>
        <a href="javascript:;">退出</a>
    </div>
</div>

  • CSS样式：通过Layui的样式类来设置导航栏的布局和样式。layui-header类用于定义顶部导航栏的容器样式，layui-logo类用于设置Logo的样式，layui-user-info类用于设置登录用户信息的样式。

  • 效果展示：顶部导航栏显示在页面的顶部，左边显示Logo，右边显示登录用户信息和退出链接。通过Layui的样式，导航栏具有简洁美观的外观，并且具有响应式布局的特点，能够适应不同屏幕尺寸的设备。

3.2 设计左侧菜单栏

左侧菜单栏包含一级菜单和二级菜单，用于导航不同的功能模块。

  • HTML代码：

  • <div class="layui-side">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item">
                <a href="javascript:;">一级菜单1</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">二级菜单1-1</a></dd>
                    <dd><a href="javascript:;">二级菜单1-2</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">一级菜单2</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">二级菜单2-1</a></dd>
                    <dd><a href="javascript:;">二级菜单2-2</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

  • JavaScript代码：使用Layui的导航组件来实现菜单的折叠和展开功能。

  • layui.use('element', function(){
    var element = layui.element;
});

  • 效果展示：左侧菜单栏显示在页面的左侧，一级菜单项可以通过点击展开或折叠二级菜单项。通过Layui的导航组件，菜单具有良好的交互效果，并且能够自动适应页面的高度，不会出现滚动条。

3.3 开发右侧内容区域

右侧内容区域是页面的主要内容展示区域，根据左侧菜单栏的选择来加载不同的内容。

  • HTML代码：

  • <div class="layui-body">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">内容1</li>
            <li>内容2</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <p>这里是内容1的具体信息</p>
            </div>
            <div class="layui-tab-item">
                <p>这里是内容2的具体信息</p>
            </div>
        </div>
    </div>
</div>

  • JavaScript代码：使用Layui的选项卡组件来实现右侧内容区域的切换功能。

  • layui.use('element', function(){
    var element = layui.element;
});

  • 效果展示：右侧内容区域显示在页面的右侧，根据左侧菜单栏的选择，通过选项卡组件来切换不同的内容页面。通过Layui的选项卡组件，内容区域具有简洁的切换效果，并且能够自动适应页面的宽度，不会出现滚动条。

4. 实现顶部功能模块

4.1 添加Logo展示

在顶部导航栏中添加Logo展示，需要对HTML代码进行调整，并确保Logo图片能够正确显示。

  • HTML代码调整：

  • <div class="layui-header">
    <div class="layui-logo">
        <img src="~/images/logo.png" alt="Logo" style="height: 30px;">
    </div>
    <div class="layui-user-info">
        <a href="javascript:;">登录用户</a>
        <a href="javascript:;">退出</a>
    </div>
</div>

    这里假设将Logo图片放在了wwwroot/images目录下，文件名为logo.png。通过<img>标签引入Logo图片，并设置图片的高度为30px，以适应导航栏的高度。

  • 效果展示：Logo图片显示在顶部导航栏的左侧，与导航栏的样式融为一体，增强了页面的品牌识别度。

4.2 集成用户信息显示

在顶部导航栏的右侧集成用户信息显示，包括用户头像、用户名和退出功能。

  • HTML代码调整：

  • <div class="layui-header">
    <div class="layui-logo">
        <img src="~/images/logo.png" alt="Logo" style="height: 30px;">
    </div>
    <div class="layui-user-info">
        <a href="javascript:;">
            <img src="~/images/user.jpg" class="layui-nav-img">
            用户名
        </a>
        <a href="javascript:;">退出</a>
    </div>
</div>

    这里假设将用户头像图片放在了wwwroot/images目录下，文件名为user.jpg。通过<img>标签引入用户头像，并使用layui-nav-img类来设置头像的样式。用户名显示在头像旁边，退出链接位于用户信息的右侧。

  • CSS样式调整：通过Layui的样式类layui-nav-img来设置用户头像的样式，使其显示为圆形头像，并且与导航栏的布局相匹配。

  • 效果展示：用户信息显示在顶部导航栏的右侧，用户头像和用户名清晰可见，退出链接方便用户操作。通过Layui的样式，用户信息区域具有简洁美观的外观，并且具有响应式布局的特点，能够适应不同屏幕尺寸的设备。

5. 开发左侧菜单系统

5.1 构造一级菜单

在左侧菜单栏中，一级菜单是用户进行功能导航的主要入口。构造一级菜单需要合理规划菜单项的内容和结构，使其能够清晰地展示各个功能模块。

  • HTML代码：

  • <div class="layui-side">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item">
                <a href="javascript:;">系统管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">用户管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">订单管理</a>
            </li>
        </ul>
    </div>
</div>

    在这段代码中，<ul class="layui-nav layui-nav-tree">定义了一个树形导航菜单的容器，<li class="layui-nav-item">表示一个菜单项，<a href="javascript:;">是菜单项的链接部分，其中javascript:;表示点击时不进行页面跳转，方便后续实现菜单的交互功能。

  • 效果展示：左侧菜单栏显示在页面的左侧，一级菜单项垂直排列，每个菜单项的文本清晰可见。通过Layui的样式类layui-nav和layui-nav-tree，菜单具有简洁的外观，并且能够自动适应页面的高度，不会出现滚动条。

5.2 实现二级菜单折叠展开

二级菜单是对一级菜单功能的进一步细化，实现二级菜单的折叠展开功能可以提高菜单的交互性和用户体验。

  • HTML代码：

  • <div class="layui-side">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item">
                <a href="javascript:;">系统管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">系统设置</a></dd>
                    <dd><a href="javascript:;">日志管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">用户管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">用户列表</a></dd>
                    <dd><a href="javascript:;">用户权限</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">订单管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">订单列表</a></dd>
                    <dd><a href="javascript:;">订单状态</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

    在这段代码中，<dl class="layui-nav-child">定义了一个二级菜单的容器，<dd>表示一个二级菜单项，<a href="javascript:;">是二级菜单项的链接部分。通过在一级菜单项中嵌套<dl>标签，实现了二级菜单的结构。

  • JavaScript代码：使用Layui的导航组件来实现二级菜单的折叠展开功能。

  • layui.use('element', function(){
    var element = layui.element;
});

    在这段代码中，layui.use('element', function(){...})用于加载Layui的element模块，element模块提供了导航组件的功能，包括二级菜单的折叠展开效果。通过调用element模块，可以自动实现二级菜单的交互功能，无需手动编写复杂的JavaScript代码。

  • 效果展示：当用户点击一级菜单项时，二级菜单会自动展开或折叠，展示或隐藏对应的二级菜单项。通过Layui的导航组件，二级菜单具有流畅的动画效果，增强了用户的交互体验。同时，二级菜单项的文本清晰可见，方便用户快速找到所需的功能。

6. 动态加载右侧内容

6.1 配置路由与控制器

为了实现右侧内容的动态加载，需要配置合适的路由和控制器来处理请求并返回相应的数据。

  • 配置路由：在Startup.cs文件的Configure方法中，确保已经配置了默认的路由规则。如果没有配置，可以添加以下代码：

  • app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

    这样，项目就可以根据请求的URL来匹配相应的控制器和操作。

  • 创建控制器：在Controllers文件夹中创建一个新的控制器ContentController，用于处理右侧内容的请求。例如：

  • using Microsoft.AspNetCore.Mvc;

namespace LayuiMvcDemo.Controllers
{
    public class ContentController : Controller
    {
        public IActionResult GetContent(string menuId)
        {
            // 根据menuId返回对应的内容
            string content = "这里是菜单ID为" + menuId + "的内容";
            return Content(content);
        }
    }
}

    在这个控制器中，GetContent方法接收一个menuId参数，根据这个参数返回对应的内容。这里只是一个简单的示例，实际项目中可以根据需要从数据库或其他数据源获取内容。

6.2 使用Ajax请求数据

在左侧菜单栏中，通过点击菜单项触发Ajax请求，从服务器获取对应的内容并动态加载到右侧内容区域。

  • HTML代码调整：在左侧菜单栏的HTML代码中，为每个菜单项添加onclick事件，用于触发Ajax请求。例如：

  • <div class="layui-side">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item">
                <a href="javascript:;" onclick="loadContent('1')">系统管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="loadContent('1-1')">系统设置</a></dd>
                    <dd><a href="javascript:;" onclick="loadContent('1-2')">日志管理</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" onclick="loadContent('2')">用户管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="loadContent('2-1')">用户列表</a></dd>
                    <dd><a href="javascript:;" onclick="loadContent('2-2')">用户权限</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" onclick="loadContent('3')">订单管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="loadContent('3-1')">订单列表</a></dd>
                    <dd><a href="javascript:;" onclick="loadContent('3-2')">订单状态</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

    在这段代码中，为每个菜单项的<a>标签添加了onclick事件，调用loadContent函数，并将菜单项的ID作为参数传递。

  • JavaScript代码：在Views/Shared/_Layout.cshtml文件中添加loadContent函数，使用Ajax请求从服务器获取内容并加载到右侧内容区域。例如：

  • <script>
    function loadContent(menuId) {
        $.ajax({
            url: '/Content/GetContent',
            type: 'GET',
            data: { menuId: menuId },
            success: function (data) {
                $('.layui-body .layui-tab-item').html(data);
            },
            error: function (xhr, status, error) {
                $('.layui-body .layui-tab-item').html('加载失败');
            }
        });
    }
</script>

    在这段代码中，$.ajax方法用于发送Ajax请求。请求的URL是/Content/GetContent，请求方式是GET，并将menuId作为参数传递。请求成功时，将返回的数据加载到右侧内容区域的<div class="layui-tab-item">中；请求失败时，显示“加载失败”的提示信息。

  • 效果展示：当用户点击左侧菜单栏中的菜单项时，会触发Ajax请求，从服务器获取对应的内容，并动态加载到右侧内容区域。通过这种方式，用户可以在不刷新页面的情况下切换不同的内容，提高了用户体验。

7. 样式优化与交互完善

7.1 自定义样式调整

在使用Layui构建的上左右结构模板中，虽然Layui自带的样式已经能够满足基本的布局和外观需求，但为了更好地符合项目的具体风格和提升用户体验，通常需要进行一些自定义样式的调整。自定义样式可以通过覆盖Layui的默认样式或添加新的样式规则来实现。

  • 调整顶部导航栏样式：顶部导航栏的背景颜色、字体颜色、Logo大小和用户信息区域的样式都可以根据项目需求进行调整。例如，可以通过添加自定义的CSS类来改变导航栏的背景颜色和字体颜色，使它与网站的整体风格更加协调。

  • .layui-header {
    background-color: #393D49; /* 自定义背景颜色 */
    color: #FFFFFF; /* 自定义字体颜色 */
}
.layui-logo img {
    height: 40px; /* 调整Logo大小 */
}
.layui-user-info a {
    color: #FFFFFF; /* 调整用户信息链接颜色 */
}

  • 优化左侧菜单栏样式：左侧菜单栏的宽度、背景颜色、菜单项的字体大小和颜色等都可以进行自定义。例如，可以增加菜单项的字体大小，使其更加清晰易读。

  • .layui-side {
    width: 200px; /* 自定义左侧菜单栏宽度 */
    background-color: #2F4056; /* 自定义背景颜色 */
}
.layui-nav-item a {
    font-size: 16px; /* 调整菜单项字体大小 */
    color: #FFFFFF; /* 调整菜单项字体颜色 */
}

  • 美化右侧内容区域样式：右侧内容区域的背景颜色、字体大小、边距等都可以根据需要进行调整，以提升内容的可读性和美观性。

  • .layui-body {
    background-color: #FFFFFF; /* 自定义背景颜色 */
    font-size: 14px; /* 调整字体大小 */
    padding: 15px; /* 增加边距 */
}

通过这些自定义样式的调整，可以使整个页面的布局更加美观，符合项目的品牌形象和用户界面设计要求。

7.2 添加交互效果

为了进一步提升用户体验，可以在页面中添加一些交互效果，使页面更加生动和友好。

  • 顶部导航栏的交互效果：可以为顶部导航栏的用户信息区域添加鼠标悬停效果，例如显示一个下拉菜单，包含用户的基本信息、设置选项和退出功能。

  • $('.layui-user-info a').hover(function() {
    // 显示下拉菜单
    $('.layui-user-info .layui-nav-child').show();
}, function() {
    // 隐藏下拉菜单
    $('.layui-user-info .layui-nav-child').hide();
});

  • 左侧菜单栏的交互效果：除了Layui自带的折叠展开功能外，还可以为菜单项添加鼠标悬停时的背景颜色变化效果，以增强菜单的交互性。

  • $('.layui-nav-item a').hover(function() {
    $(this).parent().addClass('layui-nav-itemed');
}, function() {
    $(this).parent().removeClass('layui-nav-itemed');
});

  • 右侧内容区域的交互效果：可以为右侧内容区域的选项卡添加切换动画效果，使内容的切换更加平滑自然。

  • layui.use('element', function(){
    var element = layui.element;
    element.tab({
        layfilter: 'demoTab', // 对应的选项卡 lay-filter 所在的值
        tabChange: function(index, layid){
            console.log(index); // 获取当前点击的选项卡索引
            console.log(layid); // 获取当前点击的选项卡 lay-id 对应的值
        }
    });
});

通过这些交互效果的添加，可以使页面的操作更加流畅和直观，提升用户的使用体验，使整个上左右结构的模板更加完善和实用。

 

# asp.net # mvc # layui # c#
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区