In this article I will explain with an example, how to use Static files (Images, CSS and JS files) in ASP.Net Core.
Static files such as Image files, CSS files and JavaScript JS files does not work in ASP.Net Core unless it is placed in proper location with the project and also some settings are set.
 
 
Folder Location to keep Static Files (Images, CSS and JS files) in ASP.Net Core
In the below screenshot, three folders CSS, Images and Scripts have been created inside the wwwroot folder. The wwwroot folder is the default folder provided by ASP.Net Core for storing all the Static files such as Image files, CSS files and JavaScript JS files.
Static Files (Images, CSS and JS files) in ASP.Net Core
 
 
Contents of the CSS and JavaScript JS files
Stylecss.css
body
{
    font-family: Arial;
    font-size: 10pt;
}
 
table
{
    border: 1px solid #ccc;
    border-collapse: collapse;
}
 
table th
{
    background-color: #F7F7F7;
    color: #333;
    font-weight: bold;
}
 
table th, table td
{
    padding: 5px;
    border: 1px solid #ccc;
}
 
#img
{
    height: 80px;
    width: 80px;
}
 
JavaScript.js
function ShowName() {
    var name = document.getElementById("txtName").value;
    var img = document.getElementById("img");
    img.src = "/images/" + name + ".png";
    img.alt = name;
    document.getElementById("trImage").style.display = "table-row";
};
 
 
Allowing access to Static Files in ASP.Net Core
Inside the Startup.cs class, you will need to allow Static files by calling the function UseStaticFiles. Unless this function is called, the Static files will not be accessible.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
}
 
 
Controller
Inside this Controller, simply the View is returned.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}
 
 
View
Inside the View the CSS and JavaScript JS files are inherit and are applied.
When the Submit Button is clicked, the ShowName JavaScript function is called which displays the Image from Images folder using the value from the Name TextBox.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <link href="~/CSS/Stylecss.css" rel="stylesheet"/>
    <script src="~/Scripts/JavaScript.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>Name</td>
            <td><input type="text" id="txtName"/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="btnSubmit" value="Submit" onclick="ShowName();"/></td>
        </tr>
        <tr id="trImage" style="display:none">
            <td colspan="2" align="center"><img id="img" alt=""/></td>
        </tr>
    </table>
</body>
</html>
 
 
Screenshot
Static Files (Images, CSS and JS files) in ASP.Net Core
 
 
Downloads
Download Code