0

我正在将此 CSS 模板 ( http://www.csstemplateheaven.com/demo/bigshot ) 移植到 MVC 4 项目中，以更好地理解 MVC。我正在做的第一步是从演示转换此页面（http://www.csstemplateheaven.com/demo/bigshot/portfolio.html，由于某种原因，我无法让 jquery 'filter' 选项工作在 MVC 中。我在下面发布了标记，但有几点注意事项：

  1. 我尝试在 MVC 4 中使用捆绑功能，但它不起作用，所以我在视图中放置了 javascript 和 css 的直接链接。我决定稍后解决捆绑和缩小问题。
  2. 由于演示中的每个页面都有不同的相关 css 文件，因此我在 _Layout.cshtml 文件中使用了一个 @RenderSection 从各个视图中提取头部部分。
  3. 与 css 和 js 相关的所有其他内容（除了过滤）在网站上都可以正常工作，除了投资组合不过滤结果。当我预览站点时，我可以看到各种 css 和 js 文件的链接，并且所有文件都是有效的。

感谢您提供的任何帮助或建议！

_Layout.cshtml 的代码

    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <title>Test Site</title>
        @RenderSection("head", required: false)

            <script>
                jQuery.noConflict()(function ($) {
                    $('#ei-slider').eislideshow({
                        animation: 'center',
                        autoplay: true,
                        slideshow_interval: 3000,
                        titlesFactor: 0
                    });
                });
    </script>

    </head>

<body style="background: #FFF">

   <div style="width:100%; background: #FFF">

       <div class="header">

        <!-- Logo/Title -->

            <div id="site_title"><a href="#">
                <img src="~/Content/img/logo.png" alt="My Site Title" /></a>
            </div>  

               <ol id="menu">
             <li><a href="#">Home</a>

              <!-- sub menu -->
              <ol>  
                <li><a href="#">Nivo Slider</a></li>
                <li><a href="#">EI Slider</a></li>
                <li><a href="#">Fullscreen Slider</a></li>
                <li><a href="#">Static Image</a></li>
              </ol>
              </li><!-- end sub menu -->

        <li><a href="#">Pages</a>

              <!-- sub menu -->
              <ol>     
                <li><a href="#">Magazine</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Full Width Page</a></li>
                <li><a href="#">Columns</a></li>
              </ol>
        </li><!-- end sub menu -->

        <li><a href="#">Elements</a></li>

        <li><a href="#">Galleries</a>

              <!-- sub menu -->
              <ol>     
                <li><a href="#">Simple</a></li>
                <li><a href="~/Home/Hardware">Filterable</a></li>
                <li><a href="#">Fade Scroll</a></li>
                <li><a href="#">Video</a></li>
                <li class="last"><a href="#">PhotoGrid</a></li>
              </ol>
        </li><!-- end sub menu -->

               <li><a href="#">Contact</a></li>
    </ol>

       </div> 

     <!-- END header -->

       </div>

        @RenderSection("picturecycle", required: false)

    <div id="container">

        @RenderBody()

    </div>


    <div id="footer">

    <!-- First Column -->

    <div class="one-fourth">
        <h3>Useful Links</h3>
            <ul class="footer_links">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Ellem Ciet</a></li>
                <li><a href="#">Currivitas</a></li>
                <li><a href="#">Salim Aritu</a></li>
            </ul>
    </div>

    <!-- Second Column -->

    <div class="one-fourth">
        <h3>Terms</h3>
            <ul class="footer_links">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Ellem Ciet</a></li>
                <li><a href="#">Currivitas</a></li>
                <li><a href="#">Salim Aritu</a></li>
            </ul>
    </div>

    <!-- Third Column -->

    <div class="one-fourth">
        <h3>Information</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet enim id dui tincidunt vestibulum rhoncus a felis.

        <div id="social_icons">
        Theme by <a href="http://www.csstemplateheaven.com">CssTemplateHeaven</a><br /> Photos © <a href="http://dieterschneider.net" title="Dieter Schneider Photography">Dieter Schneider</a>
        </div>

    </div>

    <!-- Fourth Column -->

    <div class="one-fourth last">
        <h3>Socialize</h3>
            <img src="~/Content/img/icon_fb.png" alt="Facebook">
            <img src="~/Content/img/icon_twitter.png" alt="Facebook">
            <img src="~/Content/img/icon_in.png" alt="Facebook">
    </div>

    <div style="clear:both"></div>

    </div> <!-- END footer -->

</body>
</html>

Hardware.cshtml 的代码（查看）

    @{
    ViewBag.Title = "Hardware Page";
}

@section head {

<!-- CSS Files -->

    <link rel="stylesheet" type="text/css" media="screen" href="~/Content/style.css">
    <link rel="stylesheet" type="text/css" media="screen" href="~/Content/menu/css/simple_menu.css">
    <link rel="stylesheet" href="~/Content/css/prettyPhoto.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="~/Content/css/nivo-slider.css" type="text/css" media="screen"/>

<!-- JS Files -->

    <script type="text/javascript" src="~/Scripts/js/jquery.min.js"></script>    
    <script type="text/javascript" src="~/Scripts/js/custom.js"></script>
  <script type="text/javascript" src="~/Scripts/js/slides/slides.min.jquery.js"></script>
    <script type="text/javascript" src="~/Scripts/js/cycle-slider/cycle.js"></script>
    <script type="text/javascript" src="~/Scripts/js/nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript" src="~/Scripts/js/tabify/jquery.tabify.js"></script>
    <script type="text/javascript" src="~/Scripts/js/prettyPhoto/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="~/Scripts/js/twitter/jquery.tweet.js"></script>
    <script type="text/javascript" src="~/Scripts/js/scrolltop/scrolltopcontrol.js"></script>
    <script type="text/javascript" src="~/Scripts/js/portfolio/filterable.js"></script>
    <script type="text/javascript" src="~/Scripts/js/modernizr/modernizr-2.0.3.js"></script>
    <script type="text/javascript" src="~/Scripts/js/easing/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="~/Scripts/js/kwicks/jquery.kwicks-1.5.1.pack.js"></script>
    <script type="text/javascript" src="~/Scripts/js/swfobject/swfobject.js"></script>
    <!-- FancyBox -->
    <link rel="stylesheet" type="text/css" href="~/Scripts/js/fancybox/jquery.fancybox.css" media="all">
    <script type="text/javascript" src="~/Scripts/js/fancybox/jquery.fancybox-1.2.1.js"></script>


}

                <div id="portfolio">
                    <ul id="filterable">
                        <li class="first">
                        <h5>Sort by:</h5>

                        </li>
                        <li class="current"><a class="all" href="#all">All</a></li>
                        <li><a class="web" href="#web">Webdesign</a></li>
                        <li><a class="logos" href="#logos">Logo</a></li>
                        <li><a class="branding" href="#branding">Branding</a></li>
                        <li><a class="stupid" href="#stupid">Stupid</a></li>
                        <li><a class="video" href="#video">Video</a></li>

                    </ul>
                    <!--END filtering-nav-->
                    <div class="portfolio-container" id="columns">
                        <ul>
                            <li class="one-fourth web">
                            <p>
                                <a href="slideshow/slide_1.jpg" class="portfolio-item-preview" data-rel="prettyPhoto" title="Scream"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt="" width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Worpdress Design</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth logos">
                            <p>
                                <a href="slideshow/slide_1.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Logo Design</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth stupid">
                            <p>
                                <a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Qfeature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Watch Video</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth web">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Wordpress Master</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth logos">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Endless Logo Design</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth web">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Worpdress Widgets</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth web">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Magento Development</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth web">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Joomla Shopping</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth branding">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">T-Shirts Designs</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth video">
                            <p>
                                <a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Q&amp;feature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Youtube Video</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth branding">
                            <p>
                                <a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Brand Everything</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                            <li class="one-fourth video">
                            <p>
                                <a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Q&amp;feature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
                            </p>
                            <h4><a href="#">Another Video</a></h4>

                            <p>
                                 Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
                            </p>
                            </li>
                        </ul>
                        <!--END ul-->
                    </div>
                    <!--END portfolio-wrap-->
</div>

<div style="clear:both; height: 40px"></div>
4

1 回答 1

0

经过更多的试验和错误以及额外的搜索，我能够通过将通用脚本和 css 文件移动到 _Layout.cshtml 页面来解决问题，并且仅使用 @RenderSection 为特定视图加载特定 css 或脚本。

我还在学习，但显然 js 文件的顺序会影响它们是否运行。如果有人可以进一步阐明这一点，或者将我引导到有关此主题的 MVC 资源，这将是有帮助的。我希望这对处于相同情况的其他人有所帮助。

于 2013-01-12T22:46:43.933 回答