bircastri
bircastri

Reputation: 2159

Style.Render doesn't works on server side (Razor )

I m building a Wen Application using Razor page (c#). So in my "_Layout.cshtml page" I m build this code:

<!DOCTYPE html>
<html style="height:110%;">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
     @Styles.Render("~/Content/css")    
    @Scripts.Render("~/bundles/modernizr")
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <script src="../Scripts/jquery.min.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet">
    <script src="../Scripts/jquery-ui.min.js"></script>
</head>


<body style="width:100%;height:100%;">

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

    </div>

</body>
</html>

So In my local pc, if I try to open Index Page, I can see this if I try to see Code of HTML page:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eresult srl</title>
     <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <script src="../Scripts/jquery.min.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet">
    <script src="../Scripts/jquery-ui.min.js"></script>
</head>

To see the index page on my local pc, I use this link "http:/localhost:9094/Pagina.aspx"

Now if I try to install this application on the server side, I have some problem of Graphic.

This is the url that I use: "http://url:9094/Questionario/Pagina.aspx"

This is the code that I can see if I see code of HTML page.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eresult srl</title>
    <link href="/Questionario/Content/css?v=5h6Wc7kfOUsqxEEmYLsFbm8C9NAaEGNbzkeznwX1XR41" rel="stylesheet"/>

    <script src="/Questionario/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>


    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <!--<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />-->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <script src="../Scripts/jquery.min.js"></script>
    <link href="../Content/jquery-ui.css" rel="stylesheet">
    <script src="../Scripts/jquery-ui.min.js"></script>
</head>

As you can see on server side the system cannot load css and js file correctly.

Upvotes: 0

Views: 413

Answers (1)

Rahul Sharma
Rahul Sharma

Reputation: 8311

You have to use relative paths all over your app especially when you deploy it to the server (like IIS):

~ won't work within static html code, therefore use:

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet">
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>

Upvotes: 1

Related Questions