Styles not applying to views other than home view [Answered]RSS

5 replies

Last post Nov 21, 2017 07:33 PM by kenneth2k1

‹ Previous Thread|Next Thread ›

Shortcuts

kenneth2k1

Member

6 Points

17 Posts

Styles not applying to views other than home view

Nov 21, 2017 12:36 AM|kenneth2k1|LINK

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.

- Reply
zxj
Participant

980 Points

475 Posts
Re: Styles not applying to views other than home view

Nov 21, 2017 01:47 AM|zxj|LINK
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
- Reply
kenneth2k1
Member

6 Points

17 Posts
Re: Styles not applying to views other than home view

Nov 21, 2017 04:34 AM|kenneth2k1|LINK
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.
- Reply
AngelinaJoli...
Contributor

5280 Points

2307 Posts
Re: Styles not applying to views other than home view

Nov 21, 2017 10:14 AM|AngelinaJolie|LINK
Hi kenneth,
kenneth2k1
```
@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 _layout 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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
kenneth2k1
Member

6 Points

17 Posts

Re: Styles not applying to views other than home view

Nov 21, 2017 05:24 PM|kenneth2k1|LINK

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.
- Reply
kenneth2k1
Member

6 Points

17 Posts
Re: Styles not applying to views other than home view

Nov 21, 2017 07:33 PM|kenneth2k1|LINK
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.

‹ Previous Thread|Next Thread ›

Styles not applying to views other than home view [Answered]RSS

5 replies

Shortcuts

Styles not applying to views other than home view

Re: Styles not applying to views other than home view

Re: Styles not applying to views other than home view

Re: Styles not applying to views other than home view

kenneth2k1

Re: Styles not applying to views other than home view

Re: Styles not applying to views other than home view