I am trying to implement the urlrouting for asp.net webforms. My problem is all the js file and the css files not loaded on the page because it cannot refer to the correct path.
I've refer the js on the my master page as shown below.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
Could you please help me for a solution.
you can use the Page.ResolveUrl(String relativeUrl)
Page.ResolveUrl("...") will generate an absolute path out of an relative one:
<script type="text/javascript" src='#Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")' charset="utf-8"></script>
or
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")%>' charset="utf-8"></script>
depending on if you're using razor markup or not.
This is the correct format to call your JQuery script with. The '~' refers to the root directory. So assuming your script is in this location, it should work.
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
However, the line above it attempts to load the same script, but does not include the '~' character.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
...and you aren't attempting loading any CSS files. So delete the first line, and then add the correct tags to load your CSS files.
<link rel="stylesheet" type="text/css" href="~/Content/mystyle.css">
Only use / Because it means root of the site. (if Scripts dir under your root)
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
Hi We using a master template for all aspx pages. In master page we added frequent using CSS, JS, In aspx page pages we using require CSS and JS for that particular page.
Now we are trying add Jquery Ajax or XmlHttp for website optimization. Using Jquery ajax we calling a aspx page into DIV. Here problem when we load total aspx page from HTML tags javascript and all scripts working fine. But when we trying to load that page from particular DIV or body then scripts not working.
Can please tell me how we can load scripts when loading page from particular DIV or body.
In your aspx page make sure you do not have relative paths for your CSS and JS files. The following is using a relative path. If you load the file through an ajax request and into a div the relative paths will not work.
<link rel="stylesheet" type="text/css" href="../Common/css/myCss.css" media="all" />
<script type="text/javascript" src="../Common/js/myJs.js"></script>
Instead you must use the absolute path of the file
<link rel="stylesheet" type="text/css" href="<%=Page.ResolveUrl("../Common/css/myCss.css") %>" media="all" />
<script type="text/javascript" src="<%=Page.ResolveUrl("../Common/js/myJs.js") %>"></script>
Try this and see if it works. I have not tested it in the way you want to use it.
Edit:
If you are receiving the page as an html string, instead of doing this:
$(result).find("#ContentSwitcher").html()
try the following:
$.parseHTML(result).find("#ContentSwitcher").html()
Note: $.parseHTML requires jquery 1.8.0 or higher.
I have asp.net web project with following folder structure
MyProject
-FolderOne
-PageOne.aspx
-FolderTwo
-PageTwo.aspx
-HomePage.aspx
-Site.Master
I registered <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> in Site.Master . My Problem is that , function using this jquery works in HomePage.aspx but not in PageOne.aspx and PageTwo.aspx .
But it's works when i register <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script> in each PageOne.aspx and PageTwo.aspx . Is there any way if I want to register my script only in Site.Master ?
Sorry my earlier solution assumed that it was an MVC project.
You need to use ResolveUrl in Site.Master so that PageOne & PageTwo work properly
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.4.1.js")%>'></script>
PageOne and PageTwo must refer to the master page in order to get access to the includes in the master page. Otherwise they need their own local includes
The ASP.NET WebResource.axd Http Handler is used to serve resources embedded in DLL's.
The LINK html tag is automatically generated by ASP.NET.
I would like to intercept the generation of the LINK html tag for a certain set of embedded CSS from a third party DLL and add a media attribute.
In summary:
I would like to add a Media attribute to the LINK html tag for the ASP.NET WebResource.axd Http Handler.
So this:
<link type="text/css" rel="stylesheet" href="/WebResource.axd?d=XXXXX" />
Appears like this:
<link media="screen and (min-device-width: 481px)" type="text/css" rel="stylesheet"
href="/WebResource.axd?d=XXXXX" />
Cheers
There is a workaround. Firstly, links like this are being added to the Page's head. Your page must have runat=”server” in the <head> tag for the automatic style sheet inclusion. The pages created by the IDE have this setting automatically. So, links being added is a HtmlLink control type. The idea is to iterate through controls in Page's header, find HtmlLink controls and set necessary attribute (or even attributes). I include this into the Page_Load event:
Page.Header.Controls
.OfType<HtmlLink>()
.ToList()
.ForEach(link =>
{
link.Attributes["media"] = "screen and (min-device-width: 481px)";
});
Before this I had:
<head id="Header">
<title></title>
<link href="App_Themes/MyTheme/main.css"
type="text/css"
rel="stylesheet" />
</head>
and after the result is:
I know, this uses Themes insted of WebResource.axd but for the last one the result will be the same.
The latest thing: there may be another links in the page. So it would be good to recognize our links (the links need to be modified). So if there is no id attribute you could recognize them by href attribute.
I have an APS.net app (C#) with several pages that use the same MasterPage. In that page, I have included a couple stylesheets like so:
<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>
These styles apply correctly to all content that is in the actual .master file (page), but are not applied to any pages that use the Master page (for instance default.aspx uses that master page and has a Content placeholder in it).
If I add these lines in each individual page:
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
Then the styles show up as expected... but it was my hope that I could include them in the master page so that I didn't need to include these references in each subsequent page too.
Because these files are not located physically in the same project (they are shared between several apps), i cannot just include them as an ASP.net theme that would be applied to all pages.
Update
In order to rule out the file locations problem, I used the absolute URL for these stylesheets...
<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
That way, no matter where it is read from, the file can be located. This still exhibits the same behavior.
To me, it looks like the masterPage is rendered with the CSS styles (because they're in the same file) and then the child/calling page is rendered without the CSS styles (because they aren't in that file, they're in the masterPage) and then those two files are combined together (as opposed to combining them together first and THEN rendering the style elements for the combined pages). Adding to this belief was my previous example of adding the include for the CSS file in the calling page itself, which will cause it to display the CSS correctly.
You can view the source of this file, and in the head section, you can see the CSS styles linked correctly, but they aren't applied to any elements from the calling page while they are applied to all elements in the masterPage.
Is the content page in a different folder that the master? If so, you'll have to get the application relative path to the css files using ResolveUrl in the master page:
<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />
Update: If this doesn't work, then you might have HTML or CSS errors like Lance suggested. Try using the HTML and CSS validators at w3schools.com. If it still doesn't work after fixing any errors, double check your CSS selectors with the rendered HTML as Steve suggested. ASP.Net's generated IDs have bitten me more than once.
What about this?
<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.
As far as rendering. The rendering is done on the client machine's browser. To the browser it has no idea the html is generated from multiple documents.
I would make sure your HTML and CSS are correct.
On a side note i have noticed the last week or so that VS2008 keeps messing my css stylesheets up, doing really random things like moving text around. However, I think this might just be something on my machine. Just something to check.
Here is some sample code I checked this just to make sure and this works.
Head of Master Page
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
Content Place Holder
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="something">
Lance
</div>
</asp:Content>
Css in StyleSheet
.something{
color:Blue;
}
The result is "Lance" in Blue in the child page.
Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.
I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.
Unfortunately, this created a further problem for me. My head tag was runat server. My link tags were not.
The resolve url within my link tag would never execute. Instead, the C# code and response.write tags were being encoded and outputted to the page.
Bizarrely, the same technique in a script (non-runat server) tag would work as normal.
To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:
<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>
That worked.
How strange. Somehow, it is all related to the head tag being runat sever.
It looks like you have done it correctly, so your error seems weird and sounds like maybe you've mady a typo in the master page. Try to look at the generated source (view source in the browser) of the two pages, one with the links in the master pages and one with the links in the web page, and compare the paths.
Something like this should work. You should be able to include the css in the header of the master. And then, include a ContentPlaceHolder in the header so if you need custom header stuff in your content pages you can do that. Does that not work?
<head>
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Ultimately you don't want a
<head></head>
tag in your content page, it's possible that is overriding your master page header.