in a ASP.net C# application
I have a Checkbox with a custom css.
the Css file is:
<link href="css/default.css" rel="stylesheet" type="text/css" />
the check box
<input id="boxcheck" runat="server" type="checkbox" checked="checked" class="customCheckbox" onclick="ChangeSett();"/>
Everything works correctly.
But when I put it inside an update panel. The style is lost when I do a partial postback.
Thanks for any help
I had similar problem.
I solved it moving css <link .. from the <page> to the <header>.
Since I use a MasterPage and I don't want the link in all pages, I found useful putting a ContentPlaceHolder in the MasterPage's Header
<head id="Head1" runat="server">
...
<asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server"/>
</head>
and then the link inside the desired page:
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server">
<link rel="stylesheet" type="text/css" href="CSS/my.css" />
</asp:Content>
Related
I have an large existing ASP.NET WebForms application. This application has a masterpage who manager security, navigation, ...
Pages developped are in a ContentPlaceHolder.
I would like to develop new pages in JS with web components. To use a web component on a page, it must be imported (<link rel="import" href="...">). This import must be on the <head> part of the page. In my case, the <head> is on the master page. So I have to import all the existing web components in the master page to be able to use them.
It does not sound like a very good idea.
How can I do it otherwise ?
Asp.Net lets you place ContentPlaceHolder in head tag. You can load the web components required by the page instead of loading them all in Master Page.
Master Page
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cpHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cpBody" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Web Form
<asp:Content ID="Content1" ContentPlaceHolderID="cpHead" runat="server">
<link rel="import" href="...">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpBody" runat="server">
</asp:Content>
Your HTML will look like
<html>
<head>
<title></title>
<link href="..." rel="import">
</head>
<body>
</body>
</html>
You would normally use RegisterClientScriptInclude. This will add the script file to the top of the page, but not in the <head>.
ClientScript.RegisterClientScriptInclude("myScript", "myJavaScriptFile.js");
If you really want it in the <head> you need to use a HtmlGenericControl
HtmlGenericControl genericControl = new HtmlGenericControl("script");
genericControl.Attributes.Add("type", "text/javascript");
genericControl.Attributes.Add("src", "myJavaScriptFile.js");
this.Page.Header.Controls.Add(genericControl);
It does not matter where you place this code (Master, Page, User Control). Aspnet will ensure they end up in the right place client side.
Iv'e got a content page with a link to a style sheet which I want to be specific for that page , i.e. I want the design to be specific for that page when it loads and takes its place in the contentplaceholder on the main page.
IN MY CONTENT PAGE :
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
</asp:Content>
IN MY MAIN PAGE :
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
MY STYLE SHEET ~/Styles/StyleSheet1.css just for example I'll give this id to some table in my content page.
#defualt_tbl
{
background-color:Gray;
}
<table id="defualt_tbl">
The table does not become gray , when I click viewsource in the master page the link is present in the head section.
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
You can only use the ~ root specifier in server controls, the browser doesn't understand that URL, and doesn't know where your application root is either even if it would.
Put runat="server" in the link tag, or use an URL that is relative to the site root:
<link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
I'm not sure you can use the tilda ~ for the path in the link. I think the tilda(~) is a .net shortcut, and since your just rendering html the browser won;t know where to look.
found it !
but i belive your answers work as well .
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href='<%= ResolveClientUrl("~/Styles/StyleSheet1.css") %>' rel="stylesheet" type="text/css" />
</asp:Content>
I want to add a version number to my js files.
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
This renders as
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
[Standard asp.net 4 web applciation]
Can anybody help?
Put it inside PlaceHolder control because link in the title not included in the form tag so no parsing will occur to it as following
<asp:PlaceHolder runat="server">
<link href="css/reset.min.css?v=<%= App.Golbal.VERSION %>" media="all" rel="Stylesheet" type="text/css" />
</asp:PlaceHolder>
As Dante suggests above, maybe change
<%= App.Golbal.VERSION %>
to
<%=App.Golbal.VERSION%>
or
<%=App.Global.VERSION%>
and try that.
Alternatively, like William suggest, set id and runat=server on the link element and apply the value in the server script/code behind.
<link id="lnkCSS" runat="server" media="all" rel="Stylesheet" type="text/css" />
and the server script/code behind, something like
//might need HtmlLink lnkCSS = FindControls("lnkCSS")`
lnkCSS.href = "css/reset.min.css?`v=" + App.Global.VERSION;
I've had similar issues before the way to get around it is make the link an asp:hyperlink and build the link in the code behind and then assign the link to the NavigateURL of the hyperlink.
Can you try removing the white space in "<%= App.Golbal"?
Btw, Global is mispelled :)
I have following code structure, where i am trying to change the css file href during runtime. I also have the Update Panel, Script Manager in the page.
It looks like that CSS file is not getting changed/loaded by the browser. I am not able to understand why?
<head>
<link runat="server" id="link1" type="text/css" href="TOBE SET ON RUNTIME.CSS"/>
</head>
//Code to change the stylesheet on page load
link1.Attributes["href"] = GetCSSFileName(this.UserId);
Thanks
Change your head section to have ID and RUNAT="server" attribues
<head id="Head1" runat="server">
<link runat="server" id="link1" type="text/css" href="TOBE SET ON RUNTIME.CSS"/>
</head>
You can set CSS stylesheet from codebehind like this
link1.Attributes.Add("href", "mycustomstyle.css");
I have a page called test.aspx and in that page, I have the following link:
<a href="../help/default.aspx?height=100&width=500"
class="thickbox">
<asp:ImageButton ID="ibtnHelp"
runat="server"
ImageUrl="~/images/needhelp.jpg" /></a>
When I click on the link, it opens up the default.aspx page under help in a new window instead of the thickbox.
In my masterpage, I have the following in the head for the thickbox:
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="../js/thickbox.js" type="text/javascript"></script>
<title>Details</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/RoundDiv.css" rel="stylesheet" type="text/css" />
<link href="styles/thickbox.css" rel="stylesheet" type="text/css" />
</head>
If I put it the script directly on the test.aspx, it works fine, but not when I have it in the masterpage.
First thing to do is ensure the thickbox.js file is being served correctly when linked from the masterpage. Either use firebug or fiddler2 to establish if the file is requested and the response is a 200.
I suspect you need the following to reference thickbox...but its been ages since I had to hack around with aspx..
<script type="text/javascript" src="<%=ResolveUrl("~/js/thickbox.js") %>"></script>