首页 技术社区 C++ 正文

C# 实战：Layui 风格 Web 界面开发 + WinForm 模拟 Web UI 完整实例

C++
在.NET 开发场景中，Layui 凭借极简、轻量、易用的前端特性，成为后台管理系统、工具型应用的首选 UI 框架；而 WinForm 作为传统桌面开发技术，通过模拟 Web UI 风格，既能保留桌面程序的本地操作优势，又能实现现代化视觉效果，兼顾实用性与美观性。
本文将通过可直接运行的源码实例，分别讲解 C# Web 端 Layui 风格界面开发、WinForm 模拟 Layui Web UI 两种实现方案，覆盖前端渲染、后端交互、桌面端 UI 适配全流程，适合.NET 初学者和项目实战参考。

一、技术选型说明

  1. Web 端：C# ASP.NET MVC + Layui 2.9.1（轻量前端框架，无需依赖 Node.js，开箱即用）
  2. 桌面端：C# WinForm (.NET Framework 4.8) + 自定义控件渲染 Layui 样式
  3. 核心目标：实现统一的 Layui 视觉风格，Web 端侧重网页交互，WinForm 端侧重桌面体验

二、C# Web 端 Layui 风格界面开发实例

Web 端核心思路：ASP.NET MVC 搭建后端服务，Layui 实现前端表格、表单、弹窗等组件，前后端通过 Json 交互，无需复杂配置，直接集成使用。

1. 项目搭建步骤

  1. 新建ASP.NET Web应用程序（.NET Framework），选择 MVC 模板
  2. 下载 Layui 官方资源包，将layui.css、layui.js复制到项目Content、Scripts目录
  3. 配置视图共享布局，引入 Layui 静态资源

2. 核心源码实现

（1）共享布局页（_Layout.cshtml）

统一引入 Layui 资源，所有页面自动继承样式：
html
预览
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Layui管理系统</title>
    <!-- 引入Layui样式 -->
    <link href="~/Content/layui/css/layui.css" rel="external nofollow"  rel="stylesheet" />
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航 -->
        <div class="layui-header">
            <div class="layui-logo">C# Layui管理系统</div>
        </div>
        <!-- 左侧菜单 -->
        <div class="layui-side">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item"><a href="~/Home/Index" rel="external nofollow" >首页</a></li>
                <li class="layui-nav-item"><a href="~/Home/UserList" rel="external nofollow" >用户管理</a></li>
            </ul>
        </div>
        <!-- 内容区域 -->
        <div class="layui-body">@RenderBody()</div>
    </div>
    <!-- 引入Layui核心JS -->
    <script src="~/Scripts/layui/layui.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

（2）用户列表页面（UserList.cshtml）

实现 Layui 数据表格、搜索框、新增 / 删除按钮，支持分页、查询：
html
预览
@{
    ViewBag.Title = "用户管理";
}

<div class="layui-card">
    <div class="layui-card-header">用户列表</div>
    <div class="layui-card-body">
        <!-- 搜索栏 -->
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" id="searchName" placeholder="请输入用户名" class="layui-input">
            </div>
            <button class="layui-btn" id="searchBtn">搜索</button>
            <button class="layui-btn layui-btn-normal" id="addBtn">新增用户</button>
        </div>

        <!-- 数据表格 -->
        <table id="userTable" lay-filter="userTable"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="operateBar">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
</script>

@section scripts{
<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;

        // 渲染表格
        table.render({
            elem: '#userTable',
            url: '/Home/GetUserList', // 后端数据接口
            page: true, // 开启分页
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'Id', title: '用户ID', width: 80 },
                { field: 'UserName', title: '用户名', width: 150 },
                { field: 'Age', title: '年龄', width: 100 },
                { field: 'Phone', title: '手机号', width: 150 },
                { title: '操作', toolbar: '#operateBar', width: 180 }
            ]]
        });

        // 搜索事件
        document.getElementById('searchBtn').onclick = function () {
            table.reload('userTable', {
                where: { userName: document.getElementById('searchName').value }
            });
        };
    });
</script>
}

（3）后端控制器（HomeController.cs）

提供数据接口，返回 Layui 表格需要的 Json 格式数据：
csharp
运行
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace LayuiWebDemo.Controllers
{
    public class UserInfo
    {
        public int Id { get; set; }
        public string UserName { get; set; }
        public int Age { get; set; }
        public string Phone { get; set; }
    }

    public class HomeController : Controller
    {
        // 模拟数据
        private static List<UserInfo> userList = new List<UserInfo>()
        {
            new UserInfo{ Id=1, UserName="张三", Age=25, Phone="13800138000" },
            new UserInfo{ Id=2, UserName="李四", Age=28, Phone="13900139000" }
        };

        // 用户列表页面
        public ActionResult UserList()
        {
            return View();
        }

        // Layui表格数据接口
        public ActionResult GetUserList(string userName, int page = 1, int limit = 10)
        {
            // 条件筛选
            var list = userList;
            if (!string.IsNullOrEmpty(userName))
            {
                list = list.Where(u => u.UserName.Contains(userName)).ToList();
            }
            // 分页处理
            var data = list.Skip((page - 1) * limit).Take(limit).ToList();
            // 返回Layui要求的格式
            return Json(new
            {
                code = 0,
                msg = "查询成功",
                count = list.Count,
                data = data
            }, JsonRequestBehavior.AllowGet);
        }
    }
}

3. Web 端效果展示

运行项目后，自动呈现 Layui 经典管理系统布局：顶部导航 + 左侧菜单 + 右侧内容区，表格支持分页、搜索、复选框、操作按钮，样式极简美观，交互流畅。

三、C# WinForm 模拟 Layui Web UI 实例

WinForm 本身不支持 Web 样式，通过自定义控件 + 颜色 / 布局适配，完美模拟 Layui 的卡片、按钮、表格、表单风格，实现桌面端 Web UI 效果，无需嵌入浏览器控件，轻量高效。

1. 核心实现思路

  1. 用Panel模拟 Layui 卡片（layui-card），设置圆角、边框、背景色
  2. 用Button模拟 Layui 三种主题按钮（默认 / 主要 / 危险）
  3. 用DataGridView模拟 Layui 数据表格，适配表头样式、行样式
  4. 用TextBox模拟 Layui 输入框，统一边框、内边距

2. 核心源码实现

（1）Layui 样式工具类（LayuiStyleHelper.cs）

统一封装样式，方便全局调用：
csharp
运行
using System.Drawing;
using System.Windows.Forms;

namespace LayuiWinFormDemo
{
    public static class LayuiStyleHelper
    {
        // Layui主色调
        public static readonly Color PrimaryColor = Color.FromArgb(0, 150, 136);
        // 危险按钮颜色
        public static readonly Color DangerColor = Color.FromArgb(255, 87, 34);
        // 卡片背景色
        public static readonly Color CardBgColor = Color.White;
        // 卡片边框色
        public static readonly Color CardBorderColor = Color.FromArgb(230, 230, 230);

        /// <summary>
        /// 设置Layui卡片样式
        /// </summary>
        public static void SetCardStyle(Panel panel)
        {
            panel.BackColor = CardBgColor;
            panel.BorderStyle = BorderStyle.FixedSingle;
            panel.Padding = new Padding(15);
            panel.Margin = new Padding(10);
        }

        /// <summary>
        /// 设置Layui主要按钮
        /// </summary>
        public static void SetPrimaryButton(Button btn)
        {
            btn.BackColor = PrimaryColor;
            btn.ForeColor = Color.White;
            btn.FlatStyle = FlatStyle.Flat;
            btn.FlatAppearance.BorderSize = 0;
            btn.Padding = new Padding(10);
        }

        /// <summary>
        /// 设置Layui危险按钮
        /// </summary>
        public static void SetDangerButton(Button btn)
        {
            btn.BackColor = DangerColor;
            btn.ForeColor = Color.White;
            btn.FlatStyle = FlatStyle.Flat;
            btn.FlatAppearance.BorderSize = 0;
        }

        /// <summary>
        /// 设置Layui输入框样式
        /// </summary>
        public static void SetInputStyle(TextBox txt)
        {
            txt.BorderStyle = BorderStyle.FixedSingle;
            txt.Padding = new Padding(5);
            txt.Font = new Font("微软雅黑", 9);
        }
    }
}

（2）主窗体设计（MainForm.cs）

模拟 Layui 用户管理页面，包含搜索框、按钮、表格、卡片：
csharp
运行
using System.Collections.Generic;
using System.Windows.Forms;

namespace LayuiWinFormDemo
{
    public partial class MainForm : Form
    {
        // 模拟用户数据
        private List<UserInfo> userList = new List<UserInfo>()
        {
            new UserInfo{ Id=1, UserName="张三", Age=25, Phone="13800138000" },
            new UserInfo{ Id=2, UserName="李四", Age=28, Phone="13900139000" }
        };

        public MainForm()
        {
            InitializeComponent();
            // 初始化样式
            InitLayuiStyle();
            // 绑定数据
            BindDataGrid();
        }

        /// <summary>
        /// 初始化Layui样式
        /// </summary>
        private void InitLayuiStyle()
        {
            this.Text = "WinForm模拟Layui管理系统";
            this.Size = new Size(800, 500);
            this.StartPosition = FormStartPosition.CenterScreen;

            // 设置卡片
            LayuiStyleHelper.SetCardStyle(panelCard);
            // 设置按钮
            LayuiStyleHelper.SetPrimaryButton(btnSearch);
            LayuiStyleHelper.SetPrimaryButton(btnAdd);
            LayuiStyleHelper.SetDangerButton(btnDelete);
            // 设置输入框
            LayuiStyleHelper.SetInputStyle(txtSearch);
        }

        /// <summary>
        /// 绑定表格数据
        /// </summary>
        private void BindDataGrid()
        {
            dataGridView1.DataSource = null;
            dataGridView1.DataSource = userList;
            // 表格样式适配Layui
            dataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;
            dataGridView1.RowHeadersVisible = false;
            dataGridView1.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
        }

        // 搜索按钮事件
        private void btnSearch_Click(object sender, System.EventArgs e)
        {
            var keyword = txtSearch.Text.Trim();
            var list = userList.FindAll(u => u.UserName.Contains(keyword));
            dataGridView1.DataSource = list;
        }
    }

    // 用户实体类
    public class UserInfo
    {
        public int Id { get; set; }
        public string UserName { get; set; }
        public int Age { get; set; }
        public string Phone { get; set; }
    }
}

3. WinForm 端效果展示

运行程序后，桌面窗体完全复刻 Layui Web 界面风格：卡片式布局、统一的按钮配色、简约输入框、表格样式，和 Web 端视觉效果高度一致，同时拥有桌面程序的本地操作权限。

四、两种方案对比与适用场景

表格
方案 优点 缺点 适用场景
Web 端 Layui 跨平台、无需安装客户端、易维护 依赖网络、本地操作能力弱 企业管理系统、多端访问的后台工具
WinForm 模拟 Layui 本地运行、操作流畅、权限高 仅支持 Windows、部署需安装 本地工具软件、桌面端管理系统

五、总结

本文通过完整源码，实现了C# Web 端 Layui 风格界面开发和WinForm 模拟 Layui Web UI两种方案：
  1. Web 端依托ASP.NET MVC+Layui，快速搭建现代化网页应用，开箱即用，适合 B/S 架构项目；
  2. WinForm 端通过样式封装，低成本实现 Web UI 视觉效果，保留桌面程序优势，适合 C/S 架构项目；
  3. 两套源码均为极简实现，无冗余依赖，可直接移植到实际项目中，快速完成 UI 开发。
无论是网页开发还是桌面开发，Layui 风格都能让应用界面更符合现代审美，降低用户学习成本，是.NET 开发者的实用技术方案。

源码使用说明

  1. Web 项目：直接用 Visual Studio 打开，还原 NuGet 包，替换 Layui 资源即可运行；
  2. WinForm 项目：新建.NET Framework 窗体项目，复制代码，拖拽对应控件（Panel、Button、TextBox、DataGridView）即可运行。
收藏 (0) 点赞 (0)

会员自媒体 C++ C# 实战：Layui 风格 Web 界面开发 + WinForm 模拟 Web UI 完整实例 https://yuelu1.cn/26262.html

上一篇： C++中#if、#ifdef、#ifndef的条件编译使用场景？
下一篇： C#绘制随机验证码，图形生成与干扰线添加，防止机器人注册

相关文章

猜你喜欢
热门文章
随机推荐
热门标签