locked
Styles not applying to views other than home view RRS feed

  • Question

  • User1279812062 posted

    EDIT: Sorry, thought I posted this in the MVC forums. If it needs to move then that's cool

    Hello:

    I am working with asp.net MVC4 (I think) and I have an issue. When I start my project it will render the styling just fine on the home page, but when navigate to any other page, the styling is missing. Here is my code, please let me know if there's something else you would like to see:

    Controller, which works fine:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace SchmuckSports.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult HomePage()
            {
                return View();
            }
    
            public ActionResult Stats()
            {
                return View();
            }
    
    
        }
    }

    My _Layout.cshtml (sorry so long, I have some views with special objects and such):

    <!DOCTYPE html>
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" content="notranslate">
        <title>@ViewBag.Title</title>
        @Styles.Render("~/content")
        @Styles.Render("~/css")
        @Scripts.Render("~/bundles/modernizr")
        <!-- Plugins CSS -->
        <link href="css/plugins/plugins.css" rel="stylesheet">
        <!-- REVOLUTION STYLE SHEETS -->
        <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
        <!-- REVOLUTION LAYERS STYLES -->
        <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
        <!-- REVOLUTION NAVIGATION STYLES -->
        <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
        <!-- load css for cubeportfolio -->
        <link rel="stylesheet" type="text/css" href="cubeportfolio/css/cubeportfolio.min.css">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    
        <!-- Site Overlay -->
        <div class="site-overlay"></div>
        <nav class="navbar navbar-expand-lg navbar-light navbar-transparent bg-faded nav-sticky">
            <div class="search-inline">
                <form>
                    <input type="text" class="form-control" placeholder="Type and hit enter...">
                    <button type="submit"><i class="ti-search"></i></button>
                    <a href="javascript:void(0)" class="search-close"><i class="ti-close"></i></a>
                </form>
            </div><!--/search form-->
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="@Url.Action("HomePage", "Home")">
                    <img class='logo logo-dark' src="~/images/SmuckLogoBlack.PNG" alt="">
    
                </a>
                <div id="navbarNavDropdown" class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        @********   HOME      *********@
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("HomePage", "Home")">Home</a>
                        </li>
                        @*****   Stats    *****@
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("Stats", "Home")"> Stats</a>
                        </li>
    
                    </ul>
                </div>
                <div class=" navbar-right-elements">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="javascript:void(0)" class="search-open"><i class="icon-profile-male"></i></a></li>
                    </ul>
                </div><!--right nav icons-->
            </div>
        </nav>
    
        <!------------- CONTENT SECTION ------------------>
    
        <section class="content">
            <body>
                @RenderBody()
            </body>
        </section>
        <!-------------------------->
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script type="text/javascript" src="js/plugins/plugins.js"></script>
        <script type="text/javascript" src="js/assan.custom.js"></script>
        <!-- load cubeportfolio -->
        <script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
        <!-- REVOLUTION JS FILES -->
        <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
        <!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>
        <script>
                /**Hero  script**/
                var tpj = jQuery;
    
                var revapi1078;
                tpj(document).ready(function () {
                    if (tpj("#rev_slider_1078_1").revolution == undefined) {
                        revslider_showDoubleJqueryError("#rev_slider_1078_1");
                    } else {
                        revapi1078 = tpj("#rev_slider_1078_1").show().revolution({
                            sliderType: "standard",
                            jsFileLocation: "revolution/js/",
                            sliderLayout: "auto",
                            dottedOverlay: "none",
                            delay: 8000,
                            navigation: {
                                arrows: {
                                    enable: true,
                                    style: 'uranus',
                                    tmp: '',
                                    rtl: false,
                                    hide_onleave: false,
                                    hide_onmobile: true,
                                    hide_under: 600,
                                    hide_over: 9999,
                                    hide_delay: 200,
                                    hide_delay_mobile: 1200,
                                    left: {
                                        container: 'slider',
                                        h_align: 'left',
                                        v_align: 'center',
                                        h_offset: 0,
                                        v_offset: 0
                                    },
                                    right: {
                                        container: 'slider',
                                        h_align: 'right',
                                        v_align: 'center',
                                        h_offset: 0,
                                        v_offset: 0
                                    }
                                }
                            },
                            viewPort: {
                                enable: true,
                                outof: "pause",
                                visible_area: "80%",
                                presize: false
                            },
                            responsiveLevels: [1240, 1024, 778, 480],
                            visibilityLevels: [1240, 1024, 778, 480],
                            gridwidth: [1140, 992, 700, 465],
                            gridheight: [600, 600, 500, 480],
                            lazyType: "none",
                            parallax: {
                                type: "mouse",
                                origo: "slidercenter",
                                speed: 2000,
                                levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50, 46, 47, 48, 49, 50, 55]
                            },
                            shadow: 0,
                            spinner: "off",
                            stopLoop: "off",
                            stopAfterLoops: -1,
                            stopAtSlide: -1,
                            shuffle: "off",
                            autoHeight: "off",
                            hideThumbsOnMobile: "off",
                            hideSliderAtLimit: 0,
                            hideCaptionAtLimit: 0,
                            hideAllCaptionAtLilmit: 0,
                            debugMode: false,
                            fallbacks: {
                                simplifyAll: "off",
                                nextSlideOnWindowFocus: "off",
                                disableFocusListener: false
                            }
                        });
                    }
                });	/*ready*/
                //cube portfolio init
                (function ($, window, document, undefined) {
                    'use strict';
    
                    // init cubeportfolio
                    $('#js-grid-mosaic-flat').cubeportfolio({
                        filters: '#js-filters-mosaic-flat',
                        layoutMode: 'mosaic',
                        sortToPreventGaps: true,
                        mediaQueries: [{
                            width: 1500,
                            cols: 6
                        }, {
                            width: 1100,
                            cols: 4
                        }, {
                            width: 800,
                            cols: 3
                        }, {
                            width: 480,
                            cols: 2,
                            options: {
                                caption: '',
                                gapHorizontal: 15,
                                gapVertical: 15
                            }
                        }],
                        defaultFilter: '*',
                        animationType: 'fadeOutTop',
                        gapHorizontal: 0,
                        gapVertical: 0,
                        gridAdjustment: 'responsive',
                        caption: 'fadeIn',
                        displayType: 'fadeIn',
                        displayTypeSpeed: 100,
                        // lightbox
                        lightboxDelegate: '.cbp-lightbox',
                        lightboxGallery: true,
                        lightboxTitleSrc: 'data-title',
                        lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
                        plugins: {
                            loadMore: {
                                selector: '#js-loadMore-mosaic-flat',
                                action: 'click',
                                loadItems: 3
                            }
                        }
                    });
                })(jQuery, window, document);
        </script>
    </body>
    </html>
    

    And for simplicity sake I have a couple of really simple views that the @url.action links point to:

    Home view

    @{
        ViewBag.Title = "Home Page";
    }
    
            <!------   Header ------->
            <div class="container pt90shmuckrating">
                <div class="title-heading1 mb40">
                    <h3>Home</h3>
                </div>
            </div>
    
    

    Stats view

    @{
        ViewBag.Title = "Stats Page";
    }
    
            <!------   Header ------->
            <div class="container pt90shmuckrating">
                <div class="title-heading1 mb40">
                    <h3>Stats</h3>
                </div>
            </div>

    So this all works fine, but here's what I notice:

    When the project loads, the routeconfig points to the Home controller -> HomePage. When you put in the URL of the entry point, it works just fine. Since I am just running locally right now, the URL is: http://localhost:61475/ So as I said, doing that will get me the view styled properly.

    But let's say I navigate to http://localhost:61475/Home/Stats

    or even http://localhost:61475/Home/HomePage (which I figured would render the same as http://localhost:61475/ )

    then I will lose my styling. The page displays with just un-styled html. What am I missing? Thanks for any help you can provide. 

    Tuesday, November 21, 2017 12:36 AM

Answers

  • User-832373396 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">kenneth</g>,

     @Styles.Render("~/content")
        @Styles.Render("~/css")

    This should be the error point.please find BundleConfig.cs file and modify

      public class BundleConfig
        {
            
            public static void RegisterBundles(BundleCollection bundles)
            {
              ...
    bundles.Add(new StyleBundle("~/Content1/content2").Include("~/Content/...css"));
    bundles.Add(new StyleBundle("~/Content1/css").Include("~/Content/....css"));

    Then at <g class="gr_ gr_104 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="104" data-gr-id="104">_layout</g> page:

    Change to:

     @Styles.Render("~/Content1/content2")
    @Styles.Render("~/Content1/css")

    Reason: the virtual path name(StyleBundle("~/Content1/content2")) should different with the exist folder name or file name, can't contain;

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 10:14 AM
  • User1279812062 posted

    Thanks again, checked my bundles and needed to update my _Layout.cshtml to render those scripts/styles:

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/bootstrap")
        @Styles.Render("~/bundles/css")

    Thanks again for the help.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 7:33 PM

All replies

  • User991499041 posted

    Hi Kenneth2k1,

    You can set the Layout property in the individual view also, to override default layout page setting of _ViewStart.cshtml.

    _ViewStart.cshtml file can be used to specify path of layout page, which in turn will be applicable to all the views of the folder and its subfolder.

    Use Layout View:

    For example, the following _ViewStart.cshtml in the Views folder, sets the Layout property to "~/Views/Shared/_Layout.cshtml". So now, _layout.cshtml would be layout view of all the views included in Views and its subfolders. So by default, all the views derived default layout page from _ViewStart.cshtml of Views folder.

    Setting Layout property in individual view:

    You can also override default layout page set by _ViewStart.cshtml by setting Layout property in each individual .cshtml view. For example, the following Index view use _myLayoutPage.cshtml even if _ViewStart.cshtml set _Layout.cshtml.

    @{
        ViewBag.Title = "Home Page";
        Layout = "~/Views/Shared/_myLayoutPage.cshtml";
    }

    Regards,

    zxj

    Tuesday, November 21, 2017 1:47 AM
  • User1279812062 posted

    Hello zxj. This is what is confusing me, because I already have my _ViewStart.cshtml set exactly as you have posted.

    why would my styling get applied on the entry point, but navigating to other pages have the styling not applied?

    Even if I change my RouteConfig to:

                routes.MapRoute(
                    name: "Default",
                    url: "{controller}/{action}/{id}",
                    defaults: new { controller = "Home", action = "Stats", id = UrlParameter.Optional }
                );

    then that view will display with styling when the site is run, but navigating to /Home/HomePage won't have styling.

    Tuesday, November 21, 2017 4:34 AM
  • User-832373396 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">kenneth</g>,

     @Styles.Render("~/content")
        @Styles.Render("~/css")

    This should be the error point.please find BundleConfig.cs file and modify

      public class BundleConfig
        {
            
            public static void RegisterBundles(BundleCollection bundles)
            {
              ...
    bundles.Add(new StyleBundle("~/Content1/content2").Include("~/Content/...css"));
    bundles.Add(new StyleBundle("~/Content1/css").Include("~/Content/....css"));

    Then at <g class="gr_ gr_104 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="104" data-gr-id="104">_layout</g> page:

    Change to:

     @Styles.Render("~/Content1/content2")
    @Styles.Render("~/Content1/css")

    Reason: the virtual path name(StyleBundle("~/Content1/content2")) should different with the exist folder name or file name, can't contain;

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 10:14 AM
  • User1279812062 posted

    thanks Angelina. Still didn't work for me, but has me looking at my bundleConfig more closely, because these paths don't appear to have the files needed in them. Let me toy with it a bit and get back to this thread with what I find.

    Tuesday, November 21, 2017 5:24 PM
  • User1279812062 posted

    Thanks again, checked my bundles and needed to update my _Layout.cshtml to render those scripts/styles:

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/bootstrap")
        @Styles.Render("~/bundles/css")

    Thanks again for the help.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 7:33 PM