I know this may be a basic question, but it is driving me crazy. I have an asp.net (4.0 framework) application that I have been working on. I have a masterpage in the root directory, and a secondary masterpage in a subdirectory. The secondary masterpage inherits the site master.
The issue is that even though I used ~/ to describe the location of the resource ("<img src="~/Images/myImage.jpg" />) they are not loading.
Using the console on firebug, I get this error: "NetworkError: 404 Not Found - http://localhost:4601/Account/~/Images/myImage.jpg"
What do I need to do to correctly translate resources from masterpage to masterpage across subfolders? And what is it that I am misunderstanding about '~/'?
Using
<img src="~/Images/myImage.jpg" />
Is mixing HTML code with .Net ASP code. The tilde (~) is not something of the HTML markup and this is why it does not produce what you want.
To make it works, you need to change the source with the <% %> tag that will let you add ASP code that will be translated into HTML code when processing.
<img src="<%= Page.ResolveUrl("~/Images/myImage.jpg") %>" />
Inside ASP.NET tag, you should use the ResolveURL that will transform the URL into something that the HTML will be able to understand.
If you do not want to use this trick, you can also use instead of the HTML img tag the ASP.NET image control. This will automatically execute the ResolveUrl
<asp:Image runat="server" ID="imgHelp" ImageUrl="~/Images/myImage.jpg" />
<img src="<%= Page.ResolveUrl("~/Images/myImage.jpg") %>" />
or
<img src="<%= Control.ResolveUrl("~/Images/myImage.jpg") %>" />
Related
Ok, I didn't know how to phrase this differently. Basically, I have an issue on my website, where writing pagename.aspx/anything will open the page pagename.aspx but with no styles or images cause they have relative paths. It's not possible to rewrite them to have absolute paths. Is there any way I could make it work somehow (like for example, redirecting it)? Thanks in advance.
For converting any application root relative URL (which is the most common format) to the appropriate URL on the client in a Web Forms page, you can use this code:
<%# ResolveClientUrl("~/path/to/file.css") %>
Example:
<script src='<%# ResolveClientUrl("~/Scripts/jquery-2.1.0.min.js") %>' type="text/javascript"></script>
However, in cases where you're using server side controls (for example, asp:Image instead of plain img element) then you can use the application root relatively URL without needing to resolve it.
<asp:Image runat="server" ImageUrl="~/images/myimage.jpg" />
is equivalent to
<img src='<%# ResolveClientUrl("~/images/myimage.jpg") %>' />
Hi all my work environment is asp.net c# vs2008. My issue is this, i have a master page outside.master in shared folder.Inside it i have an image control with
<img src="App_Themes/Home/images/logo.png" />
i am referring this master page from in two sub pages. One is Index.aspx which is located in the root level and Secondly registration.aspx which is under masters folder. The problem is that when i run, the index.aspx will show the logo where registration.aspx is not showing the logo. Please tell me how to specify the path so that i will get logo in both pages.
Tilde sign ~ will resolve for server side controls.
So you need to add runat="server" as img in HTML element.
Try this:
<img src="~/App_Themes/Home/images/logo.png" runat="server"/>
The most foolproof method is to have something like this
<asp:Image runat="server" id="myImage" ImageUrl='<%# Eval("imageFile") %>' />
Then in the code-behind assign the variable imageFile to something like Server.MapPath("App_Themes/Home/images/logo.png");
Try the following:
<img src="~/App_Themes/Home/images/logo.png" runat="server" />
I would like to use ASP.NET's ExpressionBuilder syntax to dynamically retrieve domain of static content from an AppSetting.
I am using the following syntax, which does not work:
<img src="<%$Appsettings:STATIC_CONTENT_DOMAIN %>/img/logo.jpg" alt="logo" width="176" height="159" />
FYI, the desired HTML output is:
<img src="http://static.myserver.com/img/logo.jpg" alt="logo" width="176" height="159" />
Please note, I cannot use <%= %> syntax because my ASPX page needs to be CompilationMode="never". (The reason I am using ExpressionBuilder syntax is that it works in no-compile pages)
Any ideas on how I can do this?
This approach worked for me (not very readable :)...
<img src="<asp:Literal runat='server' Text='<%$Appsettings:STATIC_CONTENT_DOMAIN%>'/>/img/logo.jpg" />
You might want to consider writing a custom expression builder - they're not too difficult to write. Here are some tutorials:
Express Yourself With Custom Expression Builders
Expression Builders in ASP.NET 2.0
You could have your own expression syntax such as:
<%$ MyCdnUrl: Static, '/img/logo.jpg' %>
Then you'd parse out everything after the ":" and build up the URL that you need.
I think that expression builders must be used as "property values" so you can't use them completely on their own. You'll still have to use something like <img runat="server"> or an <asp:Image> control or an <img> with the <asp:Literal> inside it.
I believe you need to use a server-side asp.net control, such as:
<asp:Image ID="MyImage" runat="server" ImageUrl="<%$Appsettings:STATIC_CONTENT_DOMAIN %>" />
I don't know if you can combine the statement with static info like you have, such as:
<asp:Image ID="MyImage" runat="server" ImageUrl="<%$Appsettings:STATIC_CONTENT_DOMAIN %>/img/logo.jpg" />
My guess would be it isn't possible, but I guess it's worth a shot. Try it out and see...
I have a custom date control which is essentially a text box and the ajaxToolKit calendarExtender. I want to include Javascript in the control and have it work properly no matter what page the control is on. The control is called DateControl.ascx
So I have two Javascript functions, dateEditor_OnShown and dateEditor_OnHiding. They get tied up in the page load of DateControl.ascx via...
CalendarExtender.OnClientShown = "dateEditor_OnShown";
CalendarExtender.OnClientHiding = "dateEditor_OnHiding";
The DateControl tool is used on two separate pages. If I put the straight Javascript directly into the DateControl's HTML it will work only on the default page but crashes when I load up the next page with the control. The error is a js runtime error 'dateEditor_OnHiding' is undefined.
If I try to link to the Javascript file from my DateControl's html via...
<script type="text/javascript" src="../JavaScript/IE6CalendarExtenderFix.js"></script>
... instead of having the Javascript directly in the page, it crashes immediately with the same error. I should note that the path to the js is correct.
The only way I can really get it to work is if I link to the javascript on every page that the control is used.
UPDATE: I feel the need to clarify a little bit. The solutions suggested are much appreciated, but either I am not understanding or they just will not work in my case for whatever reason (quite possibly the former).
So, this is basically what my control looks like...
<div id="CustomDateControl" style="<%# ControlStyle %>">
<div id="TextBox" style="display:inline; white-space:nowrap;">
<asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
</div>
<div id="Calendar" runat="server">
<ajaxToolkit:CalendarExtender
runat="server"
ID="CalendarExtender"
Format="MM/dd/yyyy"
TargetControlID="txtCalender"
PopupButtonID="CalenderImage" />
</div>
</div>
In the aspx page, with that exact code, if I put the exact javascript in script tags so the page looks about like so...
<script type="text/javascript">
function dateEditor_OnShown(dateControl, emptyEventArgs) {
...
}
function dateEditor_OnHiding(dateControl, emptyEventArgs) {
...
}
</script>
<div id="CustomDateControl" style="<%# ControlStyle %>">
<div id="TextBox" style="display:inline; white-space:nowrap;">
<asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
</div>
<div id="Calendar" runat="server">
<ajaxToolkit:CalendarExtender
runat="server"
ID="CalendarExtender"
Format="MM/dd/yyyy"
TargetControlID="txtCalender"
PopupButtonID="CalenderImage" />
</div>
</div>
This still crashes when accessing the control in the second page (not the first which is the default page) saying 'dateEditor_OnHiding' is undefined. Now, if I link to a js file with the same code using a relative path as suggested below I still get the same results.
Also, if as suggested below, I override OnPreRender and run RegisterClientScriptInclude, I once again get the same results. The control always works on the default page but never on the second page even though as far as I can tell the script is included in the control.
Any ideas?
append following code in your User Control.
protected override void OnPreRender(EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude("DateControl", this.ResolveClientUrl("~/JavaScript/IE6CalendarExtenderFix.js"));
base.OnPreRender(e);
}
Problem with control-relative file paths
You are probably having problems with relative paths to your JS file. You are specifying relative path to your custom control. You should probably write user control. Anyway. Your JS file is relative path to your custom control, but not relative to the containing page, so your JS file actually never loads. That's why your event handlers are undefined.
The easiest way would be to use absolute paths. Since you're working with user controls you can easily prepend application root folder.
I've got a couple of ASP.Net Usercontrols that I am using in different locations of my new website. These usercontrols had links like this :
If the usercontrol is used in pages in various subdirectories the relative path just doesn't work, and I don't want to provide my full website name in the path. So I did this
<a href="~/daily/panchang/" runat="server">
and now the ASP.Net '~' marker works correctly to resolve the root path.
Is it okay to mark all my HTML tags where I have the need to resolve the root path with runat="server" or do you know of a better, HTML way?
Thanks
I won't say whether it's an elegant solution, I'll just point out an alterantive within System.Web:
<a href="<%= VirtualPathUtility.ToAbsolute("~/daily/panchang/") %>">
You should use a base tag to define the root of your application and make all links relative like this :
<head>
<base href="<%= Request.ApplicationPath %>" />
</head>
...
<!-- this now points to ~/daily/panchang/ -->
Be careful though because every element that has runat="server" will be 'serialized' and stored in the ViewState every time a PostBack occurs, and you don't wanna be cluttering it up with useless data.