I´ve downloaded tweeter bootstrap (not the bootststrap for MVC) to a brand new MVC4 project, but I can´t make it work.
No errors in browser´s F12 window.
Here is my _layout code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<h1>Hello, world!</h1>
#RenderBody()
</body>
</html>
When the screen pops up, I get a normal Hello, world! body (no bootstrap fonts). My system has the following files:
What may I be doing wrong?
You only included the bootstrap-theme.min.css file and not the base bootstrap.css file. (though you did include the bootstrap.js file)
Related
I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
I've followed every step in this article: https://waelkdouh.medium.com/integrating-blazor-components-into-existing-asp-net-core-mvc-applications-b1a2aec4ac1f
I've created a file named MyFirst.razor in the Components/Pages folder, but it doesn't render when referenced in Index.cshtml as .
Components.Pages/MyFirst.razor
#page "/my-first"
<h3>Current count: #count</h3>
#code {
private int count = 0;
private void HandleClick()
{
count++;
}
}
Views/Home/Index.cshtml
#using LC.BlazorTest.Components.Pages
<h1>Velkommen - blaze up</h1>
<MyFirst />
Index page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BlazorBlazor</title>
<link href="/IMAGE/fav-icon.png" rel="icon" type="text/CSS" />
<link href="/STYLE/Creator/Creator.css" rel="stylesheet" type="text/CSS" />
</head>
<body>
<main role="main" class="pb-3">
<h1>Velkommen - blaze up</h1>
<MyFirst />
</main>
<script crossorigin="anonymous" src="/SCRIPT/Creator/Creator.js" type="application/JAVASCRIPT"></script>
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c237ba9e1f.js" type="application/JAVASCRIPT"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
the tag hasn't changed.
Looks like you are trying to render a Blazor component into an MVC view. As far as I know, it is not that simple.
You may want to use the component tag helper to render Blazor components in cshtml views.
Unfortunately, MVC views are rendered once on the server, so you can not simply just put a component name like with your regular Blazor app.
You can prerender the component (it will remain static), use server-side rendering or client-side rendering (WebAssembly). It may be a little bit tricky tho since you mix multiple rendering styles together. In short, use
<component type="typeof(MyFirst)" render-mode="ServerPrerendered" />
instead of
<MyFirst />
when writing in cshtml files (MVC pages/views).
Checkout render modes or prerendering
I would like to load a _Host.cshtml file in an ASP.NET Core Blazor project (Server side Blazor) based on a header in the request.
For example:
A client connects to example.com and is redirected to a _Host.cshtml file specific for tenant A.
Another client connects to test.com and is redirected to a _Host.cshtml file specific for tenant B.
The _Host.cshtml file looks somehow like this:
#page
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>ProjectName</title>
<link rel="icon" type="image/png" sizes="32x32" href="images/tenantA/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/tenantA/favicons/favicon-16x16.png">
</head>
<body class="something">
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
<script src="_framework/blazor.server.js"></script>
<link href="css/tenantA/site.css" rel="stylesheet" />
</body>
</html>
In the _Host.cshtml file, the reference to tenantA needs to be set based on the above tenant selection from the tenant URL like described above. Is this possible and if yes how can this be achieved?
This is one possible solution ,
In _Host.cshtml
You can redirect to any _HostX.cshtml by a dynamic string logic
#page "/"
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#if(Request.Query["test"].FirstOrDefault()=="1")
{
Html.RenderPartial("_Host2.cshtml",null,ViewData);
return;
}
<!DOCTYPE html>
<html lang="en">
<head>
....
...
..
.
This is tested.
You can modify the condition statement to match your case .
This is the formal structure of my .cshtml file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="~/lib/Hover/hover.css" />
<link rel="stylesheet" href="~/lib/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/lib/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="~/lib/ionicons/css/ionicons.css" />
<link rel="stylesheet" href="~/lib/jquery-toggles/toggles-full.css" />
<link rel="stylesheet" href="~/lib/morrisjs/morris.css" />
<link rel="stylesheet" href="~/lib/select2/select2.css" />
<link rel="stylesheet" href="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />
<link rel="stylesheet" href="~/css/quirk.css" />
<script src="~/lib/modernizr/modernizr.js"></script>
<script>
alert("hello from top");
</script>
</head>
<body style="background:none;">
---Several divs------
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/lib/jquery-toggles/toggles.js"></script>
<script src="~/lib/morrisjs/morris.js"></script>
<script src="~/lib/datatables/jquery.dataTables.js"></script>
<script src="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="~/lib/select2/select2.js"></script>
<script src="~/js/quirk.js"></script>
<script>
alert("hello from bottom");
</script>
</body>
</html>
Actually It's the design provided by our designer, The first alert message from head is popping up successfully so that it's sure javascript is not disabled in my browser, But the last alert is never shown. When I link the external scripts then that also never works either. This is really annoying. I referenced this question and many more in stackoverflow, But nothing solved.
How can I find out what actually happened here ? Is it because some error in previous js files ? OR it's because of old html4 ? There is nothing in my Action method except return View(); statement so that I think it's not necessary to post.
One additional thing is I've rendered one partial view using #Html.Action("...") in body, I think it's not the issue because I tried removing it as well. Please guide me, I am a beginner.
It's seems the same mistake I did some months ago. Your page is started from
<!DOCTYPE ...>
<html ...>
means It clarifies that you are not using any master layout page so any kind of #Scripts.Render as given in the answer you referenced won't work in the current situation. Just a simple solution is set Layout to null at the top of the page like,
#{
Layout = null;
...
}
and everything will work fine.
I have a WPF with a browser control that points to a local HTML file.
I have my .html and .css files in a folder labelled WebResources but it seems no matter how I link the stylesheet in the index.html file the styling doesn't show.
My Solutions Explorer
Solution MyProject
-- MyProject
---- Properties
---- References
---- WebResources
---- Index.html
---- Style.css
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="WebResources\Style.css" />
<!-- Also Tried "<link rel="stylesheet" href="Full\Path\To\Style.css" /> -->
</head>
<body>
<div class="container">
<h1>This should be very big</h1>
</div>
</body>
</html>
Style.css
h1 {
font-size: 10em;
}
If index.html and Style.css are in the same folder you should use:
<link rel="stylesheet" href="Style.css" />
I just tried with a test app and it works well.
Let me know.
Have you tried forward-slashes (/)? html pages usually reference other resources with these rather than Windows-style back-slashes