Css没有在浏览器中执行

时间:2015-01-20 15:43:38

标签: c# css asp.net-mvc

我是MVCApplication开发的新手。我在本地服务器上的Visual Studio 2012中工作。我有两种观点:索引和小狗。为索引生成请求时,浏览器会加载并执行CSS。但是,当为Puppies生成请求时,浏览器不会执行CSS。有人可以帮我找出原因吗?

这是我的控制器代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EAD_PROJECT_MVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ViewResult Index()
        {            
            return View();
        }

        public ViewResult Puppies()
        {
            return View();
        }
    }
}

这是我的布局页面_header_footer.cshtml

@{
     ViewBag.Title = "Header_footer";
}
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>PetZone</title>
        <link href="Content/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="Custom_Scripts/index_style.css" rel="stylesheet" type/="text/css"/>
        <link href="Custom_Scripts/puppies_style.css" rel="stylesheet" type="text/css"/>
        <script src="index.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="Content/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
    </head>

<body>
    <nav class="collapse navbar-collapse" id="navbar-tab" role="navigation">

        <div>
            <ul class="nav navbar-nav" id="navbar-tab-list"> 
                <li class="item active"> <a href="#" id="list-item-1"  onclick="location.href='@Url.Action("index")'"> <span class="icon glyphicon glyphicon-home"></span> Home </a></li>               
                <li class="item active"> <a href="#" id="list-item-2"  onclick="location.href='@Url.Action("puppies")'">  Puppies </a></li>               

            </ul>
        </div>
    </nav>
</body>    

这是我的索引

@{
    Layout = "~/Views/shared/_header_footer.cshtml";    
}

<h2>index</h2>

这是我的Puppies.cshtml

@{
    Layout = "~/Views/shared/_header_footer.cshtml";    
}

<h2>puppies</h2>

1 个答案:

答案 0 :(得分:0)

您的布局页面样式链接看起来不对:

<link href="Content/bootstrap.css" rel="stylesheet" type="text/css"/>

需要按照以下方式为小狗工作&#39;

<link href="../Content/bootstrap.css" rel="stylesheet" type="text/css"/>

如果您的主页(索引)网址是,例如:

www.something.com(相关链接从这一点起作用)

和小狗是:

www.something.com/home/puppies(相对链接现已全部破坏)

然后这可以解释发生了什么。

您的链接应设置为相对于他们呈现的页面,方式如下:

<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

您还应该了解浏览器中的开发人员栏 - 网络访问标签非常适合找出未加载的内容。