I have a master page and a content page for my ASP.NET web forms site. Both pages have style blocks.
The following is from my content page:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css" runat="server">
.scroll td:nth-of-type(1)::before {
content: "Column Name";
color: black;
} ...
And the master page:
<head id="Head1">
<style type="text/css" runat="server">
...
</style>
...
<asp:ContentPlaceHolder runat="server" ID="HeadContent" /> ...
The rendered HTML only applies the content style block under two conditions: page refresh and disabling jQuery Mobile. Everything else seems to make no difference, and I have been unsuccessful at getting the style block to apply changes on the initial page load on the content page without disabling jQuery Mobile.
The style block is present at all times, but is not normally applied. I have tried to move the style to the body. I have deleted the master page's style block. I have experimented with runat="server". Also, the order of the content placeholder in relation to the master page's style block doesn't matter. Style from the master page is always rendered. I have compared the rendered source code before and after a page refresh and the rendered HTML pages pre and post refresh are identical despite the fact that only the refreshed page works as anticipated.
Is there something that I'm missing? I am using ASP.NET v4.5 Web Forms and Visual Studio 2012 update 4?
Related
I am struggling to implement an external CSS file in the content pages of my asp.net WebForms application. The content page thus have a master page (Site.Master) in which I included the following code in the head section:
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
<link href="Styles/pokerpsych.css" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
The asp:ContentPlaceholder tag thus contains the link to the CSS file that I want to apply to all pages. The styling in this link is thus successfully applied to the content in the body tag of the Site.Master page however the styles specified in this file is not applied to IDs that are specified for content pages. In one of my content pages I have for instance the following code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PostHand.aspx.cs" Inherits="PokerPuzzleWebforms.PostHand" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<header>
<h1>Post your hand here</h1>
</header>
<main>
<label runat="server" for="titleBox" id="titleLabel" >Title</label>
<input type="text" id="titleBox" name="titleBox" runat="server" />
</main>
</asp:Content>
I am thus trying to apply styling to the label for the textbox (id="titleLabel") although I have not been successful.
I have validated the CSS file and there seems to be no errors. I have also tried to override the pokerpsych.css with another external CSS file by adding the following code in the content page:
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<link href="Styles/posthandstyle.css" rel="stylesheet" type="text/css" runat="server"/>
</asp:Content>
I also tried embedding a style tag within the asp:Content tag although this was not successful. I am however only able to apply the styles to the id when I make use of inline styles although I would prefer to include an external file to apply the styles.
Below is the CSS file (pokerpsych.css):
body {
}
#test{
color:red;
}
#titleLabel {
color:red !important;
margin-right:100px;
}
From user1429080's comment:
This is probably caused by dynamic ID handling in Web Forms. The ID of the textbox in the rendered HTML is likely different from just titleLabel. Check by View source on the rendered page.
The easiest workaround might be to use class-based CSS and refer to the correct class on the control in the ASPX page instead of the IDs.
Update
I had the syntax incorrect ~/Styles/Default.css needed to be /Styles/Default.css
I have a CSS page linked to the master.
Now I created my Default.aspx page that uses the Master Page
In Default.aspx
<asp:Content ID="ContentHead" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" runat="server" href="~/Styles/Default.css" type="text/css"/>
</asp:Content>
<asp:Content ID="ContentBanner" ContentPlaceHolderID="banner" runat="server">
<div id="banner">
<img src="/Images/Banners/banner.gif" />
</div>
</asp:Content>
Default.css
#banner
{
background-color:#FDFD82;
}
In VS I see the background color of that div correctly but when I load it in IE it doesn't show.
If I code the style into the div section and not CSS it works.
What I'm I missing here?
visual studio reloads the style sheet, but the browser doesnt, it caches it once and uses it unless you reload it.
so, either press Ctrl + R in your browser to refresh it and have it reload all the resources, or use a trick which will make the browser reload the style sheet every time:
<link rel="stylesheet" runat="server" href="~/Styles/Default.css?<%=DateTime.Now %>" type="text/css"/>
have a look at the link, i appended a query string with the current time. the time changes always, and it makes the browser think its a different sheet, and reload it every time.
I have one master page and several content pages , I need to put a form tag inside a master page to handle sending data from my html elements and do this for my content pages as well .but I need to understand what is the best way to structure for such this scenario and what would be the effect of form tag of master page on content pages ? is it possible to put form tag in content pages when the master page has this tag inside itself ? I appreciate if I have in detail explanation ?
The <form runat="server"> element lives in the master page by default when you add a new one to your project; all child pages are implemented using ContentPlaceHolders.
For example, the master page: -
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
You can have as many ContentPlaceHolders as you need (often only one is needed though). If you then add a "child page using master page", the page-specific content is added inside the relevant <asp:Content> element - these are added by default once you have specified the master page to use when adding a "child page using master page": -
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!-- your markup, controls etc.. -->
</asp:Content>
Have a read of the MSDN docs for more - http://msdn.microsoft.com/en-us/library/aa581781.aspx
I have a master page and two content pages that uses the master page for layout and design. I have 2 css files for my master page. Now what I want to do is that when I run first content page master page uses the first css file and when I run the second content page it uses the other one. Any suggestions about how should I do this .
First off, this should not be your normal approach unless you are doing something unusual. The whole point of using a common master page is so that you can easily have a common look and feel across your website.
But you can do it a few ways. One way would be to put a placeholder in your master pages <head> section. Then create content for that placeholder in each content page that includes the appropriate css file.
You can use a ContentPlaceHolder in the master page, and inside the head to change the css differently on every next page, or just ignore it to keep some default.
Here is an example:
<head runat="server">
<asp:ContentPlaceHolder ID="styleHolder" runat="server" >
<link rel="stylesheet" type="text/css" href="default.css">
</asp:ContentPlaceHolder>
</head>
<body>
and inside on the page with the different css, just include the the PlaceHolder and change it.
Question is pretty well stated in the title. Normally I would use <link... /> to reference my CSS Sheet but since I'm using a master page I don't have access to the Head Tag so how do I reference a specific CSS sheet on my ASPX page. I tried using <%# Import Namespace="Style.css" but no luck. Thanks for the help.
Just add a CSS ContentPlaceHolder with a default value in it.
Basically, the CSS file you specify as default will be included unless you override that placeholder with an tag from a child page.
Your Master Page should look something like this.
<head>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/master.css" type="text/css" />
</asp:ContentPlaceHolder>
</head>
Then from any pages using that Master Page, you can simply override that with a different stylesheet.
On (example) AboutUs.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="Stylesheets" runat="server">
<link rel="stylesheet" href="/css/Style.css" type="text/css" />
</asp:Content>
If you want to add a CSS stylesheet to any ASPX page, you should use PlaceHolders.
Master page: (in the section)
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
ASPX Page:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
// add your link here
</asp:Content>
just drag your style sheet to your master page.aspx and it will work for all your other forms
You have 3 possible solutions:
Add your link to the head tag of the master page's markup. If you do so, all the pages using the given master page will automatically use your css file.
Use a ContentPlaceHolder in the head tag of your master page. You can use the ContentPlaceHolder at your pages referencing the given master page and you can add your link tag inside the ContentPlaceHolder tag in the markup.
You can add your link tag using Javascrip/jQuery functions.
Although I went the code behind route below in my Page_Load event (VB), I'll give the correct answer to A.K as it seemed to answer the question better but just didn't suit my specific case.
Dim link As New HtmlLink()
link.Attributes.Add("href", Page.ResolveClientUrl("../Css/Generic-Form2.css"))
link.Attributes.Add("Type", "text/css")
link.Attributes.Add("rel", "stylesheet")
Page.Header.Controls.Add(link)
Append the link tag to the head using DOM manipulation.