MasterPage中使用图片和脚步路径的解决办法

 用masterpage的确很方便.但是也有一些问题.例如masterpage嵌套的问题(貌似在vs2008中已经解决).图片,脚本路径问题等等.

例如: 我们要运行的是 http://location:3001/index.aspx下的一个图片 index.JPG 其原本我们预算时路径应该是 http://location:3001/index.JPG

当我们使用masterpage创建一个子目录后Flow后，在运行时图片或脚本都会改变成masterpage子目录下的 http://location:3001/Flower/index.JPG,这是我们常理中没有预料到的事情.

下面我来总结一下我的经验：

一般而言，链接路径的表达有三种方式：绝对路径、相对路径和基于根目录的路径。另外对于ASP.NET服务器控件来说，还可以使用“~”来代替根目录来表示。
在MasterPage和用户控件中，经常要使用一些图片作为背景或漂亮的按钮，但是在指定图片的src或者background时候，经常因为链接路径的问题而出错。
1.使用绝对路径：使用形如“D:\xxx\xxx.gif”的绝对文件路径一般情况下是不可取的。可以考虑采取url的方法，写成http://xxxx/xx/xxx.gif”。但是缺点是不利于移植，例如现在站点的地址为/images/NullPic.gif”，这样MasterPage和用户控件中都能正确显示，但是如果将继承MasterPage的页面放到不同的文件夹下，或者使用用户控件的页面不在同一文件夹，那么该页面又会找不到正确的图片位置了！
3.基于根目录的路径：形如：这样的解决方法在ASP.NET2.0调试的时候，因为没有建立虚拟目录，并不能正确显示（我也不是很肯定，没有确认^_^）。而我在非服务器控件的HTML标签元素上无法使用“~”来指定路径。
那么，在设计时让图片可见，我们应该怎么来处理呢？我采用了CSS来完成这项工作。针对要显示图片的元素和控件，我们可以写一段简单的css来定位图片，因为css文件的位置是一般不会改变的(位于App_Theme/themename/xxx.css)，这种方法也就行之有效了。
.HideBar
{
    height:56px;
    width:5px;
    cursor:hand;
    background-image: url(http://images.cnblogs.com/xxx.gif);       
}接下来我们只需要在相应的元素和控件的cssclass中填入HideBar，就可以做到每个继承MasterPage或使用用户控件的页面都能正确显示图片了。

 

 

vs2005中是不能嵌套使用masterpage的.有时候又的确需要嵌套.例如主模板定义了header和footer,中间区域根据需要再分别定义一栏目布局或者左右分栏布局等等.这时候可以采取替换masterpage的方式来处理.

首先定义好主要的masterpage:

<% @ Master Language = " C# "  AutoEventWireup = " true "  CodeFile = " main.master.cs "
 Inherits = " masterPage_main "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head"  runat ="server" >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < link  href ="../style/main.css"  rel ="stylesheet"  type ="text/css"   />
     < link  href ="../style/table.css"  rel ="stylesheet"  type ="text/css"   />
     < link  href ="../style/form.css"  rel ="stylesheet"  type ="text/css"   />     
     < title ></ title >
     < style  type ="text/css" >
    <asp:ContentPlaceHolder ID="cphStyle" runat="server">
    </asp:ContentPlaceHolder>
     </ style >       
</ head >
< body >  
     < form  id ="form1"  runat ="server" >
.
                             < asp:ContentPlaceHolder  ID ="cphMain"  runat ="server" >
                             </ asp:ContentPlaceHolder >
.
     </ form >
</ body >
</ html >

 

然后根据这个主模板再做masterpage,注意看header标记和ContentPlaceHolder 的写法:

<% @ Master Language = " C# "  AutoEventWireup = " true "  CodeFile = " OneColumn.master.cs "
Inherits = " masterPage_OneColumn "   MasterPageFile = " ~/masterPage/main.master "   %>
< asp:Content  ID ="style"  ContentPlaceHolderID ="cphStyle"  runat ="server" >
     < asp:ContentPlaceHolder  ID ="cphStyle"  runat ="server" >
     </ asp:ContentPlaceHolder >
</ asp:Content >       
< asp:Content  ID ="main"  ContentPlaceHolderID ="cphMain"  runat ="server" >
     < div  id ="yl-left" >
         < asp:ContentPlaceHolder  ID ="cphLeft"  runat ="server" >
         </ asp:ContentPlaceHolder >
     </ div >
     < div  id ="yl-content"  class ="main-content" >
         < asp:ContentPlaceHolder  ID ="cphRight"  runat ="server" >
         </ asp:ContentPlaceHolder >
     </ div >
</ asp:Content >

 

上面的masterpage是不能直接在vs2005中使用的,否则无法切换到页面设计视图.要做个变通,那就是再建一个masterpage暂时在设计期替代一下,我称之为代理masterpage:

<% @ Master Language = " C# "  AutoEventWireup = " true "  CodeFile = " Layer2Column.master.cs "
    Inherits = " masterPage_Layer2Column "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
</ head >
< body >
     < asp:ContentPlaceHolder  ID ="cphStyle"  runat ="server" >
     </ asp:ContentPlaceHolder >
     < form  id ="form1"  runat ="server" >
         < div >
             < asp:ContentPlaceHolder  ID ="cphLeft"  runat ="server" >
             </ asp:ContentPlaceHolder >
             < asp:ContentPlaceHolder  ID ="cphRight"  runat ="server" >
             </ asp:ContentPlaceHolder >
         </ div >
     </ form >
</ body >
</ html >

 

这个masterpage不需要任何样式设置和多余的html标签,只需要保持 ContentPlaceHolder标记与要替换的masterpage一致即可.

应用masterpage到页面:

<% @ Page Language = " C# "  MasterPageFile = " ~/masterPage/Layer2Column.master "  AutoEventWireup = " true "
    CodeFile = " Default.aspx.cs "  Inherits = " Default "  runtimeMasterPageFile = " ~/masterPage/TwoColumn.master "
    CodeFileBaseClass = " BasePage "   %>
<% @ Register Src = " ~/common/DefContent.ascx "  TagName = " DefContent "  TagPrefix = " uc2 "   %>
<% @ Register Src = " ~/common/LoginArea.ascx "  TagName = " LoginArea "  TagPrefix = " uc1 "   %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="cphLeft"  runat ="Server" >
     < uc1:LoginArea  ID ="LoginArea1"  runat ="server"   />
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="cphRight"  runat ="Server" >
     < uc2:DefContent  ID ="DefContent1"  runat ="server"   />
</ asp:Content >

 

这个页面的masterpage设置为我们的代理masterpage,然后添加一条自定义的属性runtimeMasterPageFile="~/masterPage/TwoColumn.master" 记录这个页面真正要用的masterpage路径.

下面在运行时动态的替换masterpage就可以了.相关代码放在页面初始化事件中:

     public   class  BasePage : System.Web.UI.Page
    {
         private   string  runtimeMasterPageFile;    // 运行时指定的masterpage
         ///   <summary>
         ///  设置运行时母版页用来替换静态的临时母版页
         ///   </summary>
         public   string  RuntimeMasterPageFile
        {
             get  {  return  runtimeMasterPageFile; }
             set  { runtimeMasterPageFile  =  value; }
        }

         protected   override   void  OnPreInit(EventArgs e)
        {
             if  (runtimeMasterPageFile  !=   null )
                 this .MasterPageFile  =  runtimeMasterPageFile;
             base .OnPreInit(e);
        }
     .
     }

 

 

这样就实现了masterpage的嵌套,另外采用这种方式还可以提高vs2005编辑页面的速度,因为编辑时使用的是代理masterpage,没有那么多的html标签需要解析,缺点是设计时看不到最终预览效果.

最后说一下路径问题,masterpage中只有css样式单的链接不会随着引用页面的目录变化而失效,其他的都需要自己变通一下.

客户端脚本:我采用在masterpage的onload事件中用代码动态插入的方式,如下所示:

 

 

using  System;
using  System.Web.UI;

public   partial   class  masterPage_main : System.Web.UI.MasterPage
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         // 设置MasterPage Header 添加js     
         string  JSFile  =   " <script src=\ " { 0 }\ "  type=\ " text / javascript\ " ></script> " ;
        Page.Header.Controls.Add( new  LiteralControl( string .Format(JSFile, ResolveClientUrl( " ~/script/mootools-release-1.11_full.js " ))));
        Page.Header.Controls.Add( new  LiteralControl( string .Format(JSFile, ResolveClientUrl( " ~/script/common.js " ))));
        Page.Header.Controls.Add( new  LiteralControl( " <!--[if lte IE 7]> " ));
         string  JSFile2  =   " <script defer=\ " defer\ "  type=\ " text / javascript\ "  src=\ " { 0 }\ " ></script> " ;
        Page.Header.Controls.Add( new  LiteralControl( string .Format(JSFile2, ResolveClientUrl( " ~/script/fixinput.js " ))));
        Page.Header.Controls.Add( new  LiteralControl( " <![endif]--> " ));
    }
}

 

img标签:这个也有多种办法可以处理,我用的是修改img标签为服务端控件的方式,这样就可以使用asp.net特有的网站根路径路径表示法了,如下所示:

< img  src ="~/images/logo.jpg"  title ="管理系统"  alt =""  runat ="server"   />

 

 

转载于:https://www.cnblogs.com/yongheng178/archive/2010/06/12/1757422.html