CODEWITHSUNDEEP
javascriptc#iisasp.net-corepublishing
Andrew Simpson
Andrew Simpson

Reputation: 7324

JavaScript not running when publishing my asp.net.core 2.0 app to IIS

I am a newbie here. I have a VS2017 asp.net C# web app. I am not using Angular at this stage. It is a simple site.

I hide divs and when a user clicks on a menu item the div relevant appears and I hide the rest of the divs. I use JavaScript to accomplish this.

In development and IIS Express it works. When I publish to IIS it does not work. The static page displays OK but the menu button do not do anything.

If I press F12 I can see there are no errors. I can also see if I press Network tab that my site.js script does not seem to be loaded.

I looked at the Environment tags (not sure how to see these for release/publish - would love to see a link for better documentation that tells me directly how to use).

In desperation I removed all the environment tags relating to my JS files. I know this is not the correct way to do things, I am just trying to locate the problem area.

To simplify things even further I put an alert("hi") directly into my JS file so it should pop up when I visit the site but it does not.

This is my _Layout.cshtml page:

<!DOCTYPE html>
<html style="height: 101%">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Informed Products</a>*@
                <a id="InformedServices" style="cursor: pointer" class="navbar-brand">Informed Services</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @*<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>*@
                    @*<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>*@



                    <li><a id="HowWeWork" style="cursor: pointer">How We Work</a></li>
                    <li><a id="Pricing" style="cursor: pointer">Adaptive Pricing Service</a></li>
                    <li><a id="About" style="cursor: pointer">About</a></li>
                    <li><a id="ContactUs" style="cursor: pointer">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - Informed Services</p>
        </footer>
    </div>

    @*<environment include="Development,Production">*@
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    @*</environment>
    <environment exclude="Development">*@
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    @*</environment>*@

    @RenderSection("Scripts", required: false)
</body>
</html>

In my site.js file:

$(document).ready(function () {

    alert("b");

});

Update

I have found that on the server, site.js looks OK, but site.min.js is empty. What might be the cause of that?

Upvotes: 0

Views: 3646

Answers (1)

halfer
halfer

Reputation: 20439

It sounds like your minification process is broken for the site.js file. As a stopgap, you could change your website to use the full version, assuming you don't mind people seeing the original source code.

To do this, change the following line to refer to site.js instead:

<script src="~/js/site.min.js" asp-append-version="true"></script>

I would recommend you still look for why minification is failing in your case.

Upvotes: 2

Related Questions