I am implementing themes to enable an existing website to be rebranded (logos, colors, images etc.) depending on the requesting URL. I understand how to do that and have got the skins working fine except for some exceptions related to the URLs of images.
Specifically I have a control property that it is not feasible to skin. Prior to implementing themes it looked like this:
<DisplayImageChecked Url="~/Images/BobIcon-Green.png" />
Obviously that will not work with themes. So after much trial and error and reading I am trying to implement it like this:
<DisplayImageChecked Url="~/AppThemes/<%= Page.Theme %>/Images/BobIcon-Green.png" />
However that does not work. The generated html looks like:
<img src="AppThemes/%3C%25=%20Page.Theme%20%25%3E/Images/BobIcon-Green.png"/>
Any pointers in the right direction would be appreciated.
David
Use the binding syntax inside a databound control (watch the single vs double quotes):
<DisplayImageChecked Url='<%# "~/AppThemes/" + Page.Theme + "/Images/BobIcon-Green.png" %>' />
Is there a reason that you can't just dump the images in the same folder as the theme? If you put an image say for example: "image.gif" into the theme folder, then you can simply refer to it directly in your skin.
ImageUrl="image.gif"
This will resolve just fine when you apply this skin on a control in your page. Also much easier than trying to do the dynamic URL thing.
You may also use "Images/BobIcon-Green.png" as Url. ASP will take care of resolving the Url to the directory within your theme.
Here's the right way to go about your task:
Adorn your property with the UrlProperty attribute, this will tell ASP.NET to automatically translate your partial URL into the proper url.
Using "~/AppThemes/" + Page.Theme + "/Images/BobIcon-Green.png" will do the trick, but it's NOT the preferred way because you need to do all the work yourself and it's always good practice to leave all the work to ASP
Related
Whats the right way to change the url for all the images on my site to use a cdn url or not based on a web.config value.
I have this web.config value
<add key="UseCDN" value="1"/>
now my page has a whole bunch of <\asp:image imageurl="RELATIVEPATH" tags.
I want them to point to my machine when "useCDN" = 0 and to cdn.com\RELATIVEPATH when "useCDN" = 1
whats the best way to do this?
For you to implement a cross cutting solution, you have to extend the image control class and override the Render method to use the use the CDN value (if in production).
Or just create a normal ASCX user control and use it. Can't search now but a simple search will get you plenty of tutorials.
UPDATE:
A tutorial to help you do it
For SharePoint, this is the entry you could put into your master page to link to a CSS file.
<SharePoint:CssRegistration
name="<% $SPUrl:~sitecollection/_catalogs/masterpage/dir/file.css %>"
runat="server"
after="SharepointCssFile"/>
Could someone please break down the pieces of this url? I don't understand the following parts of it and how they work together:
<% - I do know this means less than
$SPUrl:~sitecollection/ - Is this some kind of variable? What's ~ for?
%> - I do know this means greater than
CssRegistration is just one of the many ways of referencing CSS files in
SharePoint.
lower than (<) and greater than (>) obvious, and ~ refers to the root of the current web application.
CssRegistration is particularly interesting because you can use After to make sure your CSS is loaded after another CSS such as core.css
The real relevant parameter is name, which in this tag can be used with SPURL, which in turn can be used with sitecollection or site, to refer to the current sitecollection root, or just the current site/web.
Note that SPURL is only available on SharePoint Server, not Foundation.
To support Foundation you can use ProjectProperty, which takes Url or SiteUrl.
So to wrap up, SPUrl is a token available in SharePoint that we can use to specify a resource from a specific location, relative to the current page, web, site and others.
I'm working on a moderately-sized ASP.NET webforms site. URLs for internal links etc. are generally set using syntax like this:
<asp:HyperLink runat="server" NavigateUrl="~/Some/Path/MyPage.aspx" Text="Blah" />
This makes me a little nervous since those links are just strings and I'm worried if I rename or move a page that I'll have trouble chasing down all the references.
Is there some ASP.NET-y way to determine the actual path at runtime? I'm envisioning something like this:
NavigateUrl="<%= GetUrl(typeof(MyPage)) %>"
You can define the method GetUrl according to the logic of your folder structure. Assuming that your namespace does correspond to your Folder Structure a basic definition would be as below
public string GetUrl(System.Type CurrentType)
{
List<string> PathInNamespace = CurrentType.FullName.Split('.').ToList<string>();
PathInNamespace.RemoveAt(0);
return "/" + string.Join("/", PathInNamespace.ToArray());
}
What you really want is a CMS like Umbraco, Sitecore, OpenText etc.
However, you could knock something up yourself with a database and a table with ID and Url columns. Then you could just do:
NavigateUrl="<%= GetUrl("AwesomeLink") %>"
It can go off to the database, look up the ID and fill out the link ready for you. It'd also allow you to change links around without recompile.
It's similar to your idea except that you still need to tell it what link you'd like at some point. It can't guess for you.
One non code solution is to creat custom error pages to link to other portions of your website or insert a search box in said error pages. It's quick, simple and also helps with SEO.
I tried using the IHttpModule and managed to convert the urls just fine,
but all of my images returned path error (all going through the new url directory).
whats the solution?
You need to make sure that you use the "~/" path notation on your images and make sure that they are all server controls with runat='server'. Otherwise the images urls won't get rewritten.
For example if you have a page that gets rewritten from:
/Item/Bicycle.aspx
to
/Item.aspx?id=1234
Then what will happen is that an image reference like this:
<img src='images/something.gif' />
will break. So instead you have to do something like this:
<asp:image imageurl='~/images/something.gif' runat='server' id='img1'/>
Alternatively you can use absolute paths for your images. Or you can push as much as possible into your .css files.
You can try using a URL rewriter such as IIRF.
With IIRF you can use regular expressions to parse the incoming URL as you wish, then send it to the right place.
They have examples built in on how to do all that in the IIRF download.
What's the solution? Use the new routing engine in .NET 3.5 that started in the MVC project and got elevated to stand-alone status. :)
If Keltex's suggestion doesn't solve your specific problem look at ResolveUrl and ResolveClientUrl.
We primarily use an ASP.NET environment at work. Right now I'm building an application which uses "Modules", which is just a UserControl, with its' Javascript right in the control, and a link element to the stylesheet for that control. I want to keep it modular, and would like the style of this control to be independent from the markup/javascript.
So I'm wondering what the preferred method of doing this is? Obviously if I didn't want the "theme" functionality I'm after, I could just use style tags at the top of the control. Right now I have a link element, as I said, and this isn't proper I don't think.
Does anyone have any preferred methods, and if so, what and why?
I considered ASP.NET themes briefly, but the idea of these controls are a little different, I think.
It's basically a shopping cart system. I don't want to get into it all, but we are using a really neat security system, and we don't want to use a premade shopping cart. I'm developing a set of controls that can be dropped on a page, for instance in SiteFinity (which is the CMS system we use) or for any other project we might have. Normally I would compile these into a DLL so we get ACTUAL controls we can drag & drop from the toolbox, then I could use internal "generic" styling and allow for any additive styling someone might want, as well as supplying a few fancier styles as well.
This is the first time I've ever done this, or really the first time anyone in our shop has done this either so I'm kind of figuring it out as I go. I might be pretty far off-base, but hopefully I'm not.
Right, the idea for this is to have a "theme", which is really just a CSS file and a jQuery template. I have them named the same, and have a Theme property on the usercontrol to set it.
When these controls are finalized, I might refactor the javascript to a RegisterScriptBlock on the code-behind, but for now they just in script tags on the control itself.
What prompted this question was DebugBar for IE, giving me warnings that link elements are not allowed inside a div. I don't much care, but after thinking about it, I had no idea how to link to the css file without doing that. I considered very briefly having an 'empty' link tag on the master and then setting THAT in the code behind on Page_Load of the UserControl, but that just seems like ass.
I could use #import I guess but I think link tags are preferred, correct?
It sounds like you're rolling your own theme engine... why not use ASP.NET Themes?
If you're determined to do it yourself, here's some code from the CssFriendly project that may be of interest to you. (I think it should be ok to post the code as long as I cite where it's from.) The .css files are flagged as Embedded Resource and the code below is used to include them as needed.
string filePath = page.ClientScript.GetWebResourceUrl(type, css);
// if filePath is not empty, embedded CSS exists -- register it
if (!String.IsNullOrEmpty(filePath))
{
if (!Helpers.HeadContainsLinkHref(page, filePath))
{
HtmlLink link = new HtmlLink();
link.Href = page.ResolveUrl(filePath);
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
page.Header.Controls.Add(link);
}
}
I think what you're supposed to do is use Page.RegisterScriptBlock to register your script blocks. Best-case you shouldn't have them inline in your ascx inside script blocks. This isn't always possible, but theoretically it's the best way.
Ideally your styles should be separate from your markup as well. Your controls can have classes and IDs, but your style is based on your application and not your controls. Controls can theoretically be used in other applications where you might want a different style.
It depends on how big your app is, and whether or not it's dependent on Themes elsewhere, IMHO.
If you're using a .skin file, or if the majority of the app is also plugged into the theme, you might as well go with the theme.
But if it's just a few styles you need, you're better off to set the stylesheet manually, keep your css file external (inline styles are a PITA and defeat one of the core purposes of css).
In either case, don't forget to set the CssClass attribute on your controls.
To be proper I would have an import.css file - structure the naming of the classes to follow your controls, and import the styles within the header of the document.
If you have a module called "30DayPricingCalc" then you could name the classes/id's:
30DayPricingCalc.css
.30daypricingcalc_main_content
{
...
}
Also if you haven't I would setup a list of generic reusable styles to save you room. Since elements will allow multiple classes per object.
Also, link tags matter a lot less now than they used to. we're well past support for IE5 generation browsers and IE6 supports the #import tag.
Cheers!