I am working on a MVC2 site and am having issues getting my objects on my views to inherit the css classes.
Here is my helper object and CSS that is saved in the Site.css which is linked in the master page.
This also works fine if I put the CSS in a tag on the masterpage.
<%= Html.ListBox("ExpenseItems", (System.Web.Mvc.SelectList)ViewData["ExpenseDefinitions"], new { #class = "optionlist" })%>
.optionlist
{
width:100px;
height:100px;
}
Browser HTML:
..
<link href="../Content/Site.css" rel="stylesheet" type="text/css" />
..
<select class="optionlist" id="ExpenseItems" multiple="multiple" name="ExpenseItems">
<option value="1">Test</option>
</select>
Figured it out... Can't apply the style to the list.
Some reason, you need to apply it to a div then apply to the control in CSS.
example:
CSS:
.optionlist select
{
width:100px;
height:100px;
}
<div class="optionlist">
... Lisbox
</div>
when you link your css file that way, and if you are browing in in a page with a url like this http://yoursite.com/MyPage/Content/Article of course the css file will not be found since it goes this way.
css file mapped in `../Content/Sites.css`
Page is `/MyPage/Content/Article`
css real content is placed in `/Content`
when the parser looks for the css it looks in `/MyPage/Content/Site.css`
which is not where it where it is.
My suggestion is add a base url to your css link
<%
string baseUrl = "http://" + Request.Url.Host + (Request.Url.Port != 80 ? ":" + Request.Url.Port.ToString() : "");
$>
<link href=<%=baseUrl%>/Content/Site.css rel="stylesheet" type="text/css" />
Don't put " in href of the link tag
Related
What i'm trying to do is change the theme of the application using a check box that is populated as dark or light from the server's session.
I know the theme (Style Sheet) can be changed with JavaScript but that leads to loading the default Bootstrap Style Sheet then the dark one which causes the screen to flicker.
What I need to do is return the css from the server thought a post method like below.
<div>
<form id="theme-switcher" method="post">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" asp-for="IsDark" id="theme" />
<label class="custom-control-label" for="theme">Theme</label>
</div>
<button id="change" type="submit" class="btn btn-primary">Change</button>
</form>
</div>
The code above can be in a view component or a partial view but I can not seem to find a way to post the from.
_Layout.cshtml
#{
bool isDark = HttpContext.HttpContext.Session.GetBoolean("IsDark");
}
<!-- Custom styles -->
#if (CultureInfo.CurrentUICulture.Name == "ar-LB")
{
if (isDark)
{
<link rel="stylesheet" type="text/css" href="~/css/site-dark-rtl.css">
}
else
{
<link rel="stylesheet" type="text/css" href="~/css/site-rtl.css">
}
}
else
{
if (isDark)
{
<link rel="stylesheet" type="text/css" href="~/css/site-dark.css">
}
else
{
<link rel="stylesheet" type="text/css" href="~/css/site.css">
}
}
What I've tied so far is partial views and view components but as far as I've found partial views can not have code behind with OnPost (when adding #page to the partial view I get view data can not be null although the model and the view data are set) and view components can not call methods.
What approach should I use ?
You can post to different routes, regardless of where you currently are. So assuming you have a Razor page SwitchTheme.cshtml with a code-behind that switches the theme on POST, then you can adjust your <form> tag to post to that page:
<form asp-page="/SwitchTheme" method="post">
<!-- … -->
</form>
Note the use of the asp-page tag helper to generate the action attribute with a link to the page.
For changing things like the design, which doesn’t directly have some page content you want to display, you could also use a simple controller that makes the change and then redirects back. Then, you would use the asp-action and asp-controller tag helpers instead:
<form asp-controller="Utility" asp-action="SwitchTheme" asp-route-returnUrl="#Context.Request.Path" method="post">
<!-- … -->
</form>
public class UtilityController : ControllerBase
{
[HttpPost]
public IActionResult SwitchTheme([FromForm] bool isDark, string returnUrl)
{
// switch the theme
// redirect back to where it came from
return LocalRedirect(returnUrl);
}
}
I would like my default.aspx to use masterpage but have a different body than the rest of my webpages is this possible? Basically I want my default.aspx to have a background image for the entire page but still use the masterpage because I have menu and things I would like to use on that page as well. Is this possible?
You can define the styles and everything for a particular page in Content Page and not Master Page. In your case, if you want a separate styles and background for default.aspx, you can define those styles in default.aspx page.
inside of default.aspx do
<style>
BODY { background-image: url(....image here ....);}
</style>
I know it is not the nicest pattern but... cmon, masterpages
You can inline it on default.aspx
<style>
body{
/*Background stuff here */
}
</style>
or have an if on your master page
#if(currentpage == "home")
<div id="background">
</div>
#endif
or
#if(currentpage == "home")
<body style="background-stuff-here">
#else
<body>
#endif
Put these lines in you master page head section
<head>
<link type="text/css" rel="stylesheet" href="/styles/common1.css" />
<script type="text/javascript" src="/scripts/common1.js"></script>
<asp:contentplaceholder id="ExtraStylesAndScripts" runat="server" />
</head>
And these lines to you default page
<asp:content contentplaceholderid="ExtraStylesAndScripts" runat="server">
<link type="text/css" rel="stylesheet" href="/styles/extra1.css" />
<link type="text/css" rel="stylesheet" href="/styles/extra2.css" />
<script type="text/javascript" src="/scripts/extra1.js"></script>
<script type="text/javascript" src="/scripts/extra2.js"></script>
</asp:content>
Now you are free to set different page style for different content pages.
You can change background or other appearance in "styles/extra1.css" files.
A very simple solution would be a MultiView and pass in something like an enum object telling the master page what View to display. If you in the future need to add a different design for another page you can just add a View.
I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.
So here's the html that I'm using. How can I add the img tag I have also included?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<script type='text/javascript' src='/jquery-11.0.min.js'></script>
<script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Tiles - Justified</h2>
<div id="gallery" style="display:none;">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#gallery").gallery({
tiles_type: "justified"
});
});
</script>
</form>
</body>
</html>
This is the <img> tag that I need to add between the <div id="gallery"> tag:
<img alt="img1"
src="images/thumbs/tile1.jpg"
data-image="images/big/tile1.jpg"
style="display:none"/>
</a>
This is the code I would use to add the html:
HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel
If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:
<div id="gallery" style="display:none;">
<asp:Literal runat="server" ID="MyLiteral" />
</div>
Then, in your code-behind, set
MyLiteral.Text = "<whatever html you want>"
I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.
It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.
To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.
Another approach:
Just add your image itself as a server control directly in the markup.
<div id="gallery" style="display:none;">
<img runat="server" ID="MyImage" Visible="False"/>
</div>
In your code-behind if you want to display it,
MyImage.Src = "/image url";
MyImage.Visible = true;
How can I apply CSS to a Web Content Form that is using a MasterPage?
I can't apply Class="" anywhere. :S Any help?
in Web Controls the attribute is CssClass and not Class as it is in HTML Controls
<style type="css/text">
.myClass { font-size: x-large; }
</style>
then
<asp:Label ID="myLabel" runat="server"
CssClass="myClass" Text="This is a WebControl Label" />
as opposed to:
<span class="myClass">This is a HTML Lable</span>
Why can't you?
CSS works in content pages the smae way it works in regular pages.
If you're actually asking how to add CSS rules for the content page, you need to add a placeholder in the HEAD element in the master page, then add CSS rules or files to that placeholder in the content page.
I've never had an issue with this. If it's not rendering, then make sure your path to your CSS file is correct.
Be sure you stylesheet is referenced properly in your web content form.
<link id="link1" rel="stylesheet" href="myStyleSheet.css" type="text/css" runat="server" />
I have an APS.net app (C#) with several pages that use the same MasterPage. In that page, I have included a couple stylesheets like so:
<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>
These styles apply correctly to all content that is in the actual .master file (page), but are not applied to any pages that use the Master page (for instance default.aspx uses that master page and has a Content placeholder in it).
If I add these lines in each individual page:
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
Then the styles show up as expected... but it was my hope that I could include them in the master page so that I didn't need to include these references in each subsequent page too.
Because these files are not located physically in the same project (they are shared between several apps), i cannot just include them as an ASP.net theme that would be applied to all pages.
Update
In order to rule out the file locations problem, I used the absolute URL for these stylesheets...
<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
That way, no matter where it is read from, the file can be located. This still exhibits the same behavior.
To me, it looks like the masterPage is rendered with the CSS styles (because they're in the same file) and then the child/calling page is rendered without the CSS styles (because they aren't in that file, they're in the masterPage) and then those two files are combined together (as opposed to combining them together first and THEN rendering the style elements for the combined pages). Adding to this belief was my previous example of adding the include for the CSS file in the calling page itself, which will cause it to display the CSS correctly.
You can view the source of this file, and in the head section, you can see the CSS styles linked correctly, but they aren't applied to any elements from the calling page while they are applied to all elements in the masterPage.
Is the content page in a different folder that the master? If so, you'll have to get the application relative path to the css files using ResolveUrl in the master page:
<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />
Update: If this doesn't work, then you might have HTML or CSS errors like Lance suggested. Try using the HTML and CSS validators at w3schools.com. If it still doesn't work after fixing any errors, double check your CSS selectors with the rendered HTML as Steve suggested. ASP.Net's generated IDs have bitten me more than once.
What about this?
<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.
As far as rendering. The rendering is done on the client machine's browser. To the browser it has no idea the html is generated from multiple documents.
I would make sure your HTML and CSS are correct.
On a side note i have noticed the last week or so that VS2008 keeps messing my css stylesheets up, doing really random things like moving text around. However, I think this might just be something on my machine. Just something to check.
Here is some sample code I checked this just to make sure and this works.
Head of Master Page
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
Content Place Holder
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="something">
Lance
</div>
</asp:Content>
Css in StyleSheet
.something{
color:Blue;
}
The result is "Lance" in Blue in the child page.
Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.
I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.
Unfortunately, this created a further problem for me. My head tag was runat server. My link tags were not.
The resolve url within my link tag would never execute. Instead, the C# code and response.write tags were being encoded and outputted to the page.
Bizarrely, the same technique in a script (non-runat server) tag would work as normal.
To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:
<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>
That worked.
How strange. Somehow, it is all related to the head tag being runat sever.
It looks like you have done it correctly, so your error seems weird and sounds like maybe you've mady a typo in the master page. Try to look at the generated source (view source in the browser) of the two pages, one with the links in the master pages and one with the links in the web page, and compare the paths.
Something like this should work. You should be able to include the css in the header of the master. And then, include a ContentPlaceHolder in the header so if you need custom header stuff in your content pages you can do that. Does that not work?
<head>
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Ultimately you don't want a
<head></head>
tag in your content page, it's possible that is overriding your master page header.