I have placed a bootstrap navbar in a .net masterpage. This code runs perfectly when on another page without the masterpage, but if on the masterpage, it does not work.
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/pnotify/css/jquery.pnotify.default.icons.css" rel="stylesheet"
type="text/css" />
<script src="../plugins/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.15/jquery.form-validator.min.js"
type="text/javascript"></script>
<script src="../plugins/notify/notify.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Log Out</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Anyone? About to throw my computer out the window.
/Bob
if you check your browser inspection tool, I think you may be having this error:
Error("Bootstrap requires jQuery")
Bootstrap.js has a jQuery dependency. So you need to load the jQuery first script before bootstrap.js.
this should be the order. right above the </body> tab. The path should be relative to where you have placed your file.
NOTE: use /parent_folder/..path_to_your_files
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
Hope this helps. :-)
Related
I use a _layout cshtml to get all the same start screen. It works on the index page but when i go to the next the css of bootstrap is missing. I added a bootstrap layout but know it doesnt do the layout on the next screen. I could also send you the zip if you want with all the code. The index false exist out only the layout page without any content when you go to an other page you get the text of the layout but not the bootstrap css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Project</title>
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/favicon.png" />
</environment>
</head>
<body>
<div id="wrapper">
<header>
<div class="container ">
<!-- end toggle link -->
<div class="row nomargin">
<div class="span12">
<div class="headnav">
<ul>
<li><a asp-area="" asp-controller="Home" asp-action="Registreer"><i class="icon-user"></i>Registreer</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Login" data-toggle="modal">Inloggen</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span2">
<div class="logo">
<a asp-area="" asp-controller="Home" asp-action="Index"><img src="img/logo_kraan.jpg" alt="" class="logo" /></a>
</div>
</div>
<div class="span10">
<div class="navbar navbar-static-top ">
<div class="navigation">
<nav>
<ul class="nav topnav">
<li class="">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</i></a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Statuten">Statuten</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Bestuur">Raad van bestuur</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Seminaries">Seminaries</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="ESCL">Over ESCL</a>
</li>
<li class="dropdown">
Opdrachten <i class="icon-angle-down"></i>
<ul class="dropdown-menu bold">
<li><a asp-area="" asp-controller="Home" asp-action="OverheidsOpdrachten">OverheidsOpdrachten</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="PrivateOpdrachten">Private Opdrachten</a></li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Forum">forum</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact </a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</div>
</div>
</header>
</div>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
<hr />
</div>
<environment include="Development">
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jcarousel/jquery.jcarousel.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<script src="js/animate.js"></script>
<!-- Template Custom JavaScript File -->
<script src="js/custom.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
<footer>
<div class="container">
<div class="row">
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Browse pages</h5>
<ul class="link-list">
<li>About our company</li>
<li>Our services</li>
<li>Meet our team</li>
<li>Explore our portfolio</li>
<li>Get in touch with us</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Important stuff</h5>
<ul class="link-list">
<li>Press release</li>
<li>Terms and conditions</li>
<li>Privacy policy</li>
<li>Career center</li>
<li>Flattern forum</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Get in touch with us</h5>
<address>
<strong>Flattern studio, Pte Ltd</strong><br>
Springville center X264, Park Ave S.01<br>
Semarang 16425 Indonesia
</address>
<p>
<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
<i class="icon-envelope-alt"></i> email#domainname.com
</p>
</div>
</div>
</div>
</div>
<div id="sub-footer">
<div class="container">
<div class="row">
<div class="span6">
<div class="copyright">
<p>
<span>©BVBR-ABDC</span>
</p>
</div>
</div>
<div class="span6">
<ul class="social-network">
<li><i class="icon-facebook icon-square"></i></li>
<li><i class="icon-twitter icon-square"></i></li>
<li><i class="icon-linkedin icon-square"></i></li>
<li><i class="icon-pinterest icon-square"></i></li>
<li><i class="icon-google-plus icon-square"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</html>
Bootstrap template:
https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/
All the file references you use in this sample are relative to the page path, so the files need to be there. Since ASP.net will start the default "home" page at (for instance) at http://localhost:33333/ the browser will request that url + css/filename.css and this will work for the first page.
Although if you navigate to http://localhost:33333/Home/Index (which is essentially the same page) it won't work anymore, because the browser will request the css at url + /home/index relative path + css/filename.css (resulting in not finding http://localhost:333333/home/css/filename.css )
You can resolve this quite easily by altering your layout.cshtml from this:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
to this:
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" />
<!-- ^ --->
as you can see there is an added slash (/) before the file path. This will instruct the browser to always use the root of the url and not a relative path to the current location.
I have a bootstrap navbar with some items, but when I click on it, nothing happens. In the console of the Chrome, isn't showing any error.
I added the tags as the bootstrap site asks.
Someone have any idea of what's wrong?
Above is my _Layout.cshtml code:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>p.align{padding-left: 2em }</style>
<title>#ViewData["Title"] - PakaPaka Store</title>
<environment include="Development">
<link rel="stylesheet" href="~/Content/site.css"/>
</environment>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand"> <img src=#ViewBag.Logo height="50"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-controller="Site" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Dash" asp-action="Products">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Site" asp-action="Contact">Contato</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<footer>
<hr />
<p class="align">
<a href="https://www.instagram.com/pakapaka.store/">
<i class="fab fa-instagram fa-lg"></i>
</a>
<a href="https://www.facebook.com/pakapaka.store/">
<i class="fab fa-facebook-square fa-lg"></i>
</a>
</p>
<p class="align">© 2018 - Desenvolvido por: Hatsumi Higuchi Hashinaga</p>
</footer>
</div>
<environment include="Development">
<script src="~/Content/site.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
The way you're doing is a .Net Core way. Using .Net Framework you can use an specific syntax to define links to controllers, like so:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Início", "Index", "Home")</li>
<li>#Html.ActionLink("Sobre", "About", "Home")</li>
<li>#Html.ActionLink("Contato", "Contact", "Home")</li>
</ul>
For more info you can check the docs.
I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.
Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL
I have the following master page in asp .net:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Le 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]-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<form id="form1" runat="server">
<div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div> <!-- /container -->
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The navigation is made like this for every page:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
What I cannot figure out is how could I make it so that, if admin is requesting the page, add the Boss Stuff link?
In terms of session management and all that it's all good, I'm able to determine in my code behind if the user is admin, what I do not know is how to add the boss link only if he is admin on page load.
What might be a 'best' or standard practice way to do this?
Thanks
I mean, literally, how do I, from my page load event, add links to my navigation. How do I go from the CS to the aspx?
Assuming you are using .Net membership, something as simple as this could be done if you want to do it in the page markup:
<% if (Page.User.IsInRole("Admin"))
{ %>
Boss Stuff
<% } %>
I am having trouble getting the jQuery easySlider working. Can anyone find where I am going wrong?
<%# Page Title="About me" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="About.aspx.cs" Inherits="About" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>About me</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</asp:Content>
The jQuery files name and paths are all correct. I can't seem to find where else the problem might be.
EDIT
When the page is rendered, this is what the HTML code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>About me</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type='text/javascript' src='Scripts/jquery.cookie.js'></script>
<script type='text/javascript' src='Scripts/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#accordion-menu').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
showCount: false,
speed: 'slow'
});
$('#slider').easySlider();
});
</script>
</head>
<body>
<div id="header">
<div class="headerLogo"><img src="Styles/images/reading_uni_logo.gif" /></div>
<div class="loginDisplay">Welcome <span id="HeadLoginName">Username</span>! | Logout</div>
<div class="news">
</div>
<div class="polls"><span id="question">Do you think the library should be open 24 hours?</span>
<br />See more</div>
</div>
<div id="addGadgetButton">Add gadget</div>
<div id="menu">
<ul class="menu" id="accordion-menu">
<li>Home</li>
<li class="current-parent">Getting Started</li>
<li>Apps
<ul>
<li>Apps 1</li>
<li>Apps 2</li>
<li>Apps 3</li>
</ul>
</li>
<li>Social
<ul>
<li>Social 1</li>
<li>Social 2</li>
<li>Social 3</li>
<li>Social 4</li>
</ul>
</li>
<li>About me</li>
</ul>
</div>
<div id="main">
<h2>
About me
</h2>
<p> Info on the user logged in.</p>
<p>Name:</p>
<p>Student number:</p>
<p>If information displayed is incorrect, please email with corect details.</p>
<div id="slider">
<ul>
<li><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></li>
<li><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
<div class="clear" />
<div id="footer">
<a id="FeedbackHyperLink" href="Feedback.aspx">Feedback</a> |
<a id="ContactHyperLink" href="Contact.aspx">Contact us</a> |
<a id="SitemapHyperLink" href="Sitemap.aspx">Sitemap</a> |
<a id="HelpHyperLink" href="Help.aspx">Help</a>
</div>
</body>
</html>
Try referencing jquery-1.7.js first:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
Since easySlider1.7.js extends jquery and expects it to be already defined.
Anytime you use a jquery plugin(jquery UI or whatnot), remember to reference jquery first. I looked at the examples for easySlider1.7, and the examples correctly references jquery first. A good debugging technique to use is to start with what works, i.e. the examples, and try to find the differences between what works and what doesn't. In this case the difference was that you referenced jquery after the plugin.
You need to load jQuery before you load easySlider, so just change the order of the scripts:
From:
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
To:
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script>
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script>
That should do the trick :)