Webpage styles disappeared when I deployed my mvc app using IIS

Question

Whenever I debug my web app, it shows like this:

but when I published it using IIS, the styles are gone

this is my BundleConfig.cs

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

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

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

        bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
                    "~/Scripts/knockout-2.1.0.js",
                    "~/Scripts/knockout-2.1.0.debug.js"));

        // 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 StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

this is my page:

@model newInOut.Models.Employees_Master

@{
    ViewBag.Title = "Login";
    Layout = null;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="~/Content/LoginStyle.css" rel="stylesheet" />




<div class="flex-container">
@using (Html.BeginForm("Login", "HR", FormMethod.Post, new { @class = "login" }))
{
    <div class="logo text-uppercase"><span>Kita</span><strong class="logo text-primary">MerX</strong></div>
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)


<table>

    <tr>
        <td>@Html.TextBoxFor(a => a.EmployeeID, new { @class = "fa fa-user", placeholder = "ID", style = "font-size:24px" }) </td>
        <td class="fa fa-user"style="font-size:24px"></td>
        <td>@Html.ValidationMessageFor(a => a.EmployeeID)</td>
    </tr>
    <tr>
        <td>@Html.TextBoxFor(a => a.Employee_Password, new { @class = "fa fa-key", placeholder = "Password", @type = "Password" }) </td>
         <td class="fa fa-key" style="font-size:24px"></td>
         <td>@Html.ValidationMessageFor(a => a.Employee_Password)</td>
    </tr> 

    <tr>
       <td> <button type="submit" value="Login" class="state">LOGIN</button></td>
    </tr>

</table>   

}</div>

I tried following this but it didn't solve it. I used Publish, then in Profile tab, I created a New Publish Profile, then I used Publish Method as File System, put my Target Location in wwwroot folder, then in Settings tab, I used Release. Then in IIS manager, I converted the newly created folder into App, then browsed it.

Check in chrome console tab of network. Is there any error for css file? — Amit Kumar Singh, Aug 17 '17 at 07:47
@Amit, when I refreshed it, it says "Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost/InOuter/Content/LoginStyle.css"." — Kokombads, Aug 17 '17 at 07:55

score 0 · Answer 1 · answered Aug 17 '17 at 07:51

0

Also, you don't seem to have included stylebundle "~/Content/css" on your page. Use @Styles.render("~/Content/css") to include css bundles defined in bundle.config.

answered Aug 17 '17 at 07:51

Amit Kumar Singh

4,393
2
9
22

May I ask where will I put the "@Styles.render("~/Content/css")"? Is it in BundleConfig.cs? – Kokombads Aug 17 '17 at 07:57
On your view page where you have created html – Amit Kumar Singh Aug 17 '17 at 07:59

Webpage styles disappeared when I deployed my mvc app using IIS

1 Answers1