Add custom markup to .NET Theme .skin file? - asp.net

I am new to .NET Themes. I would like to display different static HTML content in various places using Themes of my Web Application.
My first attempt was to use the ASP Literal control as follows:
In .aspx page:
<asp:Literal runat="server" SkinID="HomeContentFooter"/>
and in my .skin file:
<asp:Literal runat="server" SkinID="HomeContentFooter">
<div>
<!-- I hoped to put some custom static markup for each theme here -->
</div>
</asp:Literal>
This produces the following error:
The control type 'System.Web.UI.WebControls.Literal' cannot be themed.
So is there another approach for this using themes?

Literal control is rendered as plain text on your html, that is, when you have <asp:Literal ID="id" runat="server">Hello World</asp:Literal> you will get just Hello World on client. Since skin files are used for setting properties of elements and literal does not have style related properties or any properties or tags at all, it makes sense that it cannot be themed.
You can use asp:Panel instead, you customize it in your skin file and it will be rendered as div.

Related

Add to an aspx button an css id

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 ;)

Printing a string from a resource file outside of an asp control

I have a resource file in the App_GlobalResources folder and i would like to print some of the string in things like the alt text of images and the title of a href links. I know this can be done using asp.net controls for asp:Image and asp:Hyperlink then print the striong with the <%$ but what I would like to do is use the normal HTML a href and img tags and then print the resource string in that. Can anyone tell me how to accomplish that?
yes , using
<img src="..." runat="server" id="myUniqueID" />
can be accessed in code-behind just like <asp:Image /> would be
most HTML elements with runat attribute and a unique id can be accessed from the viewstate just like an asp: element would be
Use CSS Media Selectors to distinguish between screen CSS and print CSS.
An example for hyperlinks is given in this article. This may not work for all browsers, though.

ASP.NET localization translating HTML Content

I am localizing an ASP.NET site using automatic feature , where it creates a local resource file and adds the meta keyword to asp.net controls. However I have a lot of HTML like below
<h2> Welcome to our page"</h2>
<li> Option one </li>
Is there a way to get these automatically translated using the automatic localize utility ?
I tried adding the runat="server" for these tags but to no avail.
Also instead of localizing page by page is there a way to localize bulk - it a directory or a site at one go
thanks
You need to use Localize control for static text - for example,
<h2>
<asp:Localize runat=server ID="WelcomeMessage"
Text="Welcome to our page" meta:resourcekey="WelcomeMessage" />
</h2>
Alternatively,
<h2>
<asp:Localize runat=server ID="WelcomeMessage"
Text="<%$ Resources:WebResources, WelcomeMessage %>" />
</h2>
You can also use syntax such as
<h2><%= Resources.WebResources.WelcomeMessage %></h2>
where Resources.WebResources is strongly typed resource class generated by Visual Studio resource generator. For across page resources, you can create global resources and then refer then using syntax as shown above (meta key will not work for global resources).
See MSDN for more information.

adding runat="server" changes the behaviour of the layout

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.

Multi language: asp:label aganist html:label with asp:Literal

I'm adding multi language support to a prototype web site. The site was developed using html lables which I could multilanguage using asp:literal or I could change them all to asp:labels as shown below.
<asp:label ID="lblAddress1" runat="server" Text='<%$ Resources:lblAddress1 %>' /></br>
<label><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:lblAddress1 %>"></asp:Literal></label>
Web stuff isn't my area of expertise and the guys here don't think there is any advantage one way or the other. What would you choose and why?
<asp:Literal>
Use this control as a placeholder for any text you wish to insert in the page. The output will not be wrapped in any html markup tags (simplest).
<asp:Label>
Use this control in the same way as the , however, This control will wrap the text in html tags. These span tags allow the control to have additional properties (css styling etc.) which can be leveraged.
<label>
This html tag has semantic value in a page and is used to associate form elements with their description.
<label for="SaveLoginName">Remember Me:</label>
<input type="checkbox" id="SaveLoginName" />
A browser can use this info to provide additional accessibility features such as enabling clicking text to toggle checkbox value.
Each of these have appropriate usage scenarios.
Seems to be a matter of taste. Although I think the second option may add a little weight to the page because literals are usually wrapped in <span>

Resources