在 ASP.NET 传统的 Web 项目中,我们知道可以应用主题(Theme)。但在 ASP.NET MVC 项目中如何应用呢。因为着重于 ASP.NET MVC 的基本特性,所以一时也没有想解决方法。
在浏览相关网页时,曾经看到一种实现方式,How To Setup Custom Theme Support In ASP.NET MVC Preview 4 using a Custom ViewEngine,原理是利用 ViewEngine 相关类实现。
可我不想重新发明轮子,于是尝试使用 ASP.NET 2.0 主题。
一、体力活:
- 添加主题文件夹
- 将原 Content 文件夹下面的 CSS 文件移到新建的主题目录下
- 移除 MasterPage Head 中所有关于默认 CSS 文件的引用
- 在 Web.config 文件中的 Page 元素指定主题
二、运行试试
出人意料,结果是不能运行,报错提示:Using themed css files requires a header control on the page. (e.g. <head runat="server" />).于是我按照错误提示,在 Default.aspx 中加入 <head runat="server"></head>,如:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<%@ Page Language="C#" EnableTheming="false" StylesheetTheme="" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MVC._Default" %>
<head runat="server"></head>
<%-- Please do not delete this file. It is used to ensure that ASP.NET MVC is activated by IIS when a user makes a "/" request to the server. --%>
保存、编译并运行。^_^,成了,看到页面了!打开源码文件:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<link href="App_Themes/default/layout.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/skin.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.all.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.datepicker.css" type="text/css" rel="stylesheet" />
</head>
嗯,不错!看来我可以简单的按此方法将主题应用到我的MVC项目中。
三、美中不足
虽然看起来一切正常,可是一向好奇的我发现,在源文件的结尾处(</html>之后)发现了重复的 head 内容:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<link href="App_Themes/default/layout.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/skin.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.all.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.datepicker.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page">
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/dot.gif)
</div>
</body>
</html>
<head>
<link href="App_Themes/default/layout.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/skin.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.all.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/ui.datepicker.css" type="text/css" rel="stylesheet" />
<title></title>
</head>
相信你看了,也会觉得美中不足。
那么怎么解决这个问题呢?想想这是如何出现的吧,就是因为在 Default.aspx 中加入 <head runat="server"></head>,才出现这种情况的。去掉它?不行。仔细想想,觉得大概是 HttpHandler 处理了两次请求,干脆重定向吧,于是打开 Default.aspx.cs 文件,做如下修改:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
public partial class _Default : Page
{
public void Page_Load(object sender, System.EventArgs e)
{
// HttpContext.Current.RewritePath(Request.ApplicationPath);
// IHttpHandler httpHandler = new MvcHttpHandler();
// httpHandler.ProcessRequest(HttpContext.Current);
this.Response.Redirect("~/Home/Index", true);
}
}
保存、编译并运行,页面显示正常,打开源文件再看看,发现已经没有重复的 head 内容。