现在位置首页 / 项目实战 /正文

asp.net Web项目资源文件(js、img、css)及页面aspx文件的路径问题

作者: IT小兵 | 2013年9月22日| 热度:℃ | 评论: |参与:

在分析项目中,使用了[基于Jquery、Bootstrap的后台管理免费UI框架推荐--Charisma UI],其中涉及到很多js文件、css文件,

以及相对应的aspx文件,原来的demo是目录结构平行的,没有多大问题。

如下图:

asp.net 文件路径配置

但是在实际的项目开发中,我们的目录结构不是这个设计的,这么设计如果文件少还可以,

如果文件较多,就需要分文件夹存储了。

如图:

asp.net 文件路径配置

关于asp.net里面的路径这里有详细的说明[asp.net路径url href使用说明]。其他不多列举。

这里需要说明的是:

  1. Visual Studio 2012中自带的web http server会带有一个目录路径。使用~是有问题,不解析。

    ~对js、aspx、ashx、asmx等不生效。对img和css是生效的

  2. ../这样的相对路径,尽量少用,可能开发的时候可以的,但是部署可能就会出现路径错误。


出现的错误有一个是这样的:

无法使用前导.. 在顶级目录上退出 

    这就说明,你使用了../的地方,再前导一次就退出了系统的根目录了。可能的地方只能是找到../使用的地方进行修改成:~

    

原来的程序没有错误的,以更新到新环境才出错,看来可能是某些地方使用了“../”的缘故。

仔细检查,果然,在一个引用图片的地方有人做了这样的连接“../xxx/pic”。修改之后就好了“~/pic”。

原因:在程序设计的时候,建立的是虚拟目录,在某个网站下的;
但是更新到发布环境时候,发布到了一个网站,已经是顶级目录了,所以没法使用../

    下面说一下,我在这个项目中的使用Charisma UI的实际配置路径的方案。

1.css、js、img放在根目录下面

2.login页面单独处理,放在根目录下面。引用的js、css单独处理。

3. 其他功能页面,放在Page下面,分别建文件夹处理。使用的母版页面在根目录,但是母版的引用地址

    是在Page/二级功能文件夹下面。

   

建立母版页面Content.master。母版的引用:

 	<link  href="~/css/bootstrap-cerulean.css" rel="stylesheet">
    <style type="text/css">
	  body {
		padding-bottom: 40px;
	  }
	  .sidebar-nav {
		padding: 9px 0;
	  }
	</style>
	<link href="~/css/bootstrap-responsive.css" rel="stylesheet"/>
	<link href="~/css/charisma-app.css" rel="stylesheet"/>
	<link href="~/css/jquery-ui-1.8.21.custom.css" rel="stylesheet"/>
	<link href='~/css/fullcalendar.css' rel='stylesheet'/>
	<link href='~/css/fullcalendar.print.css' rel='stylesheet'  media='print'/>
	<link href='~/css/chosen.css' rel='stylesheet/'/>
	<link href='~/css/uniform.default.css' rel='stylesheet'/>
	<link href='~/css/colorbox.css' rel='stylesheet'/>
	<link href='~/css/jquery.cleditor.css' rel='stylesheet'/>
	<link href='~/css/jquery.noty.css' rel='stylesheet'/>
	<link href='~/css/noty_theme_default.css' rel='stylesheet'/>
	<link href='~/css/elfinder.min.css' rel='stylesheet'/>
	<link href='~/css/elfinder.theme.css' rel='stylesheet'/>
	<link href='~/css/jquery.iphone.toggle.css' rel='stylesheet'/>
	<link href='~/css/opa-icons.css' rel='stylesheet'/>
	<link href='~/css/uploadify.css' rel='stylesheet'/>
	<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- The fav icon -->
	<link rel="shortcut icon" href="img/favicon.ico"/>
    
	<!-- jQuery -->
	<script src="../../js/jquery-1.7.2.min.js"></script>
	<!-- jQuery UI -->
	<script src="../../js/jquery-ui-1.8.21.custom.min.js"></script>
	<!-- transition / effect library -->
	<script src="../../js/bootstrap-transition.js"></script>
	<!-- alert enhancer library -->
	<script src="../../js/bootstrap-alert.js"></script>
	<!-- modal / dialog library -->
	<script src="../../js/bootstrap-modal.js"></script>
	<!-- custom dropdown library -->
	<script src="../../js/bootstrap-dropdown.js"></script>
	<!-- scrolspy library -->
	<script src="../../js/bootstrap-scrollspy.js"></script>
	<!-- library for creating tabs -->
	<script src="../../js/bootstrap-tab.js"></script>
	<!-- library for advanced tooltip -->
	<script src="../../js/bootstrap-tooltip.js"></script>
	<!-- popover effect library -->
	<script src="../../js/bootstrap-popover.js"></script>
	<!-- button enhancer library -->
	<script src="../../js/bootstrap-button.js"></script>
	<!-- accordion library (optional, not used in demo) -->
	<script src="../../js/bootstrap-collapse.js"></script>
	<!-- carousel slideshow library (optional, not used in demo) -->
	<script src="../../js/bootstrap-carousel.js"></script>
	<!-- autocomplete library -->
	<script src="../../js/bootstrap-typeahead.js"></script>
	<!-- tour library -->
	<script src="../../js/bootstrap-tour.js"></script>
	<!-- library for cookie management -->
	<script src="../../js/jquery.cookie.js"></script>
	<!-- calander plugin -->
	<script src='../../js/fullcalendar.min.js'></script>
	<!-- data table plugin -->
	<script src='../../js/jquery.dataTables.min.js'></script>
	<!-- chart libraries start -->
	<script src="../../js/excanvas.js"></script>
	<script src="../../js/jquery.flot.min.js"></script>
	<script src="../../js/jquery.flot.pie.min.js"></script>
	<script src="../../js/jquery.flot.stack.js"></script>
	<script src="../../js/jquery.flot.resize.min.js"></script>
	<!-- chart libraries end -->
	<!-- select or dropdown enhancer -->
	<script src="../../js/jquery.chosen.min.js"></script>
	<!-- checkbox, radio, and file input styler -->
	<script src="../../js/jquery.uniform.min.js"></script>
	<!-- plugin for gallery image view -->
	<script src="../../js/jquery.colorbox.min.js"></script>
	<!-- rich text editor library -->
	<script src="../../js/jquery.cleditor.min.js"></script>
	<!-- notification plugin -->
	<%--<script src="js/jquery.noty.js"></script>--%>
    <script src="../../js/noty/jquery.noty.js"></script>
<script src="../../js/noty/layouts/center.js"></script>
<script src="../../js/noty/themes/default.js"></script>
	<!-- file manager library -->
	<script src="../../js/jquery.elfinder.min.js"></script>
	<!-- star rating plugin -->
	<script src="../../js/jquery.raty.min.js"></script>
	<!-- for iOS style toggle switch -->
	<script src="../../js/jquery.iphone.toggle.js"></script>
	<!-- autogrowing textarea plugin -->
	<script src="../../js/jquery.autogrow-textarea.js"></script>
	<!-- multiple file upload plugin -->
	<script src="../../js/jquery.uploadify-3.1.min.js"></script>
	<!-- history.js for cross-browser state change on ajax -->
	<script src="../../js/jquery.history.js"></script>
	<!-- application script for Charisma demo -->
	<script src="../../js/charisma.js"></script>

功能页面:

比如建立文件夹:Page/system/index.aspx页面,引用母版。这样,通过../../即可找到js,通过~/css即可找到css文件了。


这样,系统的路径就配置完成了。欢迎交流。


转发请注明来自:IT分享 http://www.suchso.com 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询