nirh1989 nirh1989 - 4 months ago 14
ASP.NET (C#) Question

ASP.Net Master Page and Javascript issue

I got the following HTML code in my master page

<%@ 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>


I got this Javascript in a separate js file

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);


I tried every way suggested in this post: ASP.Net Master Page and File path issues

But nothing seems to work

Answer

You should use ResolveUrl instead and create url from the root like this.

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

Update: That means you have not referenced jQuery.js before using it. Try this.

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