Failed to reference style sheets (css) and javascript in ASP.NET MVC 5 project with Razor

Navigation
1

Good afternoon, I have a my website in ASP .NET MVC. I am currently implementing the Layout (Located in Yanbal (the VS solution) - > Views - > Shared - > _Layout.css . I have made a model in wordpress, I got the html code from it and copied what interested me in my web (La Cabecera) .I saw that in the html file, it reference style sheets and javascript files; then copy those files in my Solution and place them in a folder called "Layout Format".

Note: Some files that do not have the css format are simply plain files (xxxxxx instead of xxxxxx.css), do not think you have to see something or do you?

My Workspace: 

<!DOCTYPE html>
<html lang="es-ES"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Mi aplicación ASP.NET</title>
@Styles.Render("~/Content/css")
<link href="~/Content/selimain.css" type="text/css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")

<script defer="" src="@Url.Content("~/Content/FormatoLayout/beacon.js.descarga")"></script>
<script type="text/javascript">
    /* <![CDATA[ */
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }
    /* ]]> */
</script>
<script type="text/javascript">
        window._wpemojiSettings = {"baseUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/s1.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1496863874h&ver=4.8-RC2-40878"}};
        !function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<script src="@Url.Content("~/Content/FormatoLayout/wp-emoji-release.min.js.descarga")" type="text/javascript" defer=""></script>
<style type="text/css">
    img.wp-smiley,
    img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
    }
</style>
<link rel="stylesheet" id="all-css-0-1" href="@Url.Content("~/Content/FormatoLayout/saved_resource")" type="text/css" media="all">
<style id="wpcom-admin-bar-inline-css" type="text/css">
    .goog-te-banner-frame {
        top: 32px !important;
    }
</style>
<style id="edin-style-inline-css" type="text/css">
    .hero.with-featured-image {
        background-image: url(https://proyectoyanbal.files.wordpress.com/2017/06/144403.jpg?w=1230);
    }

    .hero.without-featured-image {
        background-image: url();
    }
</style>
<link rel="stylesheet" id="print-css-1-1" href="@Url.Content("~/Content/FormatoLayout/global-print.css")" type="text/css" media="print">
<link rel="stylesheet" id="goran-noto-sans-css" href="@Url.Content("~/Content/FormatoLayout/css")" type="text/css" media="all">
<link rel="stylesheet" id="goran-noto-serif-css" href="@Url.Content("~/Content/FormatoLayout/css(1)")" type="text/css" media="all">
<link rel="stylesheet" id="goran-droid-sans-mono-css" href="@Url.Content("~/Content/FormatoLayout/css(2)")" type="text/css" media="all">
<link rel="stylesheet" id="all-css-8-1" href="@Url.Content("~/Content/FormatoLayout/saved_resource(1)")" type="text/css" media="all">
<script type="text/javascript" src="@Url.Content("~/Content/FormatoLayout/saved_resource(2)")"></script>
<style type="text/css"></style>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://proyectoyanbal.wordpress.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://s1.wp.com/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress.com">
<link rel="canonical" href="https://proyectoyanbal.wordpress.com/">
<link rel="shortlink" href="http://wp.me/P8T4gX-2">
<link rel="alternate" type="application/json+oembed" href="https://public-api.wordpress.com/oembed/?format=json&amp;url=https%3A%2F%2Fproyectoyanbal.wordpress.com%2F&amp;for=wpcom-auto-discovery">
<link rel="alternate" type="application/xml+oembed" href="https://public-api.wordpress.com/oembed/?format=xml&amp;url=https%3A%2F%2Fproyectoyanbal.wordpress.com%2F&amp;for=wpcom-auto-discovery">
<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="website">
<meta property="og:title" content="Proyecto Yanbal">
<meta property="og:description" content="Web Site para realizar compras desde la página web de la empresa">
<meta property="og:url" content="https://proyectoyanbal.wordpress.com/">
<meta property="og:site_name" content="Proyecto Yanbal">
<meta property="og:image" content="https://proyectoyanbal.files.wordpress.com/2017/06/144403.jpg?w=1200">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="400">
<meta property="og:locale" content="es_ES">

<meta name="twitter:text:title" content="Página de inicio">
<meta name="twitter:image:src" content="https://proyectoyanbal.files.wordpress.com/2017/06/144403.jpg?w=640">
<meta name="twitter:card" content="summary_large_image">
<meta property="fb:app_id" content="249643311490">
<meta property="article:publisher" content="https://www.facebook.com/WordPresscom">
<link rel="shortcut icon" type="image/x-icon" href="https://s2.wp.com/i/favicon.ico" sizes="16x16 24x24 32x32 48x48">
<link rel="icon" type="image/x-icon" href="https://s2.wp.com/i/favicon.ico" sizes="16x16 24x24 32x32 48x48">
<link rel="apple-touch-icon-precomposed" href="https://s0.wp.com/i/webclip.png">
<link rel="search" type="application/opensearchdescription+xml" href="https://proyectoyanbal.wordpress.com/osd.xml" title="Proyecto Yanbal">
<link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com">
<meta name="theme-color" content="#e1dfdf">
<meta name="application-name" content="Proyecto Yanbal">
<meta name="msapplication-window" content="width=device-width;height=device-height">
<meta name="msapplication-tooltip" content="Web Site para realizar compras desde la página web de la empresa">
<meta name="msapplication-task" content="name=Editar página;action-uri=https://wordpress.com/page/proyectoyanbal.wordpress.com/2;icon-uri=https://s0.wp.com/i/icons/page.ico">
<meta name="msapplication-task" content="name=Escribir una entrada;action-uri=https://wordpress.com/post/proyectoyanbal.wordpress.com;icon-uri=https://s2.wp.com/i/icons/post.ico">
<meta name="msapplication-task" content="name=Moderar comentarios;action-uri=https://proyectoyanbal.wordpress.com/wp-admin/edit-comments.php?comment_status=moderated;icon-uri=https://s0.wp.com/i/icons/comment.ico">
<meta name="msapplication-task" content="name=Subir archivos multimedia;action-uri=https://proyectoyanbal.wordpress.com/wp-admin/media-new.php;icon-uri=https://s2.wp.com/i/icons/media.ico">
<meta name="msapplication-task" content="name=Estadísticas del blog;action-uri=https://proyectoyanbal.wordpress.com/wp-admin/index.php?page=stats;icon-uri=https://s1.wp.com/i/icons/stats.ico">
<meta name="title" content="Página de inicio | Proyecto Yanbal en WordPress.com">
<meta name="description" content="Este es el extracto de la página de inicio">
<style type="text/css" media="print">
    #wpadminbar {
        display: none;
    }
</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@@media screen and ( max-width: 782px ) {
    html { margin-top: 46px !important; }
    * html body { margin-top: 46px !important; }
}
</style>
<style type="text/css" id="syntaxhighlighteranchor"></style>
<link rel="stylesheet" type="text/css" id="gravatar-card-css" href="./FormatoLayout/hovercard.css">
<link rel="stylesheet" type="text/css" id="gravatar-card-services-css" href="./FormatoLayout/services.css">
</head>
<body class="home page-template page-template-page-templates page-template-front-page page-template-page-templatesfront-page-php page page-id-2 logged-in admin-bar no-customize-support mp6 customizer-styles-applied hero-image has-quinary has-custom-background has-footer-navigation navigation-default no-sidebar-full highlander-enabled highlander-light small-screen medium-screen large-screen">
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="https://proyectoyanbal.wordpress.com/#content">Saltar al contenido.</a>
    <header id="masthead" class="site-header" role="banner" style="display: block; margin-bottom: -96px;">
        <div class="site-top-content">
            Edit this message in the <a href="https://wordpress.com/customize/">Customizer (Theme Options)</a>
        </div><!-- .site-top-content -->

        <div class="site-branding">
            <h1 class="site-title"><a href="https://proyectoyanbal.wordpress.com/" rel="home">Proyecto Yanbal</a></h1>
            <h2 class="site-description">Web Site para realizar compras desde la página web de la empresa</h2>
        </div><!-- .site-branding -->
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menú</button>
            <div class="menu-primary">
                <ul id="menu-primary" class="clear">
                    <li id="menu-item-12" class="inicio menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-12">@Html.ActionLink("Inicio", "Index", "Home")</li>
                    <li id="menu-item-13" class="devoluciones menu-item menu-item-type-post_type menu-item-object-page menu-item-13">@Html.ActionLink("Contáctanos", "Contact", "Home")</li>
                    <li id="menu-item-14" class="contacto menu-item menu-item-type-post_type menu-item-object-page menu-item-14">@Html.ActionLink("Contáctanos", "Contact", "Home")</li>
                    <li id="menu-item-15" class="administracion menu-item menu-item-type-post_type menu-item-object-page menu-item-15">@Html.ActionLink("ADMINISTRACIÓN", "Contact", "Home")</li>
                </ul>
            </div>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->
    <div id="content" class="site-content">


        <div class="hero with-featured-image" style="padding-top: 312px;">

            <article id="post-2" class="post-2 page type-page status-publish has-post-thumbnail hentry">
                <div class="entry-content">
                </div><!-- .entry-content -->
                <footer class="entry-footer"><span class="edit-link"><a class="post-edit-link" href="https://wordpress.com/page/proyectoyanbal.wordpress.com/2">Editar</a></span></footer>
            </article><!-- #post-## -->
        </div><!-- .hero -->

        <div class="container body-content">
            @RenderBody()
            <hr />
        </div>
    </div>
</div>

        <footer>


            <div id="textopie">
                <strong>Yanbal™</strong> <br />
                Teléfono: +51(01)553-8511<br />
                email: [email protected]<br />
                www.yanbal.pe
            </div>
            <div id="imagenpie">
                <img src="~/images/fb.png" />
                <img src="~/images/yt.png" />
                <img src="~/images/tw.png" />
            </div>

        </footer>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)

</body>    
</html>

    
asked by J. Carlos 30.06.2017 в 23:59
source

2 answers

1

Use the BundleConfig.cs to add js and css in each view with @Styles.Render("~/Content/css") and / or @Scripts.Render("~/bundles/modernizr") (look well as you define it to "invoke" them) .

I suggest you keep the structure as close to the "normal" as it should be; *. [cs | vb] html (according to C # or VB) in Views , the * .css in Content (except use Nuget depending on the package sometimes creates Scripts and places its css there) ; good and indistinctly put it "in its place" or as you already have it use BoundleConfig.cs and there declare as appropriate and include them either in your layout or in each view

Success and luck.

    
answered by 01.07.2017 в 00:35
1

The problem is the file and its lack of extension .css

The first line is well done since the file contains its extension: 

<link href="@Url.Content("~/Content/FormatoLayout/global-print.css")" rel="stylesheet" />

Do the same with the others: first edit the file names and then call them correctly.

    
answered by 01.07.2017 в 00:28
Tkinter Label and slow grid Error executing function