【ASP.NET】使用母版页后如何让内容页来引用js或css。。。

html-css010

【ASP.NET】使用母版页后如何让内容页来引用js或css。。。,第1张

.net中提供的母版页大大的方便了制作网页时候使得页面共有元素统一化,给维护和修改提供了相当的便利。但是有一个让人很恼火的缺点就是母版页中才能有<head元素,使得很多情况下子页面引用css或者js就不那么方便。当然,你可以把css和js的引用全部放到母版页中,但是这样的做法会使得<head非常臃肿,是相当不理想的做法。这里介绍两种简单的方法,希望可以给碰到这个问题的朋友一点帮助,当然,如果您有更方便的做法,希望您可以告诉我,非常感谢呵呵。。。

第一种方法:

使用<asp:ScriptManagerProxy元素

直接看代码段:<%--这种方法是利用了ScriptManagerProxy控件中Scripts来引用js--%<asp:ScriptManagerProxyID=aarunat=server<Scripts<asp:ScriptReference

Path=

My97DatePicker/WdatePicker.js/</Scripts</asp:ScriptManagerProxy

这里之所以要使用ScriptManagerProxy是因为使用母版页时候要保证ScriptManager元素只有唯一一个,具体的就不多说了,MSDN查一下就明白了。

这种方法我个人觉得要稍微麻烦点(要敲多点代码),而且只能引用js,css无效。

---------------------------------------------我是华丽的分割线-------------------------------------

第二种方法:

使用<asp:ContentPlaceHolder元素

母版页中代码段:<headrunat=server<titleTechMan</title<metahttp-equiv=Content-Typecontent=text/html

charset=utf-8/<metaname=keywordscontent=$页面关键字$/<metaname=descriptioncontent=$页面描述$/<asp:ContentPlaceHolderID=cphHeadrunat=server</asp:ContentPlaceHolder</head

内容页中代码段:<%--这种是利用ContentPlaceHolder的方法,这种方法更加自由,还可以自由引用css--%<asp:ContentID=con2runat=serverContentPlaceHolderID=cphHead<scripttype=text/javascriptsrc=My97DatePicker/WdatePicker.js</script<linkhref=css/site.cssrel=stylesheettype=text/css/</asp:Content

这种方法简单实用,而且js和css都能很好的引用,利用这种做法可以很简单的解决很多类似问

我们在HTML中经常需要引入CSS和JS文件,那么如何引入呢?下面我给大家演示一下。

工具/材料

Sublime Text

01

首先新建一个文件夹,在文件夹下面建立如下图所示的文件

02

接下来用Sublime Text打开HTML文件,写入HTML结构,如下图所示

03

然后我们在Head标签内用link标签引入CSS文件,如下图所示

04

最后用Script标签引入JS文件即可,如下图所示

直接引用css放在第一个content里面就可以了

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<title>昂旺电子商务网站-首页</title>

<link href="App_Themes/layout/homePage.css" rel="stylesheet" type="text/css" />

<script src="js/banner.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function () { $('#image_rotate').innerfade({ speed: 1500, timeout: 3000, type: 'sequence', containerheight: '380px' })})

//]]>

</script>

</asp:Content>