目前正在做的四川移动项目中遇到了一个小小的问题:母版页引用的脚本的相对路径该怎么写?
起因:对于这个相对路径是对于母版页还是对于内容页。答案是内容页,(母版页只是替换内容页),这样就遇到了一个问题:当内容页和母版页不在同一个目录下的时候,并且内容页也分别放在不同的文件夹下的时候,不同的内容页对于脚本引用的相对路径就有所不同。
提出问题:关于母版页MasterPage中引用JavaScript,CSS的问题,如果所有套用模板的页面都在同一个路径下,这个问题就不存在了。但是在实际中为了方面管理,往往会建立一些文件夹,将引用的MasterPage放到不同的文件夹下,这是在MasterPage引用的JS,CSS文件由于路径的问题,在套用母版页中的内容页面中不一定都能访问到。那这个问题该如何解决了?
解决问题:通过自己的努力思考和网上的参考资料得到一些解决办法:
方法一:
string JSFile = "<script language=\"javascript\" src=\"{0}\" type=\"text/javascript\"></script>";
Response.Write(string.Format(JSFile,ResolveUrl("~/Javascript/jquery.js")));
这个方法虽然可以快速解决问题,但是Response.Write是将脚本的引用写到了Html页面的开头,这就破坏了XHTML的格式,会带来各种存在的隐患,据资料:用ASP.net AJAX开发,发现很多Asp.net AJaxControlToolkit中很多控件不起作用了。后来发现说是由于Response.Write引起的结果。Response.Write(string.Format(JSFile,ResolveUrl("~/Javascript/jquery.js")));
方法二:
string JSFile = "<script language=\"javascript\" src=\"{0}\" type=\"text/javascript\"></script>";
Page.Header.InnerHtml = string.Format(JSFile,ResolveUrl("~/Javascript/jquery.js"));
这种方法就可以实现而且可以很好的解决方法中的问题。Page.Header.InnerHtml = string.Format(JSFile,ResolveUrl("~/Javascript/jquery.js"));
方法三:
HtmlLink link = new HtmlLink();
link.Href = string.Format(JSFile,ResolveUrl("~/CSS/base.css"));
link.Attributes["rel"] = "stylesheet"; link.Attributes["type"] = "text/css";
page.Header.Controls.Add(link);
这是注册样式的一种方法。link.Href = string.Format(JSFile,ResolveUrl("~/CSS/base.css"));
link.Attributes["rel"] = "stylesheet"; link.Attributes["type"] = "text/css";
page.Header.Controls.Add(link);
方法四:注册客户端脚本的方法,结合ASP.NET AJAX 中的ScriptManager控件来实现。
用ScriptManager,这是ASP.net AjaxConrolToolkit的一个控件,通过这个控件爱你可以很好的动态的根据所引用母版页的脚本路径,自动的把母版页中引用的相对于母版页中的路径转换成相对于所引用内容页的相对路径。用法如下:
<asp:ScriptManager ID="ScriptManagerMain" EnablePageMethods="true" runat="server">
<Scripts>
<asp:ScriptReference ScriptMode="Auto" Path="~/JavaScript/Common.js" />这里是相对于母版页的相对路径,当然也可以用Path=”~/JS/Jscript1.js”(相对于网站的根目录)也可以实现。
</Scripts>
</asp:ScriptManager>
前提条件:装了ajax在.net环境中的组件才能用<asp:ScriptManager>,还用注意一点,这个控件还需要给程序指定一个资源的脚本文件,是在System.web.Extensions中的。所以需要在web.config中指定:
<Scripts>
<asp:ScriptReference ScriptMode="Auto" Path="~/JavaScript/Common.js" />这里是相对于母版页的相对路径,当然也可以用Path=”~/JS/Jscript1.js”(相对于网站的根目录)也可以实现。
</Scripts>
</asp:ScriptManager>
<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
1.既然不同页面所引用的脚本路径不同,那就把它分开,不把引用的脚本文件放到母版页,而把脚本文件的引用分别放到各自引用的页面上。这是一种不是办法的办法。虽然不是好办法,但是能够解决这个问题。
2.用你的网站所在的服务器的根目录,注意不是你的网站的根目录,用这种符号“/”来表示,但是这样的可移植性比较差。因此当网站的根目录与服务器根目录不同时,就会发生错误。
最后补充一点:一些符号的含义:
./Image/和Image/ 相对路径
../ 相对于当前路径的上一级的路径
~/是相对于网站根目录的相对路径。(注意这是只能在服务器端识别,客户端不能识别)
/表示相对于网站所在服务器根目录的相对路径(注意这是相对于服务器的根目录而不是网站根目录)