jQuery Masonry Filterable Portfolio using MVC 4

StackOverflow https://stackoverflow.com/questions/14293595

  •  15-01-2022
  •  | 
  •  

Question

I am working on porting this CSS template (http://www.csstemplateheaven.com/demo/bigshot) to an MVC 4 project as a way to better understand MVC. The first step I am working on is to convert this page from the demo (http://www.csstemplateheaven.com/demo/bigshot/portfolio.html and for some reason I can't get the jquery 'filter' option to work in MVC. I have posted the markup below, but a couple notes:

  1. I tried to use the bundling feature within MVC 4 but it was not working so I have put direct links for javascript and css in the views. I decided to tackle bundling & minification at a later time.
  2. As each page in the demo has different related css files, I have used a @RenderSection in the _Layout.cshtml file that pulls the head section from the individual views.
  3. Everything else (aside from the filtering) related to css and js is working fine on the site, except that the portfolio does not filter results. When I preview the site I can see the links to the various css and js files, and all are valid.

Thank you for any help or suggestions you can provide!

Code for _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>

Code for Hardware.cshtml (view)

    @{
    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>
Was it helpful?

Solution

After some more trial & error, along with additional searching, I was able to resolve the issue by moving the common script and css files to _Layout.cshtml page, and only load the specific css or scripts using @RenderSection for a particular view.

I am still learning, but evidently it is the order of the js files that impact if they run or not. If anyone can shed further light on this, or direct me to an MVC resource on this subject that would be helpful. I hope this helps others in the same situation.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top