ASP.Net母版页和Javascript问题

ASP.Net Master Page and Javascript issue

本文关键字：Javascript 问题 母版页 Net ASP      更新时间：2023-09-26

在我的主页上有以下HTML代码

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Styles/MasterStyleSheet.css" rel="stylesheet" />
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("Scripts/ShoppingCartSideMenuJavaScript.js") %>"></script>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="ShoppingCartSideMenu">
            Just some text
        </div>
        <div class="wrapper">
            <h1 id="SiteTitle">JEWELRY</h1>
            <p id="UnderSiteTitle">EXCLUSIVE SWISS MADE JEWELRY</p>
            <div id="menu">
                <ul>
                    <li><a href="Home.aspx">HOME</a></li>
                    <li><a href="Shop.aspx">SHOP</a></li>
                    <li><a href="About.aspx">ABOUT</a></li>
                    <li><a href="Terms and Conditions.aspx">Terms & Conditions</a></li>
                    <li><a href="Contact.aspx">CONTACT</a></li>
                    <li id="seperator">|
                    </li>
                    <li>
                        <div>
                            <a id="ShoppingCartBtn" onclick="ShoppingCartBtn_Click" runat="server">
                                <img class="ShoppingCart" src="/Images/Icons/Shopping_cart.png" />
                                <label id="CountCartItems">0</label>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <footer>
            <div class="FooterWrapper">
                <div id="FooterDiv1">
                    &copy; 2016 JEWELRY - Created by someone
                </div>
                <div id="FooterDiv2">
                    <a href="#">
                        <img id="FooterFacebook" class="Icons" alt="Facebook" src="/Images/Icons/facebook-logo.png" /></a>
                    <a href="#">
                        <img id="FooterTwitter" class="Icons" alt="Twitter" src="/Images/Icons/twitter-logo.png" /></a>
                    <a href="#">
                        <img id="FooterInstagram" class="Icons" alt="Instagram" src="/Images/Icons/instagram-logo.png" /></a>
                </div>
            </div>
        </footer>
    </form>
</body>
</html>

我在一个单独的js文件中得到了这个Javascript 

var main = function () {
    /* Push menu over by 350px over */
    $('#ShoppingCartBtn').click(function () {
        $('#ShoppingCartSideMenu').animate({
            right: "0px"
        }, 200);
    });
    /* Then push the menu back */
    $('body').click(function () {
        $('#ShoppingCartSideMenu').animate({
            right: "-350px"
        }, 200);
    });
};

$(document).ready(main);

我尝试了这篇文章中建议的所有方法:Net母版页和文件路径问题

但是似乎什么都不起作用

你应该使用ResolveUrl，并像这样从根目录创建url。

Page.ResolveUrl ("~/Scripts/ShoppingCartSideMenuJavaScript.js")

Update:这意味着你在使用它之前没有引用jQuery.js。试试这个。

<script type="text/javascript" src="<%= Page.ResolveUrl("path/to/jquery.js") %>"></script>    
<script type="text/javascript" src="<%= Page.ResolveUrl("~/Scripts/ShoppingCartSideMenuJavaScript.js") %>"></script>
相关文章：