I have a page with some controls, usercontrols etc.
when I change a div from plain <div id="foo"> to a <div id="foo" runat="server">
the layout complete changes.
why is that and how can I prevent it?
I'm using 2.0 .NET framework
Is it because .NET changes my id, which obviously I don't want?
If you're targetting the ID of the div control in CSS and then running the control at server, you'll find it no longer applies the style.
This is because ASP.NET has a built in mechanism (INamingContainer) to ensure than you don't have multiple controls named the same. It does this by adding container prefixes so you end up with:
<div id="ctl00_ctl00_myDivName" runat="server" />
The easiest way around this is to change it from working on an ID to working on a class:
<div class="myDiv" runat="server"></div>
Alternatively, I believe that XHTML requires that Divs have closing tags so use
<div runat="server">Some content</div>
When you add runat="server" to a div, the system automatically generates the ID for it. It's referred to as ID mangling. Unfortunately there isn't much that you can do in the 2.0 framework for divs that I'm aware of (without it being a pain anyway), but in 4.0 we're getting an override... On custom controls though (in 2.0) you can override the ClientID and UniqueID fields. So if you created a MyDiv class that used the div as a base and then created the ClientID/UniqueID fields you should be ok.
Your other option would be to update your CSS/javascript to use the mangled ID. It's fairly static based on the position within the page as ASP.Net uses it to find a control during postback.
Add ClientMode="static" this will make sure your id is not changed to the clientside id for your control.
Related
Is there any way I can access a webpart's properties from withing a repeater's template (or vice versa)?
<div ID="RepeaterWrapper" runat="server">
<cms:CMSRepeater ID="repItems" runat="server">
<ItemTemplate>
<div class="col-sm-4">
<!-- I want to access this div in my code behind or else have it access a property from the code behind-->
</div>
</ItemTemplate>
</cms:CMSRepeater>
</div>
I want to set the inner div's bg color and I can't use classes as the property is given as a hexadecimal color so it would mean a few thousand classes!
Worst case scenario I can do it with some js but would rather a "purer" way of doing it if it exists.
Thanks in advance
Assuming your datasource has that background color in the returned data, once you bind your datasource to the repeater you have access to that within the item templates. Simply use something like this:
<div class="col-sm-4 <%# Eval("BgColorColumnName") %>">
Now if you want to set a value from the actual webpart itself, you need to make sure the property is a public property then you can use something like:
<div class="col-sm-4 <%# YourPublicPropertyName %>">
Are all the items going to have the same color? If its per item, then modify the items you are pulling to include the value.
If this was in portal method you could grab the XML from the Page Template table and get values from it. Since it's purely from code, and it's a repeater, usually you need to store the data somewhere outside the repeater itself (in the items you repeat, or in the current page form data).
If you can access it anywhere from a Macro, then you can use the CMS.MacroEngine.MacroContext.Current.ResolveMacro() to resolve that and get the value.
Can you give us a little more info on where the div BG color would be stored? why it has to be in the repeater itself?
When I create an HTML server control in ASP.NET 4.5 with an ID and use CSS to style that ID, it fails. When I inspect the source of the ASPX page, it shows that ASP.NET has changed my control's ID. In this instance...
<div id="PasswordStatus" class="well well-sm" runat="server">
Current
</div>
...becomes...
<div id="article_PasswordStatus" class="well well-sm">
Current
</div>
Can I then reliably (and with best practices in mind) just create the CSS style for #article_PasswordStatus instead? Or should I create a one-use CSS class for it, something like...
<div id="PasswordStatus" class="well well-sm password-status">
Current
</div>
Preferably, can I still somehow use the original ID I assigned?
Note: I do not want to convert this to a Web server control.
Assuming .net 4 and greater, you can use ClientIDMode. Your HTML would be like this
<div id="PasswordStatus" class="well well-sm" runat="server" ClientIDMode="Static">
Current
</div>
When using Static the ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
Add in the ClientIDMode="Static" option to ensure your client Ids do not change.
Information can be found here.
<div id="PasswordStatus" class="well well-sm" runat="server" ClientIDMode="Static">
Current
</div>
This option forces the control’s ClientID to use its ID value directly. No naming container naming at all is applied and you end up with clean client ids
It's usually a best practice to use classes for css styling instead of IDs. You can avoid problems like this, reuse your css and so on, so that would be the path I'd choose.
ID in asp.net (webforms) can be modified in various ways and I wouldn't rely on that personally.
Having the code below for a button, can I add an id to it so I can add CSS to the button?? Or I can put only a class??
<asp:Button ID="registerLink" runat="server" Text="Create Account">
</asp:Button>
In WebForms, the ID="" attribute of controls is transformed into something of the form ctl0__ctl1__registerLink (where ctl0 and ctl1 are the ID="" values of parent controls). This means the rendered id="" attribute is (generally) unpredictable and cannot be relied upon for styling or Javascript uses.
There are three possible solutions:
Use ctrl.ClientId to get the final rendered id="" attribute value, this works when you want to reference the rendered HTML from a client script on the same page, however it isn't of much use for styling unless it's an inline <style> element.
Use the clientIDMode setting to override how the id="" attribute is rendered. This requires ASP.NET 4.0 or later. You can set this in web.config, in your <%# Page declaration, or on each element. Set it to Static so the value is verbatim (with exceptions).
Implement your own Control Adapters that override how attributes render.
Ditch WebForms and use ASP.NET MVC ;)
Situation: I have been creating webpages in HTML5/CSS3 & Javascript using Sublime 2 text editor for a year, however a college course now requires me to use Asp.Net and Visual Studio 2010. I do not use the designer because I am proficient at doing things by hand, however I find that writing asp: inside every element is time consuming and causes syntax errors when applied to some HTML 5 tags and not others.
Example HTML 5: <button id="btn" type="submit" value="Button"/>
Example Asp.net: <asp:Button ID="Button1" runat="server" Text="Button" />
Question: Can the asp: portion be omitted without effecting anything or is it required for IIS or the C# back-end functionality? What about runat="server" can that be omitted?
Google has come up dry regarding my inquiry, so any help is appreciated.
you simply cannot remove either of the two
but hear me out why, because I have a feeling you are not familiar with ASP and therefor are mistaking the meaning of the asp: and the runat="server" syntax.
first: runat="server"
this property on an element, tells the the compiler that this is actually a server side control
so a <button/> is not the same as an <button runat="server"/>
the first one is pure html, while the second one is a control, which can be bound to on the server side. .Net will give it a clientID (not to be mistaken by the ID you have to give it yourself).
second: asp:
this is a prefix, on certain elements, that tells the compiler these are ASP controls (the default controls given by the ASP.net framework). These include Buttons, TextBoxes, DropDownLists, ...
do not mistake 1 of these with a html element.
an <asp:Button id="myAspButton" runat="server"/>
is not the same as a <button id="myHtmlButton"/>
the first, is a server side control, which can be bound to (see it's runat="server" attribute), and this control renders to the browser as a <input type="submit"/> for example.
you could alter the rendering of the asp.net button class to make it return something entirely differnt if you wish.
and you are also not limited to using asp.net classes.
you can create your own controls, and put them in a custom created library
you could give those your own prefix.
if I created such a custom control, I could register a prefix for it in the web.config file,
and thus I could create a custom button extending from the original one (but with a default label in front...
<myc:CustomButton ID="myButton" Text="myButton" Label="myLabel" runat="server"/>
which could render into:
<label>myLabel</label>
<button ID="*******">myButton</button>
the asterisks are symbolizing the Unique ID it will get from the .net framework
if you want to know more on custom controls, or extending default controls
here is a step by step explanation to create custom controls, or extend from a TextBox control.
it also shows how you add a custom prefix for your controls (in the this case 'cc')
you can find more info here
The runat="server" part is required to tell .NET that it will have to render a button there (which will contain .NET specific ID for processing upon POST). Not too familiar with web forms (I started with MVC), but I would assume that the asp: part is to help distinguish between server controls and standard HTML markup.
Why not try removing it and if it breaks something, then you know it's needed. For instance if the button doesn't show up after removing it, then obviously the .NET markup parser needs it to be there in order to know that it is a place holder for a server control.
I have a div element in my HTML. I added a id and runat attributes to the element:
<div id="footer" runat="server">
After rendering, viewing the HTML shows:
<div id="ctl00_footer">
However, I cannot access it from the page's .aspx.cs code:
footer.InnerHtml += "test";
How do I access that element from the C# code?
you can use FindControl("footer"), and cast it to HtmlGenericControl.
HtmlGenericControl footer = (HtmlGenericControl)FindControl("footer")
One of the reasons can be that you don't have designer file for that page. So you can't access element by it's ID.
Just add class with name [your page name].aspx.designer.cs, open it, remove all code, save it, go to your view and click save - designer must generate code of all elements from your view. After this you can access element by ID.
There should be no problem accessing <div id="footer" runat="server"></div> the way you are doing. Strange though, my generated markup keeps the div id unchanged as footer.
Make sure you don't have any compile errors, and that you can access other elements running server-side in the same scope you are trying to access this div.
You need to set the ClientIDMode property of the page or control to Static:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
This will prevent the "ctl00_" from being appended to the ID which is what is causing you the problem.
I have encountered this problem before. You may have the target div inside another div that does not have the runat="server" attribute. All nested divs should have the runat attribute in order to be able to access the inner elements.
<div id="divContainer" runat="Server">
<div id="yourDiv" runat="Server">
</div>
If you're going to code ASP.NET and you want to access the control from the server-side, you may as well use the provided controls.
Use a Panel instead of a Div. The ASP:Panel control renders as a div in the generated html anyway. The Panel doesn't have a .Text property, but you can add controls to it from code-behind (such as a Label or a LiteralControl.
Is there possibly a chance that the page was copy/pasted when being created? If so, make absolutely sure that all references to the old page are changed to the name of the new page. I've done this before within the code at the top of the ASPX page, as well as the namespace of the designer page.
I had the same problem and found out that due to a "copy" and "paste" my function had a "static" declaration.
Removed it since static functions can't access non-static identifiers and it was fixed.
I have the same issue.
My solution was to have 'ID' instead of 'id' for the div element (i.e. the casing was the reason).