尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案

P.NET MVC]Contact Manager开发之旅之迭代2 - 修改样式，美化应用

发布时间：2026/11/6 2:05:59来源：尧图网络资讯中心
首页/资讯中心/文章详情
P.NET MVC]Contact Manager开发之旅之迭代2 - 修改样式，美化应用
次迭代本次迭代的目标是改善Contact Manager应用程序的表现。Contact Manager当前使用的是ASP.NET MVC默认的母板视图和CSS(图1)。虽然并不难看可我不也并不希望我们的Contact Manager看起还和其他的ASP.NET MVC站点都一个模子刻出来的。我希望自定义这些文件。图1在这次迭代的过程中我们将我将从两个途径着手从而改善我们应用程序的页面设计。首先我将示意如何通过ASP.NET MVC Design gallery下载免费的ASP.NET MVC设计模板。ASP.NET MVC Design gallery得以让你不费力气的建立专业的web应用程序页面表现。我原本并未决定为Contact Manager应用程序套用ASP.NET MVC Design gallery中提供的模板因为我手中有一个出自专业设计公司的页面设计方案。所以在第二部分中我将说明我是如何与设计公司合作并建立最终的ASP.NET MVC设计的。ASP.NET MVC Design GalleryASP.NET MVC Design Gallery是微软提供的一项免费资源。你可以通过如下网址访问。http://www.ASP.net/mvc/galleryASP.NET MVC Design Gallery中收集了大量为ASP.NET MVC项目量身定做的免费的网站设计。而这些设计都是社区中的爱好者贡献的。大家可以为你欣赏的设计投上一票。图2图2我写这篇文章时gallery中最受欢迎的设计是来自David Hauser的叫做October的模板。你可以同过以下步骤将这个模板与你的ASP.NET MVC项目完全结合。点击Download按钮下载October.zip文件至你的计算机上。右击下载的October.zip文件选择解压缩。将文件解压缩到October文件夹中。图3选择October文件夹下的子文件夹DesignTemplate内的所有文件点击鼠标右键选择复制。在VS解决方案资源管理器窗口中右击ContactManager项目节点并将上一步复制的文件粘贴进来。图4选择VS菜单中的编辑-查找和替换-快速查找。将[YourProjectName]替换成ContactManager。图5图3图4图5完成以上的步骤后你的web应用程序就换装成功了。看看效果图6图6自定义ASP.NET MVC页面设计ASP.NET MVC Design Gallery为改善ASP.NET MVC应用程序页面设计提供的众多模板着实的方便你的选择而且节省了很多力气。当然其最大的优点就是免费—完全免费。不过你可能需要为你的站点提供独立的设计方案。那么也许你会与建站方面的设计公司进行合作我也是如此。我将迭代1中的Contact Manager打包并发送给设计公司。他们那可没有VS不过那也不是什么问题。他们可以在http://www.ASP.net免费下载Microsoft Visual Web Developer从而打开我发过去的Contact Manager项目解决方案。几天后他们已经将页面设计成如图7所示的样子。图7新的设计主要由两个文件组成一个新的CSS文件和一个新的母板页视图文件。母板页包含页面的布局及ASP.NET MVC的view可复用的内容。例如母板页包括页头、导航标签、页脚图7。于是我将Views\Shared文件夹中的Site.Master用这个新的从设计公司拿到的Site.Master文件覆盖掉。设计公司还创建了一个新的CSS文件和一些图片。同样的我将老的CSS文件用这个新的Site.css替换掉并把那些文件都放在了Content文件夹下。需注意新的Contact Manager页面设计方案中为编辑设新增联系人这两个链接增加了小图片。表格中每行前面的链接将被这些图片所替换。原本这两个链接是像这样使用HTML.ActionLink()方法生成的td % Html.ActionLink(Edit, Edit, new { iditem.Id }) % | % Html.ActionLink(Delete,Delete,new { iditem.Id }) % /tdHtml.ActionLink()方法并不支持图片链接出于安全考虑。改方法将链接中方的HTML文本都进行了encode。因此我在这里用Url.Action()代替了Html.ActionLink()方法像这样td classactions edit a href% Url.Action(Edit, new {iditem.Id}) % img srchttp://www.cnblogs.com/Content/Edit.png altEdit //a /td td classactions delete a href% Url.Action(Delete, new {iditem.Id}) % img srchttp://www.cnblogs.com/Content/Delete.png altDelete //a /tdHTML.ActionLink()方法程呈现一个具体的HTML超链接而Url.Action()方法只呈现不带a标签的URL。此外新的设计中包含选中以及非选中标签的样式。如图8中Create New Contact标签是选中状态而My Contacts标签则处于非选中状态。图8为了方便呈现选中及非选中标签我新建了一个叫做MenuItemHelper的自定义HTML helper。这个helper方法根据当前controller、action中是否符合特定的名称而呈现li或li class”selected”标签。MenuItemHelper的代码如下using System; using System.Text; using System.Web.Mvc; using System.Web.Mvc.Html; namespace ContactManager { /// summary /// This helper method renders a link within an HTML LI tag. /// A classselected attribute is added to the tag when /// the link being rendered corresponds to the current /// controller and action. /// /// This helper method is used in the Site.Master View /// Master Page to display the website menu. /// /summary public static class MenuItemHelper { public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName) { string currentControllerName (string)helper.ViewContext.RouteData.Values[controller]; string currentActionName (string)helper.ViewContext.RouteData.Values[action]; var sb new StringBuilder(); if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)) sb.Append(li class\selected\); else sb.Append(li); sb.Append(helper.ActionLink(linkText, actionName, controllerName)); sb.Append(/li); return sb.ToString(); } } }MenuItemHelper方法使用TagBuilder类创建li标签。任何时候你想创建一个新HTML标签TagBuilder类都将十分有用。它封装了添加属性、添加样式、生成Id和修改标签内部HTML的诸多方法。总结在本次迭代中我们改进了ASP.NET MVC应用程序的页面设计。首先介绍了ASP.NET MVC Design Gallery从而你学会了如何从ASP.NET MVC Design Gallery中下载免费的设计模板用于ASP.NET MVC应用程序中。接下来我们探讨了如何修改默认的CSS文件和母板视图文件实现自定义页面
RELATED

相关推荐

供不应求！三星2026年Q2营业利润或达563.5亿美元，扩产却面临多重挑战

供不应求！三星2026年Q2营业利润或达563.5亿美元，扩产却面临多重挑战

三星Q2营业利润有望飙升18倍7月6日消息，伦敦证券交易所集团LSEG旗下SmartEstimate模型综合30家机构分析师预测，三星2026年第二季度营业利润有望达到86万亿韩元（折合563.5亿美元），较去年同期4.7万亿韩元同比飙升约18倍&…

📅 2026/10/6 12:49:40
小白程序员必看：收藏这份大模型应用开发转行指南，36岁也能吃香！

小白程序员必看：收藏这份大模型应用开发转行指南，36岁也能吃香！

文章针对前端岗位低迷，尤其是大龄前端的困境，提出通过学习AI大模型应用开发实现转行的建议。核心内容包括：基础能力自测清单、职业诉求确认、行业市场调研、岗位分层调研、年龄就业市场调研、薪资成本回报测算以及作品集落地要求。文章强调通…

📅 2026/10/7 11:44:32
免费前端开发库认证终极指南：从零到专业的三步进阶法

免费前端开发库认证终极指南：从零到专业的三步进阶法

免费前端开发库认证终极指南：从零到专业的三步进阶法 【免费下载链接】freeCodeCamp freeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free. 项目地址: https://gitcode.com/GitHub_Trending/fr/free…

📅 2026/10/7 12:25:22
MORE NEWS

更多资讯

📰

交通银行江苏省分行试水词元贷：不押厂房给两家工厂批了6200万

交通银行江苏省分行试水词元贷：不押厂房给两家工厂批了6200万 去银行申请几千万元贷款，企业通常要带上什么？房产证、土地证、厂房设备发票，或者厚厚一叠抵押担保合同。但在2026年11月初的江苏，两家实体企业走进交通银行…
📰

18｜DeepSeek Harness研究资料更新后，怎样找出还引用旧证据的笔记？

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
📰

国家发改委推AI全周期治理：上线备案不够了，算力数据也得备查

国家发改委推AI全周期治理：上线备案不够了，算力数据也得备查 如果一家大模型公司在产品上线的前一天，被要求把两年前买过哪批芯片、洗过哪些数据、改过哪次算法架构甚至员工转岗记录全都清清楚楚交出来，工程师的第一反应大概是发懵…
📰

Autoware 2.0 发布：端到端 AI 与规则模块可混搭

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
📰

连接器接上平台只是开始：内容自动发布最容易漏掉的四件事

很多人第一次做内容自动化，最兴奋的不是文章写得多好，而是看到一句指令之后，内容真的出现在了另一个平台。 但只要把这套流程连续跑几天，问题很快就会冒出来：账号明明连过，任务却突然失效；同一篇…
📰

Python列表、元组、集合 实验实训

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
TODAY

今日更新

🆕

GUI自动化测试中的ScreenLayout：从硬编码坐标到声明式画面地图

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
🆕

LLC谐振变换器12V25A 300W开关电源设计与调试全攻略

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
🆕

ESP32多应用Flash数据隔离：分区表与NVS namespace实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
THIS WEEK

本周精选

📌

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代，基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而，与配合度高的人类不同，宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态，更无法控制光照环境。实际应用中，我们常…
📌

基于DRV8818与STM32的双极步进电机驱动方案实战解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
📌

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
THIS MONTH

本月热门

🔥

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代，基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而，与配合度高的人类不同，宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态，更无法控制光照环境。实际应用中，我们常…
🔥

基于DRV8818与STM32的双极步进电机驱动方案实战解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …
🔥

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

读完文章，想聊聊您的网站？

告诉我们您的行业与需求，资深顾问一对一梳理方案与报价，全程免费。

免费获取方案 400-888-6620
📞 💬