CSS and JS files not found when Provider Hosted App in hosted on SharePoint Online

Question

Hi,

In my my SharePoint provider hosted app, all styles are working fine, i.e. CSS and JS files are loaded correctly but when I debug/deploy it to SharePoint online, most of the CSS and JS files are not loaded, returns 404 not found error, the reason why all my page styles and functionalities are malfunctioning. Few of them are loading. I have no idea why this is happening. Please help me to resolve the issue.

Edit: sorry I forgot to mention, this app is developed by Asp.Net MVC 5 Razor.

Layout Page:

    @Styles.Render("~/CSSBundle")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/spcontext")

    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.core.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" />
    
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
    
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/Common/DatePickerReady.js"></script>

    @RenderSection("scripts", required: false)
    @RenderSection("Styles", false)

Other Razor Pages Script Section:

            @Scripts.Render("~/bundles/jqueryval")
            <script src="~/Scripts/jquery-3.3.1.min.js"></script>
            <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
            <script src="~/Scripts/Custom_App_Script.js"></script>
            <link href="~/Content/Bootstrap.min.css" rel="stylesheet" />

Bundle Config file:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                      "~/Scripts/respond.js"));

            bundles.Add(new ScriptBundle("~/bundles/spcontext").Include(
                        "~/Scripts/spcontext.js"));

            bundles.Add(new StyleBundle("~/CSSBundle").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                      "~/Content/site.css"));

Answer 1

Hi,

If you want to reference JavaScript file instead of bundle, try with below solution.

<script src="@Url.Content("~/Scripts/yourjsfile.js")"></script>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

While this is more related to MVC question, if you need future help, I would suggest you post in below MVC forum.

https://forums-asp.azureedge.net/1146.aspx/1?MVC

The reason why we recommend posting appropriately is you will get the most qualified pool of respondents, and other partners who read the forums regularly can either share their knowledge.

Thanks for your understanding.

Best Regards,

Lee

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].


Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

Answer 2

Hi Lee,

Thanks for your response. I have tried your suggestions but no luck. I have already posted it to asp forum.