Ok so I don't know what I am missing here. All I am trying to do is show that my static css file is linking to my index page. I have loaded the dependencies and have it in the startup.cs was hoping someone could tell me where Im messing it up. ALl this should do is turn the h1 in index green The page does load just fine just not changing the color.
Project.json
"dependencies": {
"Microsoft.AspNetCore.Diagnostics": "1.0.0",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
Startup.cs
public void Configure(IApplicationBuilder app, ILoggerFactory
loggerFactory)
{
// Use the Mvc to handle Http requests and responses
loggerFactory.AddConsole();
app.UseStaticFiles();
app.UseDeveloperExceptionPage();
app.UseMvc();
}
Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Index</title>
<link rel="stylesheet" href="~/css/style.css"/>
</head>
<body>
<div id = "test">
<h1>Hello ASP.NET Mvc!</h1>
</div>
</body>
</html>
Style.css
*{
margin: 0px;
padding: 0px;
}
h1{
color: green;
}
Structure of wwwroot
wwwroot
css
style.css
Read this to enable static content:
link
Related
i have to use React component in my MVC project. I found out that is possible by installing some Packages with NuGets. I installed:
-React.Web.Mvc4
-JavaScriptEngineSwitcher.V8
-Microsoft.ClearScript.V8.Native.win-x86 and x64
I tried to follow tutorials online but seem that i miss something important cause the simple string that i want to show doesn't appear.
Maybe is only an error of setting so i leave here the codes and the directory folders. In many tutorials the have a Scripts folder, but i don't cause creating an MVC project with VS put js file in 'wwwroot" so i thougth to use that folder to contains my Component.
Program.cs:
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddMvc().AddRazorRuntimeCompilation();
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
Index.js:
class Index extends React.Component {
render() {
return (
<h1> Hello Jems </h1>
)
}
}
ReactDOM.render(<Index />, document.getElementById("root"))
Index.cshtml
#using SportData.Web.Models;
#using React.Web.Mvc;
#model SportContainer
<div id="root"></div>
<script src="~/js/index.jsx"></script>
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SportData</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/card.css" asp-append-version="true" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script crossorigin="anonymous" src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
[link to directory foldes]
[1]: https://i.stack.imgur.com/VEQom.png
I am trying to include static files resides outside of the wwwroot folder to _Layout.chtml. How to make this happen? For example, I have header.html and footer.html under include folder which is located under the project folder, I create a _Layout.chtml and want to add the header and footer files as partial views? Below is the Program.cs code:
using Microsoft.Extensions.FileProviders; //access files outside webroot
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(#"C:\MyProjects\myprograms\WebApplication1\include"),
RequestPath = new PathString("/include")
});
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
My _Layout.cshtml file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Html.Partial("/include/header")
</head>
<body>
<div>
#RenderBody()
</div>
#Html.Partial("/include/footer")
</body>
</html>
When I start the application, I receive the error message as below:
InvalidOperationException: The partial view '/include/header' was not found. The following locations were searched: /include/header
Please advice! Thanks.
The Html.Partial method is used render the MVC view not the html static file, I don't suggest you use it to render the html. This has no difference between render a MVC partial view and the static html file.
If you want to include some html file inside your layout, I suggest you could consider using Jquery to achieve your requirement.
Like this answer said:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
B is another html.
When I'm adding css classes or changing bootstrap classes on view html in ASP.NET MVC, nothing happens.
CSS stylesheet
.icon {
margin-top: 8px;
border: 1px solid white;
border-radius: 100%;
}
.titleLibrary{
color: gray;
}
View html
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" class="icon" />
</a>
#Html.ActionLink("Library", "Index", "Home", new { area = "" }, new { #class = "titleLibrary" })
screenshot
but when I use style in html everything is fine
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" style=" border: 1px solid white; border-radius: 100%;" />
</a>
If you are not clearing the cache, then this may be a reason for not reflecting the updated CSS style in your Index or any other page. So try to clear the cache and then try to update the style. For clearing cache use Ctrl+F5. This will helps to clear the cache. The another solution, if you are keeping the style.css file separately, then please give the reference link at the top the Index page, then refresh and rebuild the page and try again.
<head>
<link href="~/Content/background.css" rel="stylesheet" />
</head>
Hey Ivan have you made sure to render your styles on your view you are using? For instance if you are using a layout page you usually would render your style bundle or sheet at the head of the layout page.
I'll give you an example
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Project System</title>
#Styles.Render("~/content/site-bundle")
#RenderSection("styles", false)
</head>
Here you can see me render my style bundle. In this case you can instead render your stylesheet you have.
Make sure, If that css file is in the same directory (or folder) as the html page, it's as easy as typing in "style.css" with the name of the css file matching whatever you called yours. I just used style.css to simplify things. However, if the css file is in another directory (say inside a folder called css) you would need to type out the path to it relative to the html document. In this case, you'd type "css/style.css". Generally, it's a good idea to store your css files in a css folder.
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
After compiling the entire asp.net project, when the first time the default.aspx page loads, asp.net compiles the pages into Temporary Asp.Net directory. This takes a long time during which I want to show a loading gif to the user.
Using a javascript on the default.aspx does not work as the page is practically not constructed yet. To get around this I created another page, say startup.html, that loads the splash and loads the default.aspx using windows.location.replace function.
This works but seems kludgy, Is there a better way of doing this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.load {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
background: url("images/loading.gif") no-repeat center center rgba(0,0,0,0.25);
}
</style>
<script type="text/javascript" async>
setTimeout(function () {
window.location.replace("default.aspx");
}, 100);
</script>
</head>
<body>
<div class="load" />
</body>
</html>
I've read a few articles about doing this in earlier previews but none of them works for RC1.
What I'm trying to achieve is that the first request into the URL (regardless of if it's / or /about, etc.) should have the page content rendered by the server-side application and the full markup delivered to the browser.
Once that first request is done the client-side Blazor Web Assembly app should take over.
What I have right now:
LCBlazor.Client - the client-side Blazor app
LCBlazor.Server - a server-side dotNet core 3 app
// MyApp.Server - Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().AddNewtonsoftJson();
services.AddServerSideBlazor();
services.AddResponseCompression(opts =>
{
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseResponseCompression();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBlazorDebugging();
}
app.UseClientSideBlazorFiles<Client.Startup>();
app.UseFileServer();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapFallbackToPage("/_Host");
//endpoints.MapFallbackToClientSideBlazor<App>("/index.html");
});
}
#* LCBlazor.Server.Pages._Host.cshtml *#
#page "/"
#namespace LCBlazor.Server.Pages
#using LCBlazor.Client
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>LCBlazor Prerendered</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>#(await Html.RenderComponentAsync<App>(RenderMode.Server))</app>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Everything else is as-per the default blazor templates (with the RenderTree errors fixed).
The current behaviour is that the app loads, but if I disable JS in my browser I get no content which indicates that the app is still relying on the client-side for rendering.