ASP.NET MVC结合EasyUI做后台管理（一）用户登录实现

最新推荐文章于 2025-04-22 14:26:54 发布

木木狐工作室

最新推荐文章于 2025-04-22 14:26:54 发布

阅读量1.2k

点赞数 19

分类专栏： WEB开发文章标签： mvc easyui 前端

本文链接：https://blog.youkuaiyun.com/baggio_ryu/article/details/134920486

版权

本文介绍如何结合EasyUI前端框架和ASP.NET MVC实现后台管理系统，特别是用户登录功能的实现。通过VS创建MVC项目，利用EasyUI的组件设计登录页面，设置服务器端逻辑验证用户输入，展示登录效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.说明

vs开发工具中本身集成了bootstap和jqueryUI，但在使用上没有EasyUI来得方便，前后端的分离不是那么彻底。EasyUI为开发者准备了布局Layout、面板Pannel、选项卡Tabs、窗口Window、对话框Dialog、消息框Messager、数据网格Datagrid、树Tree等强大的前端利器，后台只要专心做好数据的逻辑处理，将结果返回给前端就可以。本文也是以一个学习交流的目的，希望能得到各位高手的指点和指正。

2.准备工作

a.VS中建立一个空的MVC项目（MVC4或以上都可以），下载EasyUI工具后解压缩，可以去掉里面的Demo文件夹及非中文包的JS文件，将其他内容拷贝至项目的Content目录下

b.在SSMS中新建一个数据库，放用户表Users及其他数据表，在Model中用EF框架生成模板（也可以使用传统三层、其他ORM框架等，这里只是为了方便演示）

c.在Controller中新建Login控制器，添加一个Login的Action，右键添加对应的View。

3.登录页面设计

a.在Login.cshtml的Head区加入EasyUI的相关引用

    <link href="~/Content/EasyUI/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="~/Content/EasyUI/jquery.min.js"></script>
    <script src="~/Content/EasyUI/jquery.easyui.min.js"></script>
    <script src="~/Content/EasyUI/locale/easyui-lang-zh_CN.js"></script>

也可以将这些css和js放入App_Start的bundleConfig.cs里面，在views文件夹中使用_layout.cshtml做一个公共的模板页，但这样要改变主题样式就费劲一点，另外EasyUI的jquery.min.js和jquery.easyui.min.js两个文件已经是压缩过的，放在bundleConfig.cs里不起作用，本例还是使用直接引用的方式。

b.在Body区用EasyUI的Window组件和Form组件做一个登录页面布局，因为比较简单，只要用户名、密码和验证码，使用了class+data-options做设置，当然也可以使