科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>c# - How do you include JavaScript in MasterPage? - Stack Overflow

    c# - How do you include JavaScript in MasterPage? - Stack Overflow

    programmeradmin1浏览0评论

    I am building an ASP.NET Webform application with C# in VS 2012, .NET framework 4.5

    I have a MasterPage in root of application, JavaScript files are in folder named js.

    Here is the problem: If page are in root folder then everything is working fine (css+js), if I put any pages in subfolder then css is worked but those JavaScripts are not working at all, obviously the reference path is wrong.

    So the Css reference path is fine, but for the script no matter what I used they all are not worked (js/script.js or ~/js/script.js or /js/script.js or ../ ResolveUrl, ResolClientveUrl ... or all of method in this /%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ ) they all refer to root/SUB-FOLDER/js/script.js instead of root/js/script.js

    in root: a single MasterPage, Default.aspx, test.aspx, js folder, css folder and Pages folder. Default and test pages are working file, but all pages in Pages folder is not display .js SO OBLIVIOUSLY the path is wrong whenever pages is not in root

    In my master page:

    <head runat="server">
<title></title>

<link rel="stylesheet" href="~/css/style.css" />

<%-- tried these and lot more but NOT workkkkkkkkkkk --%>

<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>

<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>

    the script.js is somthing like:

    ....
    $.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function(){
    if($('.tweet').length)$.include('js/jquery.tweet.js');
    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
    if($('#counter').length)$.include('js/jquery.countdown.js');
    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
    $('.main-slider')._TMS({
.....

    ERROR in developer tool (Console) of web browser:

        Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

    I am building an ASP.NET Webform application with C# in VS 2012, .NET framework 4.5

    I have a MasterPage in root of application, JavaScript files are in folder named js.

    Here is the problem: If page are in root folder then everything is working fine (css+js), if I put any pages in subfolder then css is worked but those JavaScripts are not working at all, obviously the reference path is wrong.

    So the Css reference path is fine, but for the script no matter what I used they all are not worked (js/script.js or ~/js/script.js or /js/script.js or ../ ResolveUrl, ResolClientveUrl ... or all of method in this http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ ) they all refer to root/SUB-FOLDER/js/script.js instead of root/js/script.js

    in root: a single MasterPage, Default.aspx, test.aspx, js folder, css folder and Pages folder. Default and test pages are working file, but all pages in Pages folder is not display .js SO OBLIVIOUSLY the path is wrong whenever pages is not in root

    In my master page:

    <head runat="server">
<title></title>

<link rel="stylesheet" href="~/css/style.css" />

<%-- tried these and lot more but NOT workkkkkkkkkkk --%>

<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>

<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>

    the script.js is somthing like:

    ....
    $.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function(){
    if($('.tweet').length)$.include('js/jquery.tweet.js');
    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
    if($('#counter').length)$.include('js/jquery.countdown.js');
    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
    $('.main-slider')._TMS({
.....

    ERROR in developer tool (Console) of web browser:

        Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
    • c#
    • javascript
    • jquery
    • asp.net
    • css
    Share Improve this question edited Feb 11, 2015 at 17:58 Code Maverick 20.4k12 gold badges64 silver badges115 bronze badges asked Dec 17, 2013 at 18:06 Ronaldinho Learn CodingRonaldinho Learn Coding 13.8k25 gold badges85 silver badges111 bronze badges 7
    • You should remove ~/. since script isn't ASP.NET control, it's added to final html as it is, and browser can't recognize ~/. – Givi Commented Dec 17, 2013 at 18:09
    • @Givi not worked, I tried all method /js, ../js, ~/js or js then same in ResolveUrl and ResolClientveUrl – Ronaldinho Learn Coding Commented Dec 17, 2013 at 18:24
    • Remove server side comment tag. <%-- --%> – Givi Commented Dec 17, 2013 at 18:27
    • @Givi Removed <%-- --%> and all pages included pages in root folder is not worked – Ronaldinho Learn Coding Commented Dec 17, 2013 at 18:31
    • Can you show structure of your server? and expand structure of master page? – Givi Commented Dec 17, 2013 at 18:43
     |  Show 2 more comments

    5 Answers 5

    Reset to default 20

    HTML

    You typically don't want any scripts in the <head /> apart from scripts like Modernizr that have feature detection. It's more of a best practice to move all scripts to the bottom of the page like so:

    <html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' />
    <asp:ContentPlaceHolder ID="Head" runat="server" />
</head>
<body>

    <!-- Scripts at bottom of page for faster loading. -->

    <script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script>
    <script src='<%= ResolveUrl("~/js/script.js") %>'></script>

</body>
</html>


    SCRIPT.JS

    Referencing the other script files in script.js will require the / to be appened to 'js/` like so:

    $.include('/js/superfish.js');
$.include('/js/FF-cash.js');
$.include('/js/tms-0.4.x.js');
$.include('/js/uCarausel.js');
$.include('/js/jquery.easing.1.3.js');
$.include('/js/jquery.tools.min.js');
$.include('/js/jquery.jqtransform.js');
$.include('/js/jquery.quicksand.js');
$.include('/js/jquery.snippet.min.js');
$.include('/js/jquery-ui-1.8.17.custom.min.js');
$.include('/js/jquery.cycle.all.min.js');
$.include('/js/jquery.cookie.js');

if($('.tweet').length)
    $.include('/js/jquery.tweet.js');

if($('.lightbox-image').length)
    $.include('/js/jquery.prettyPhoto.js');

if($('#contact-form').length || $('#contact-form2').length)
    $.include('/js/forms.js');

if($('.kwicks').length)
    $.include('/js/kwicks-1.5.1.pack.js');

if($('#counter').length)
    $.include('/js/jquery.countdown.js');

if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)
    $.include('/js/jquery.atooltip.pack.js');

// Slider
$('.main-slider')._TMS({


    MISC

    Don't forget to clear your cache or work in private browsing while testing all of this!

    You can include a .js file either between the head tags , contentplaceholder tags or inside the body tags. This will in all cases be reflected in your other pages that include this masterpage. All you need to focus on is the way that the path is created.

    The code below adds a jquery file to a masterpage in the head section of the masterpage.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>


    <title></title>

<script src="jquery-2.1.1.min.js"></script>

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>


    <form id="form1" runat="server">
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">


    </asp:ContentPlaceHolder>
</div>
</form>
<script>

</script>

    Relative vs Absolute URL's

    By using ../ and ~/ before the url path , you are creating a relative URL. The paths of relative URL's is affected when you change the folder level of either the file that you are referring to or the file which contains the link.

    ../ symbol make one step out of the folder containing the link. make sure you have enough '../' to refer to the correct file.

    ~/ symbol creates a path that starts at the root of your project.

    To create an absolute URL ,Just drag the file you intend to include in the page from solution explorer in Visual Studio to the page.

    For more about the difference between absolute and relative URL's check Difference between Relative path and absolute path in javascript

    Try replacing ~/ with ../. One of my projects was doing the same thing and that fixed it.

    Also, make absolutely certain that even on the server (and not just in the project), the JS folder is directly below the root.

    You should use ~ prefix, before file location. (like this: ~/projects/files/web/admin )

    If you want the js to load on every page, including relative paths, then add it just under the modernizr entry:

    <asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/Scripts/jquery.min.js") %>
    <%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论