首頁 > 開發者 > ASP

ASP.NET MVC 中應用主題 預覽4

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在 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 主題。

 

一、體力活：

  1. 添加主題檔案夾
  2. 將原 Content 檔案夾下面的 CSS 檔案移到建立的主題目錄下
  3. 移除 MasterPage Head 中所有關於預設 CSS 檔案的引用
  4. 在 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>，如：

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. --%>

儲存、編譯並運行。^_^，成了，看到頁面了！開啟源碼檔案：

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 內容：

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">
       
    </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 檔案，做如下修改：

Codepublic 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 內容。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More