I'm relatively new to ASP.NET MVC and Razor. We've been modifying and developing based on existing code. Thus, there is a lot of duplication (ugh!). So I started looking at Partial pages and learning about Sections. I followed these tutorials but I'm still a bit confused.
ASP.NET MVC 3: Layouts and Sections with Razor
Various ways of using Shared Layout in ASP.NET MVC
Optional Razor Sections with Default Content
Razor, Nested Layouts and Redefined Sections
I've been able to create Sections with Partials in them. My question is:
While one section will always change upon user selection, I may not want to blow away the content section. I may just want to add a new tab based on the Sub Menu item selected by the user.
The plan is to have a _Layout that contains the _Header and a Section for the SideBar (Sub Menu). Based on the user's selection in the _Header, the Sub Menu list of options will change in the SideBar and the Content will be a container that can contain a Grid when the Home button is selected, or it can contain a Tabbed view for the other buttons.
The Problem
Let's say the user selects Billing from the _Header and then selects two items from the Sub Menu on the left; in the Content section, two tabs should display (one for each item selected in the Sub Menu). Then, if the user selects Reports from the _Header, the SideBar should changed to display the appropriate Sub Menu items for Reports but I do not want the two tabs for Billing to be blown away. Instead, I want to add additional tabs for each item the user selected from the Reports Sub Menu.
Below is the code from the demo, which shows how I put the Partial page code in the Sections. Obviously I'm still confused over the approach that I should take to accomplish the layout I need.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
</head>
<body>
<div id="header">
<h1>My Site Header</h1>
</div>
#if (IsSectionDefined("SideBar"))
{
<div id="sidebar">
#RenderSection("SideBar")
</div>
}
<div id="content">
#RenderBody()
</div>
<div id="footer">
<p>Site Footer - © Santa Clause</p>
</div>
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
#Html.Partial("HomeContentPartial")
#section SideBar {
#Html.Partial("HomeMenuPartial")
}
.CSS
#header {
background-color: #5c87b2;
color: white;
padding: 1px; }
#content {
float: left;
margin: 10px; }
#sidebar {
float: left;
margin: 10px;
padding: 10px;
border: dotted 5px red;
width: 180px; }
#footer {
text-align: center;
clear: both; }
HomeMenuPartial.cshtml
<p>This sidebar has "Home Page" specific content.</p>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
<p>The time is: #DateTime.Now.ToShortTimeString()</p>
HomeContentPartial.cshtml
<h2>Welcome to my Site</h2>
<p>This is our home page.</p>
<p>Not super exciting is it?</p>
<p>Yada, Yada, Yada.</p>
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>
<html>
<body style='margin: 0; padding: 0 50px; font-size: 12px;'>
<div style='page-break-after: always;'>
<h1>H1</h1>
</div>
<div>
<h2>H2</h2>
</div>
</body>
</html>
I can't use page break in HTML format which will be made into PDF, I've tried various ways but the results don't change, when I use the br tag it works but when entering the style page break it doesn't work.
I want to split the page between h1 and h2
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 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".