讲师中心 微信公众号

扫码关注官方订阅号

注册 / 登录
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置:首页 > 后端开发 > C#.Net教程 >

正文

0

0

详细介绍关于ASP.NET MVC Admin主页的快速构建

黄舟

黄舟

发布时间:2017-05-28 10:11:25

|

1860人浏览过

|

来源于php中文网

原创

这篇文章主要为大家详细介绍了asp.net mvc admin主页快速构建的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

后台开发人员一般不喜欢调样式,搞半天样式出不来,还要考虑各种浏览器兼容,费心费力不讨好,还好互联网时代有大量的资源共享,避免我们从零开始,现在就来看怎么快速构建一个ASP.NETMVC后台管理admin主页的方法,先看一看最终的效果!

第一步:选择一个admin模板

  互联网时代就是资源共享的时代,网上各种前端模板,这里主要是说明怎么把模板整合到我们的ASP.NETMVC项目中,至于模板大家可以自己去选择喜欢的,这里我们选择这个清爽版的AircraftAdmin,首先看看AircraftAdmin的效果。

第二步:精简模板

  通常下载一个模板后打开会发现,里面混杂了大量的css样式js插件,有很多是我们不需要的,直接应用到项目中并不方便,怎么办呢,我的经验就是,删删删,没错,下载模板后打开,把不需要的html,css,js一步一步干掉。

1.删除不需要的html元素

  用vs来开一个页面,分析整体布局,再分步删除,如下图,顶部和左侧的菜单栏我们需要保留,主内容区不需要的html删除。

2.精简css文件

  通过分析,一共引用了四个css文件,bootstrap.css(bootstrap样式),font-awesome.css(图标字体),theme.css(主题),premium.css(未知),把最后一个删除,刷新后正常,因此保留三个css文件。

3.精简js文件

  同步骤2一样,把一些不需要的js删除,如果你对js不是很熟悉或者不清楚页面中的某些js作用,可以暂时先保留这些js,通过删除一个再刷新看效果确认某个js作用。

魔众商城系统
魔众商城系统

魔众商城系统是一个在线B2C商城系统,支持购物车、商品多分类,可以帮您快速搭建一套企业私有化的商城系统。 魔众商城系统,简约不简单的在线商城系统。 魔众商城系统是一个全面、高效且简约的B2C电商解决方案,专为希望在线上拓展业务、提升客户体验的企业和个人设计。以下是关于魔众商城系统的详细介绍: 商品管理:系统支持轻松上传商品信息、设置价格、库存等参数,并通过精美的商品详情页

下载

经过上面几步,页面文件和引用文件已经大大减少了,基本文档我们也清晰了。下一步将整合到MVC项目中。

第三步:整合相关文件

1.下面我们开始分析文档结构,建立MVC项目,整合相关文件。整个文档我们分为三块,头部工具信息栏,左侧菜单栏、主体内容区,头部和左侧相对来说是不变的,而且每个页面都公用的部分,把它们提取出来,做为MVC项目中的分部视图_TopBarPartial.cshtml和_MenuPartial.cshtml添加进去。这里我对_MenuPartial.cshtml进行了简化,只留下几个示例菜单,主体底部区也作为一个公共分部视图_FooterPartial.cshtml,可以在此添加你的公司和版权信息。

_TopBarPartial.cshtml

Aircraft

  • Jack Smith
    • My Account
    • Admin Panel
    • Users
    • Security
    • Payments
    • Logout

_MenuPartial.cshtml

  • Account +3
    • Sign In
    • Sign Up
    • Reset Password
  • Legal
    • Privacy Policy
    • Terms and Conditions
  • Help
  • Faq

_FooterPartial.cshtml



A Free Bootstrap Theme by Portnine

© 2014 Portnine

2.通过NUGET安装font-awesome字体图标,font-awesome是一个优秀的字体图标库,想了解更多的请参考官网 http://fontawesome.dashgame.com/ 。

3.在项目的BundleConfig文件中,把相关的css和js文件添加进去。


// 有关绑定的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
   "~/Scripts/jquery-{version}.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
   "~/Scripts/jquery.validate*"));

  // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
  // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
   "~/Scripts/modernizr-*"));

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
   "~/Scripts/bootstrap.js",
   "~/Scripts/respond.js"));

  bundles.Add(new StyleBundle("~/Content/css").Include(
   "~/Content/bootstrap.css",
   "~/Content/site.css" ,
   "~/Content/theme.css", 
   "~/Content/css/font-awesome.min.css"
   ));
 }

4.添加LayoutAdmin母版页并修改Index首页内容,将Index母版页指向LayoutAdmin


@{
 Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
 ViewBag.Title = "Home Page"; 
}

Help

  • Home
  • Help

@Html.Partial("_FooterPartial")

  这样,通过简单的几步就搭好了一个简洁大方的ASP.NETMVC后台管理模板页,半个小时就搞定了,怎么样,效率很高吧!这里我顺便把里面的主题样式加到首页顶部菜单,通过简单切换即可选择顶部样式,大家也可以在theme.css里面扩展你的主题。

相关文章

Dapper怎么结合依赖注入使用 Dapper在ASP.NET Core中DI配置

ASP.NET Core怎么实现输出缓存 Output Caching配置方法

c# 使用 async/await 时,HttpContext 为何会为空

c# Task.ConfigureAwait(false).GetAwaiter().GetResult() 是安全的吗

c# GetAwaiter().GetResult() 和 .Result 和 await 的区别

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

上一篇:关于C#中三个关键字params,Ref,out的详细介绍 下一篇:ASP.NET使用Ajax如何返回Json对象的方法具体介绍

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结(新手入门必备)

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

即梦AI

一站式AI创作平台,免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板
  • [表单按钮]jQuery添加删除表单元素代码
  • [文字特效]一串文字跳动css3动画特效
  • [图片特效]jQuery按钮控制图片左右滚动代码
  • [表单按钮]jQuery手机端左右滑动切换表单代码
  • [图片特效]jquery鼠标滑动按钮图片切换
  • [表单按钮]jQuery拖动设置时间段表单提交
  • [图片特效]jquery折纸变换效果
  • [文字特效]炫酷文字抖动动画网页特效
  • [文字特效]HTML5 SVG动态图片文字特效
  • [图片特效]js+html5实现图片倒影效果代码
  • [其它模板]思翔企(事)业单位文件柜 build 20080313
  • [企业站源码]雅龙智能装备工业设备类WordPress主题1.0
  • [电商源码]威发卡自动发卡系统
  • [电商源码]卡密分发系统
  • [电商源码]中华陶瓷网
  • [电商源码]简洁粉色食品公司网站
  • [电商源码]极速网店系统
  • [电商源码]淘宝妈妈_淘客推广系统
  • [电商源码]积客B2SCMS商城系统
  • [电商源码]CODEC2I 众筹系统
  • [网站素材]扁平海边沙滩旅游风景矢量插画
  • [网站素材]超市购物特价产品宣传主图PSD素材下载
  • [网站素材]现代几何抽象飞鸟装饰矢量素材
  • [网站素材]极简线条玉兰花卉插画矢量素材
  • [网站素材]手绘烹饪调料香料合集矢量素材
  • [网站素材]惬意午后咖啡阅读时光矢量插画
  • [网站素材]中国宏伟古建筑矢量素材
  • [网站素材]黑色星期五耳机折扣横幅设计下载
  • [网站素材]国潮风莲花荷塘插画矢量素材
  • [网站素材]假日快乐烟花背景ps素材下载
  • [前端模板]驾照考试驾校HTML5网站模板
  • [前端模板]驾照培训服务机构宣传网站模板
  • [前端模板]HTML5房地产公司宣传网站模板
  • [前端模板]新鲜有机肉类宣传网站模板
  • [前端模板]响应式天气预报宣传网站模板
  • [前端模板]房屋建筑维修公司网站CSS模板
  • [前端模板]响应式志愿者服务网站模板
  • [前端模板]创意T恤打印店网站HTML5模板
  • [前端模板]网页开发岗位简历作品展示网页模板
  • [前端模板]响应式人力资源机构宣传网站模板

相关下载

更多
魔众商城系统

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ASP.NET参考手册
ASP.NET参考手册

共0课时 | 0人学习

传播智客ASP.NET中级系列视频教程
传播智客ASP.NET中级系列视频教程

共33课时 | 6.3万人学习

传播智客ASP.NET高级系列视频教程
传播智客ASP.NET高级系列视频教程

共34课时 | 6.2万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 7.3万人学习

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

共79课时 | 151.2万人学习

phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 53.4万人学习

最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 1.6万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 7.3万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

最新文章

更多
EF Core Any()和All()怎么用 EF Core中的存在与全量判断
C# MAUI怎么解析JSON数据 MAUI JSON序列化教程
c# DbContext 是不是线程安全的 DbContext的生命周期
c# SignalR 的扩展性和横向扩展(Scale-Out)方案 Redis Backplane
Blazor 怎么优雅地处理空数据状态
C# 正则表达式(Regex)入门 - 常用模式与匹配方法详解
C#如何进行代码覆盖率测试 Visual Studio代码覆盖率工具用法
c# .NET的GC模式(Server/Workstation)对高并发的影响
c# Lazy<T> 的用法 c#延迟初始化和线程安全
c# gprc入门教程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号

微信扫码
关注PHP中文网服务号

技术交流群

QQ扫码
加入技术交流群

PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部