The relative path of the javascript file on the master page

A problem that often puzzles developers is how the master page handles relative paths. If you are using static text, this problem will not bother you. However, if you add a tag or an HTML Tag pointing to another resource, the problem may occur.

When you place the master page and content page in different directories, the problem occurs. Place master pages and content pages in different directories. This is the best practice for large websites. In fact, Microsoft recommends that you save all master pages in a dedicated folder. However, if you are not careful enough, using relative paths may cause problems.

For example, if you place the master page in a sub-folder named MasterPages and add the following tag to the master page:

Assuming that the file \ MasterPages \ banner.jpg exists, this may work. Even images appear in the Visual Studio design environment. However, if you create a content page in another sub-folder, the path is interpreted as relative to that folder. If the file does not exist, a broken link will be obtained without any image. Worse, if there is another image with the same file name, you will accidentally get an incorrect image.

This problem occurs because the tag is a common HTML. Therefore, ASP. NET will not be exposed to it. Unfortunately, this label is not suitable when ASP. NET creates a content page. The same problem occurs when the <a> label that provides relative links to other pages and the <link> element used to link the master page to the style sheet.

To solve this problem, you can write the URL in advance as the address relative to the content page. However, this can lead to confusion, restrict the scope of use of the master page, and produce negative effects of incorrectly displaying the master page in the design environment.

Another quick solution is to convert the Image Tag into a server-side control, so that ASP. NET will fix this error:

This solution works because ASP. NET creates an HtmlImage server control based on this information. This object is created after the Page object on the master Page is instantiated. At this time, ASP. NET interprets all paths as the locations relative to the master Page. You can use the same technology to fix the link of the <a> tag to other pages.

You can also use the root path syntax and "~ "Character starts with the URL. For example, the following label indicates the banner.jpg file in the masterpagesfolder of the website.

Unfortunately, this syntax is only valid for server-side controls. If you want to make the same effect on common HTML, You need to include the complete relative path of the domain name in the link. This HTML code is ugly and cannot be transplanted, so it is not recommended.

 

 

Final Solution

<Script src = "js/jquery. js" type = "text/javascript" runat = "server"> </script>

An error occurred while running, indicating jquery. the $ symbol of line 12th in js does not know what it means. After removing runat = "server", it succeeds. It seems that runat = "server" cannot be added.

Solution:

<Script src = '<% = ResolveUrl ("~ /Js/jquery. js ") %> 'Type =" text/javascript "> </script>