I have a bit of Jquery code the expands a tree menu and MVC 5 app and when I hard code the style in the view it works. However I want to place the code in the CSS file I have the others in, but when I move it in there it only seems to partially work.
view file the controller is calling:
#model List<OrwellFrontEnd.Models.SiteMenu>
#{
ViewBag.Title = "Simple";
}
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
}
#section Treeview
{
<section class="Treeview">
<div class="container body-content">
<h2>Simple Treeview from Database Data</h2>
<div style="border:solid 1px black; padding:10px; background-color:#FAFAFA">
<div class="treeview">
#if (Model != null && Model.Count() > 0)
{
<ul>
#TreeviewHelper.GetTreeView(Model, Model.FirstOrDefault().ParentMenuID)
</ul>
}
</div>
</div>
</div>
</section>
}
#* Here We need some Jquery code for make this treeview collapsible *#
#section Scripts{
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
}
<p> It is body of Index view that renders in BodyRender.</p>
Style code that is now in ~/Content/Site.css
/*Here We will add some css for style our treeview*/
.collapse {
width: 15px;
background-image: url('../Contetn/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -36px -17px;
display: inline-block;
cursor: pointer;
}
.expand {
width: 15px;
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -50px -17px;
display: inline-block;
cursor: pointer;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
list-style: none;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li {
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
And below is the layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
#RenderSection("Treeview", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
It's probably a mess now as been trying to tinker. It seems to sort of work as if I change with width or padding and other attributes in the Treeview li/ui of the style it does affect the page, but the image isn't displaying when it is in the css file but works fine when I have it in the view directly.
Thanks,
Rob
I doubt you can use "head" in that view - You're editing inside the body already.
You can use the below solution unless you're using a partial view.
In the layout-page, add a new section:
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
</head>
...
Then in your views, you can use the following to add additional css:
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/MyPage.css")" rel="stylesheet" type="text/css" />
}
Update
From the comments, and your updated question, it is clearly a problem with relative paths and/or css.
So, a few fixes:
Only keep one of the links to "Site.css" in your _Layout. I would keep the one with #Url.Content. Also you can remove the code I suggested you to add, since that was not your issue at all (remove from both _Layout and the view).
Possible Wrong relative path:
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
Should, probably, be (if you have "Images" in it's own folder, directly under to project root):
background-image: url('../Images/ui-icons_454545_256x240.png');
If you have the image-folder as a subfolder to "Content" though, this would work:
background-image: url('Images/ui-icons_454545_256x240.png');
Spelling error:
url('../Contetn/Images/ui-icons_454545_256x240.png');
But that will resolve itself if you "correct" the paths.
Remove empty style:
.treeview li {}
It's just not needed.
One last thing, since I noticed you use Bootstrap. If there is a conflict in styles between your css and bootstraps, the bootstrap style will win. For example I suspect that ".collapse" is a bootstrap style, so yours will be overwritten.
To change this you can put your link to "Site.css" after Bootstraps (in the head _Layout). Bootstrap might still overwrite certain things, but at least you have a bigger chance of "winning".
Related
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>
I am working on a razor pages project that needs to view IFC files, so I converted the IFC file into Wexbim files to use the XbimWebUi library.
My problem is when I use the Wexbim file from wwwroot I get this error "Uncaught Failed to fetch binary data from the server. Server code: 404. This might be due to the CORS policy of your browser if you run this as a local file.", so I uploaded my file to Cloudinary website and got a link for it and it works well.
My question is how to do this throughout wwwroot folder without using an external link.
Thanks in advance.
My Code
<html>
<head>
<title>xViewer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="~/Viewer/gl-matrix.js"></script>
<script src="~/Viewer/jquery.js"></script>
<script src="~/Viewer/webgl-utils.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-product-type.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-state.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-shaders.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-model-geometry.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-model-handle.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-binary-reader.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-triangulated-shape.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-viewer.debug.js"></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
canvas {
display: block;
border: none;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<canvas id="viewer"></canvas>
<script type="text/javascript">
var viewer = new xViewer('viewer');
/*viewer.load("~/Uploads/SampleHouse.wexBIM");*/
viewer.load("https://res.cloudinary.com/amostafah/raw/upload/v1623564775/SampleHouse_uacu4j.wexbim");
viewer.start();
</script>
</div>
</body>
</html>
The problem is actually related to Mime Mappings.
All you need is:
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true
});
You can check by accessing the path where you hold the wexbimfiles directly and serving a .png file from that folder. If you get it then the path is fine.
If you get 404 when accessing http://localhost:58802/data/SampleHouse.wexbim, then this is mime type related.
I'm sending an html formatted responsive email to my clients after they sign up from my .net MVC app. My problem is that the picture which in this case is my logo doesn't get centered no matter what css or bootstrap class I apply to it. It looks fine when rendering on a computer or even in another different mail client on ios. The problem seems to be the default mail app. Here is how it is showing. The first picture is how it appears on the mail app and the second picture is how it appears on a desktop which displays correctly. Please note that the white text is the picture. The purple background is just a div that I made purple.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Welcome To Church Musician!</title>
<style>
.header {
background-color: darkviolet;
height: 200px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container{
background-color: white !important;
}
body{
background-color: whitesmoke !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" >
<div class="header">
<img class="img-fluid"src="cid:id1" />
</div>
<hr />
<p>This is a test</p>
</div>
</body>
</html>
I created a custom css button class in my site.css file in an asp.netcore mvc web application. For some reason, this styling does not show up when I try to use it in a cshtml view. I've tried adding the link, and I've tried adding the style to the Layout page, neither of them work? What am I missing?
My site.css file has this custom button class.
.custom-button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
This is what my view looks like.
#{
ViewData["Title"] = "PlaylistBuilder";
}
<head>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<center>
<h2>PlaylistBuilder</h2>
<input type="button" class="custom-button" value="Create Playlist with your top songs" onclick="location.href='#Url.Action("TopSongCreator", "Playlist")'" />
<input type="button" class="custom-button" value="Create Playlist with recently played songs" class="btn" onclick="location.href='#Url.Action("RecentlyPlayed", "Playlist")'" />
</center>
Tried the first comment, still doesn't work. This is what my view looks like now. Do I need to change something in the layout file?
#{
ViewData["Title"] = "PlaylistBuilder";
}
<link rel="stylesheet" href="#(Url.Content("~/css/site.css"))" />
<center>
<p style="font-family:'Arial'; font-size:72px; font-weight:bold">
Playlist Builder
</p>
<input type="button" value="Create Playlist with your top songs" class="custom-button" onclick="location.href='#Url.Action("TopSongCreator", "Playlist")'" />
<input type="button" value="Create Playlist with recently played songs" class="custom-button" onclick="location.href='#Url.Action("RecentlyPlayed", "Playlist")'" />
</center>
That view is inserted into the middle of the body element somewhere. It would malform the HTML to place a head element there, and as such the link doesn't act like you are expecting it to.
In addition, the tilde (~) is relevant to razor's helper, and doesn't mean relative to the project's top scope in normal href attributes. You should still use the helper here.
Remove the <head> element definition and just use the link. Use the helper.
<link rel="stylesheet" href="#(Url.Content("~/css/site.css"))" />
I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/