3

我在 ASP.NET 方面不是最好的，但我将它用于身份验证后端和 RESTful Web API（因为我知道 C# 足够危险）。

我有一个严格使用 HTML、CSS 和 JS 构建的网站。当直接使用任何流行的浏览器（chrome、IE、firefox）启动时，它在外面看起来很棒。我想在这个网站中使用 ASP.NET 的一些功能，并让它成为我的 Web 应用程序的前端。我只是将 HTML、CSS 和 JS 文件夹（包括所有图像等）拖放到我的 ASP.NET 项目中，当我从 Visual Studio 在浏览器中预览时，整个 HTML 布局都是乱码，一切都没有看起来一样。

我为未经授权的用户添加了访问 Web.config 中的页面、css 文件夹和 js 文件夹的权限。

知道为什么会发生这种情况吗？ASP.NET 在构建过程中呈现 HTML/CSS 是否与直接通过浏览器查看不同？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site Name &raquo; Awesome Tagline Here</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/red.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />

<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorbox.js" type="text/javascript"></script>
<script src="js/flexslider.js" type="text/javascript"></script>
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="js/twitter.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>

<section id="wrapper">
    <section class="shell">
        <!-- Header -->
        <header>
            <h1 id="logo"><a href="home.html" class="notext">Name Of site</a></h1>

            <nav>
                <ul class="main-nav">
                    <li class="current"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li>
                        <a href="services.html">Services</a>
                        <ul>
                            <li><a href="services.html">Service Page 1</a></li>
                            <li><a href="services.html">Service Page 2</a></li>
                            <li>
                                <a href="services.html">Service Page 3</a>
                                <ul>
                                    <li><a href="services.html">Service Page 1</a></li>
                                    <li><a href="services.html">Service Page 2</a></li>
                                    <li><a href="services.html">Service Page 3</a></li>
                                    <li><a href="services.html">Service Page 4</a></li>
                                </ul>
                            </li>
                            <li><a href="services.html">Service Page 4</a></li>
                        </ul>
                    </li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

                <ul class="socials">
                    <li class="facebook"><a href="#">Facebook</a></li>
                    <li class="twitter"><a href="#">Twitter</a></li>
                    <li class="rss"><a href="#">RSS</a></li>
                </ul>
            </nav>
        </header>


<!-- End Header -->

</section>

<section id="large-slider">
    <ul class="slides">
        <li>
            <img src="css/images/home-slide1.jpg" alt="" />

            <section class="text">
                <h1><span>Ma quande</span> lingues coales</h1>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>

                <a href="#" class="button">View More</a>
            </section>
        </li>
        <li>
            <img src="css/images/home-slide2.jpg" alt="" />

            <section class="text">
                <h1><span>Ma quande</span> lingues coales</h1>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>

                <a href="#" class="button">View More</a>
            </section>
        </li>
        <li>
            <img src="css/images/home-slide3.jpg" alt="" />

            <section class="text">
                <h1><span>Ma quande</span> lingues coales</h1>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>

                <a href="#" class="button">View More</a>
            </section>
        </li>
        <li>
            <img src="css/images/home-slide1.jpg" alt="" />

            <section class="text">
                <h1><span>Ma quande</span> lingues coales</h1>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>

                <a href="#" class="button">View More</a>
            </section>
        </li>
    </ul>
</section>

<section class="shell">

    <section class="about-row">
        <h2 class="section-head"><a href="about.html" class="more">More Info</a> <span><span>More</span> About Us</span></h2>

        <section class="thumbs">
            <img src="css/images/th-about1.jpg" alt="" />
            <img src="css/images/th-about2.jpg" alt="" />
            <img src="css/images/th-about3.jpg" alt="" />
            <img src="css/images/th-about4.jpg" alt="" />
        </section>
        <section class="text">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut</p>
        </section>
    </section>

    <section class="projects-row">
        <h2 class="section-head"><a href="projects.html" class="more">More Projects</a> <span><span>Latest</span> Projects</span></h2>

        <ul class="thumbs">
            <li>
                <a href="project.html"><img src="css/images/th-home1.jpg" alt="" /></a>
                <h4>Lorem ipsum dolor <span>sit amet</span></h4>

                <p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
            </li>
            <li>
                <a href="project.html"><img src="css/images/th-home2.jpg" alt="" /></a>
                <h4>Lorem ipsum dolor <span>sit amet</span></h4>

                <p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
            </li>
            <li>
                <a href="project.html"><img src="css/images/th-home3.jpg" alt="" /></a>
                <h4>Lorem ipsum dolor <span>sit amet</span></h4>

                <p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
            </li>
            <li>
                <a href="project.html"><img src="css/images/th-home4.jpg" alt="" /></a>
                <h4>Lorem ipsum dolor <span>sit amet</span></h4>

                <p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
            </li>
        </ul>
    </section>

    <section class="clients-row">
        <h2 class="section-head"><a href="#" class="more">View More</a> <span><span>Our</span> Clients</span></h2>

        <ul>
            <li><a href="#"><img src="css/images/client1.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client2.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client3.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client4.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client5.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client6.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client7.png" alt="" /></a></li>
            <li><a href="#"><img src="css/images/client8.png" alt="" /></a></li>
        </ul>
    </section>

    <section class="row">
        <section class="half">
            <h2 class="section-head"><span><span>We</span> Hire</span></h2>

            <h4>SALES MARKETING CONSULTANT</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>

            <h4>ART DIRECTOR</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>
        </section>
        <section class="half">
            <h2 class="section-head"><span><span>Our</span> Services</span></h2>

            <ul class="left">
                <li><a href="services.html">Advertising</a></li>
                <li><a href="services.html">Brand Identity Design</a></li>
                <li><a href="services.html">Business Planning</a></li>
                <li><a href="services.html">Startup Planning</a></li>
                <li><a href="services.html">Campaign Planning</a></li>
            </ul>
            <ul class="right">
                <li><a href="services.html">Online Advertising Services</a></li>
                <li><a href="services.html">Website Architecture Design</a></li>
                <li><a href="services.html">Interactive Design</a></li>
                <li><a href="services.html">Game Design</a></li>
                <li><a href="services.html">Development</a></li>
            </ul>
        </section>
    </section>

    <h2 class="bottom-text">“Eat your <strong>betting money</strong>, but don't bet your <strong>eating money</strong>.”&lt;/h2>


    </section>

    <section id="footer-push"></section>
</section>

<!-- Footer -->
<footer>
    <section class="shell">
        <section id="to-top">
            <a href="#">Up</a>
            <span class="overlay"></span>
        </section>

        <section class="twitter-feed">
            <h5>Latest Tweets</h5>

            <section id="tweets"></section>
        </section>

        <section class="about-box">
            <h5>Tested on All Browsers</h5>
            <p>Find out more theme features <a href="#">Here</a></p>
            <img src="css/images/browsers.png" alt="" />
        </section>

        <section class="contact-box">
            <h5>Get in Touch</h5>

            <ul>
                <li><span class="small">email.</span> <a href="#">info@ibetwhat.com</a></li>
                <li><span class="small">ph.</span> 655-606-105</li>
                <li><span class="small">add.</span> East Pixel aBld. 99 <br /> City 9000</li>
            </ul>
        </section>

        <section class="socials">
            <ul>
                <li class="facebook"><a href="#">Facebook <span>Become a fan!</span></a></li>
                <li class="twitter"><a href="#">Twitter <span>Need more feed</span></a></li>
                <li class="rss"><a href="#">RSS <span>Be up to date</span></a></li>
            </ul>
        </section>
    </section>

    <section id="bottom">
        <section class="shell">
            <p class="foot-nav">
                <a href="home.html">Home</a> <span>|</span> 
                <a href="about.html">About</a> <span>|</span> 
                <a href="services.html">Services</a> <span>|</span> 
                <a href="projects.html">Projects</a> <span>|</span> 
                <a href="blog.html">Blog</a> <span>|</span> 
                <a href="contact.html">Contact</a> <span>|</span> 
                <a href="#">Bonus Pages</a>
            </p>

            <p>© 2012 My Company.</p>
        </section>
    </section>
</footer>
<!-- End Footer -->


</body>
</html>
4

2 回答 2

3

很可能您的 VS 项目中的引用与服务器上的引用不同。检查 HTML 上到 CSS 文件的相对路径是否正确。接下来检查图像路径是否仍然可以在您的 CSS 中工作（如果有的话）。您需要根据您的新位置修复这些问题。

尝试通过直接 URL 访问 CSS、js 和图像。验证 HTML 是否使用相同的路径。

当然可以使用 Firebug 或 Chrome 开发者工具来调试路径。

于 2012-07-20T23:33:24.173 回答
0

如果不能直接查看您的特定场景，很难说出正在发生的事情，但是，如果您在提到“预览页面”时指的是 Visual Sudio Designer，那么您描述的结果是可以预期的，如果您的原始 HTML 页面 HTML 在呈现 UI 时使用了大量的 javascript。Visual Studio 设计器不会在预览模式下处理任何 javascript。

如果您没有参考 Visual Studio 设计器并且正在浏览由 Visual Studio Web 服务器主机进程托管的 HTML 页面，那么您可能需要检查您是如何引用资源文件（css 等）的。如果您在 href="http://domain.com/styles/main.cs" 之类的 href 中完全限定了样式表，那么由于 Visual Studio Web 服务器通常运行在一个随机的，除了端口 80 配置。无论如何，您可能不应该以这种方式引用它们。最有可能的问题不是权限，而是对您的 css 和 javascript 文件的引用损坏。

于 2012-07-20T23:35:00.453 回答