In an ASP.NET project I have the following HTML:
<asp:PlaceHolder ID="plcTitle" runat="server"></asp:PlaceHolder>
<div id="divStrapline" runat="server" />
which are populated with this code:
if (this.TitlePanel != null)
{
plcTitle.Controls.Add(this.TitlePanel);
}
if (this.Strapline != null)
{
divStrapline.Controls.Add(this.Strapline);
}
Are they both the same thing? Is either better than the other? Why?
The <asp:PlaceHolder /> does not generate a div tag.
The PlaceHolder Web server control does not have any visible output and is used as a place holder when we add controls at run time.
Empty div tags (and other container tags like p etc) closed in the opening element itself (as in <div/> instead of <div></div>) might lead to issues in some browsers. Browsers might ignore the fact that it is closed with a / and consider it as a new div and thus break the subsequent mark up.
I once had this issue with Firefox: I was generating html with minidom xml library in python which represented empty div as <div /> - it broke the remainder of my mark up messing up with the subsequent divs. I ended up adding comment nodes to empty elements to make sure that they have a separate closing tag.
Related
I have one div as the following:
<div>
<% # IIF(DataBinder.Eval (Container.DataItem,"Specifiction2").ToString()<> "","")
<div>
I want to hide the above div when "spcefication2" is blank on a .aspx page.
How can I do it?
A couple of things.
You are using IIF, but IIF should never be used. Always use IF instead. The only reason to use IIF is you are stuck with a pre-2008 compiler, and even then, you should use something else.
The easiest way to do what you are describing is via an id and runat="server", you can then either set the visible property (which will mean that the div never gets emitted) or set the style to display:none
If you want to do it inline, per your example, the code is
<div style="display:
<%# IF(string.isnullorwhitespace(DataBinder.Eval(Container.DataItem,"Specifiction2").ToString), "none", "block") %>">
</div>
You are using Eval and container.dataitem, you should look into using ItemType For your grid/repeats, then referencing the value as item.Specification
The above would be much easier if you declared a function in your code behind, taking a string and returning the string none/block.
I have an ASP.NET website that is not passing the W3C XHTML validation.
It doesn't pass validation because I place <div> content into a <asp:Label>, and so the resulting markup looks like:
<span><div>stackoverflow</div></span> <!-- INVALID; DIV INSIDE SPAN -->
However, after replacing all my <asp:Label> with <asp:Literal>, I get errors that <asp:Literal> cannot be nested inside another <asp:Literal>.
I don't really understand how I'm suppose to be solving this, since <asp:Literal> sounds like it would have otherwise been exactly what I wanted.
Is the correct solution to use <asp:PlaceHolder>?
Try this solution
<div id="div" runat="server">
</div>
in code behind
div.InnerHtml = "<div>Example HTML</div>";
Duplicate, answered in: Using Panel or PlaceHolder
Short answer, an <asp:Panel> becomes a <div>, so you want something like
<asp:Panel>
<asp:Label .../>
</asp:Panel>
I have the following HTML code:
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%">
I'm not too familiar with HTML, but form all the articles I've seen, this should work fine. If I show the image in an asp.net image control then it shows fine. However, I want to put text on top of it. Can anyone tell me what I'm doing wrong, please?
By default, you cannot use the ~ in the paths of normal HTML elements. That would only be understood by ASP.NET, but your element is being treated as markup and simply sent to the browser without being processed by the server-side script.
You should either add an id attribute and the attribute runat="server" to your <div> so that it is recognized by ASP.NET, or else you would have to use a relative or absolute URL without the ~ in the path:
<div id="mydiv" style="background-image:url(~/Images/MyImage.jpg);" runat="server">
or
<div style="background-image:url(/Images/MyImage.jpg);">
Your div is not evaluated as a server control, thus the "~" char is not recognized as it should. Not 100% sure, but adding runat="server" should work...
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%" runat="server">
In the case above whatever text you put between the <div ...> </div> would come over the background image.
Also as the runat = server tag is missing it won't even be touched by asp.net. So your url is also wrong by using ~.
I have an ASP:Label control on my page, and I would like to give it some CSS formatting. I know I could give it a CssClass name, however, it seems wrong because I want to give it a specific positioning therefore I'm looking for something more similar to the regular "id" attribute of html elements.
The ID of the label is the one used by the ASP, but in the actual html produced, I get a different ID.
Any suggestions?
Thanks.
The next version of ASP.Net will make it easier to specify an exact clientID for the control. At the moment, you have several options to work around this issue:
Inline Styles
<asp:Label runat="server" ID="MyLabel" style="..." />
CssClass
Just use a css class, as you mentioned in your quesiton. Nothing stops you from making those unique if you have to.
Write a handler to serve your style sheet
When you write your style sheet, leave placeholder in the file for client IDs. Then use an http handler to substitute in the actual rendered IDs on each request. This isn't exactly simple because the style sheet request is separate from the html page request, but it is certainly possible and so worth mentioning.
Use a container
Since a label renders as a span tag, if that span is unique within a specific naming container you can select it that way:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" /></div>
And in your style sheet:
#MyContainer span { /*...*/ }
Use a container + a class
If the container is not specific enough, you can use the class just to narrow it down within that container:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" CssClass="MyClass"/></div>
and in your style sheet:
#MyContainer span.MyClass { /*...*/ }
ASP.net essentially breaks the CSS ID selector. To get around this sometimes I will place this id in the CssClass attribute.
<style type="text/css">
input.first-name { /* style me */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name" />
You can also add multiple class names in the CssClass attribute
<style type="text/css">
input.first-name { /* style me */ }
input.text-input { /* because ie 6 won't do input[type=text] */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name text-input" />
I try as much as possible to not use inline style or to use the additional styling attributes provided by the controls.
Your only options are to use CssClass or inline styles. As ASP.NET auto-generates the ID's of server side controls you should never try to second guess what these will be. It can be a major pain getting Webforms to work with elegant CSS layouts.
ASP.NET 4.0 will introduce the ClientID property that should make it easier to work with ID attributes in the future.
I think you can do something like:
<asp:Label ID+"lblID" style=" [whatever style you want goes in here "] runat="server />
Remember when the control gets rendered, it gets rendered as with the ctrl.etc....
Or if you are doing positioning, can't you wrap the label in a <div>
Yeah - a major headache with web forms - the id is made up of all the contentsections, panels etc that the label (or other control) sits within.
your best bet really is to add a CssClass to the control.
I don't understand it.
The ids of html elements in the master page are changed by the same id but with a prefix and it's breaking the css design.
In the master page I have:
<div id="container" runat="server">
<asp:ContentPlaceHolder ...
...
The above code is rendered
<div id="ctl00_ctloo_container">
...
And the CSS styles are gone obviously.
How do I stop it?
Thanks!
WebForms should only rewrite the ID's of server controls (like <asp:ContentPlaceHolder />, not ordinary HTML element like <div id="container"> without runat="server"
You cannot prevent the framework from rewriting ID's on server controls. You can use class names instead, though.
AFAIK you cannot do this. This is the default behaviour because of the control tree.
If you would like to use CSS then set the CSS class directly, don't depend on IDs, like
<asp:Whatever runat="server" id="whatever" CssClass="whateverClass">
Update: Here is a similair thread, but it won't help on your CSS problem.
Do you need the runat="server" tag? If you do not do anything with the div element in your code-behind, remove it.
I do not need the runat="server" tag and have removed it. Don't know why it was there ... Ids are not changed now. Thanks