我一直在尝试将一些代码从 html bootmetro 页面放到 cshtml 页面中。
当我在 cshtml 项目中运行原始 html 页面时，它工作正常；但是，当我在 cshtml 页面中运行相同的代码时，由设置图标触发的将背景颜色更改为深色的 jquery 功能返回此错误：
Timestamp: 05/06/2013 13:46:56
Error: TypeError: $(...).charms is not a function
Source File: http://*l*o*c*a*l*h*o*s*t*:24349/assets/js/demo.js
Line: 29
我已经尝试了以下我没有高兴地研究过的答案：
• 将代码放在cshtml 页面内的@section 脚本中：
@section scripts {
<script>
</script>
}
• 切勿在 ASP.NET MVC 应用程序中对 url 进行硬编码。始终使用助手（或推荐的捆绑包）：
• 确保在_Layout.cshtml 的末尾没有
@Scripts.Render("~/bundles/jquery")调用，因为这将包含两次jQuery。
• 如果最后your _Layout.cshtml有一个专门用于自定义脚本的部分，@RenderSection("scripts", required: false)如document.ready 事件中的脚本，因为在它执行时，DOM 已经被加载）：
• 将脚本标签放在生成表单的部分视图本身中，它现在知道将其绑定到哪个控件。
这是cshtml页面：
@{
}
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>bigint</title>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
<link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
<link rel="stylesheet" type="text/css" href="content/css/icomoon.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/js/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script src="assets/js/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- bigInt favicon -->
<link href="../bigInt_fav.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Jumbotron button styling removed as it affects modal button size */
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
.logo{
position:absolute;
left:10px;
top:10px;
}
</style>
<!-- I had to move a.trigger and active from stylex to here as links to plus & minus png did not work -->
</head>
<body data-accent="blue">
<div id="top-info" class="pull-right">
<a href="#" class="pull-left">
</a>
<a id="settings" class="pull-left" href="#">
<b class="icon-settings"></b>
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="metro span12">
<div class="metro-sections">
<div id="section1" class="metro-section tile-span-4">
<h2>bigint Pages</h2>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/metro-tiles.jpg" />
</div>
<div class="column-text">
<div class="text4">Finished looking at the Windows 8 Metro style theme - then return home</div>
</div>
<div class="app-label">bigint Home</div>
</a>
<a class="tile wide imagetext wideimage bg-color-orange" href="./Home_Slide.html">
<img src="content/img/appbar.png" alt=""/>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
<a class="tile app wide bg-color-greenDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-home"></b>
</div>
<div class="app-label">Contact</div>
</a>
<a class="tile app bg-color-purple" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-list"></b>
</div>
<span class="app-label">Services</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-share"></b>
</div>
<span class="app-label">Projects</span>
</a>
<a class="tile app bg-color-yellow" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<span class="app-label">Quality Improvement</span>
</a>
<a class="tile app bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-globe"></b>
</div>
<span class="app-label">Icons</span>
</a>
</div>
<div id="section2" class="metro-section tile-span-4">
<h2>Other bigint Sites </h2>
<a class="tile wide imagetext bg-color-blue" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<div class="column-text">
<div class="text">Grid system</div>
<div class="text">Layouts</div>
<div class="text">Responsive design</div>
</div>
<span class="app-label">bigint Blog</span>
</a>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Coding app.png" />
</div>
<div class="column-text">
<div class="text">Typography</div>
<div class="text">Tables</div>
<div class="text">Forms</div>
<div class="text">Buttons</div>
</div>
<span class="app-label">bigint Jetstrap</span>
</a>
<a class="tile app bg-color-orange" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img//RegEdit.png" alt="" />
</div>
<span class="app-label">Parners</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Devices.png" alt="" />
</div>
<span class="app-label">Portfolio</span>
</a>
<a class="tile wide imagetext wideimage bg-color-white" href="./Home_Slide.html">
<iframe src="http://www.bigint.biz" width="306" height="200"></iframe>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="charms" class="win-ui-dark">
<div id="theme-charms-section" class="charms-section">
<div class="charms-header">
<a href="#" class="close-charms win-command">
<span class="win-commandimage win-commandring"></span>
</a>
<h2>Settings</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="">
<label for="win-theme-select">Change theme:</label>
<select id="win-theme-select" class="">
<option value="metro-ui-semilight">Semi-Light</option>
<option value="metro-ui-light">Light</option>
<option value="metro-ui-dark">Dark</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='assets/js/jquery-1.8.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootmetro.js"></script>
<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
<script type="text/javascript" src="assets/js/demo.js"></script>
<script type="text/javascript" src="assets/js/holder.js"></script>
<script type="text/javascript">
$(".metro").metro();
</script>
</body>
</html>
这是 siteLayout.cshtml：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
<!-- Original <link href="~/Content/Site.css" rel="stylesheet" /> CSS -->
<link href="@Href("~/bigInt_fav.ico")" rel="shortcut icon" type="image/x-icon" />
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Slideout CSS -->
<link rel="stylesheet" href="stylex.css" type="text/css" media="screen" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
footer#site-footer {
padding-left: 20px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.twitter{ background:url('images/Facebook_Cracked-48x48.png'); }
.delicious{ background:url('images/Twitter_Cracked_48x48.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
</style>
<!-- Default Asp.net Script -->
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- Header section with social icons -->
<header id="banner">
<!-- Script for spinning icons -->
<div class="spinning_icons">
<div class="social">
<a href="https://plus.google.com/100935445850301773475" rel="publisher" ><img src="../images/Google_Cracked-48x84.png" alt="bigInt Google Plus"></a>
<a href="https://www.facebook.com/pages/Bigint/574360432595073" target="_blank"><img src="../images/Facebook_Cracked-48x48.png" alt="Follow Us On Facebook"></a>
<a href="http://twitter.com/bigInt_biz" target="_blank"><img src="../images/Twitter_Cracked_48x48.png" alt="Follow Us On Twitter"></a>
<a href="http://www.linkedin.com/pub/daniel-bye/51/b3b/ab2" target="_blank"><img src="../images/Linkedin_Cracked-48x48.png" alt=" photo Linkedin_Cracked.png"></a>
</div></div>
</br></br></br>
<!-- Top navigation bar-->
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Contact_bigInt.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
<!-- End of top navigation bar-->
</header>
<!-- Asp.net body tag - no need to comment as in use -->
<div id="body">
@RenderBody()
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
最后，这是 demo.js 第 29 行的函数问题：
$(function(){
// this is for the appbar-demo page
if ($("#appbar-theme-select").length){
$("#appbar-theme-select").change(function(){
var ui = $(this).val();
if (ui != '')
$("footer.win-commandlayout")
.removeClass("win-ui-light win-ui-dark")
.addClass(ui);
});
}
// style switcher
if ($("#win-theme-select").length){
$("#win-theme-select").change(function(){
var css = $(this).val();
if (css != '')
updateCSS(css);
});
}
$("#settings").click(function (e) {
e.preventDefault();
$('#charms').charms('showSection', 'theme-charms-section'); // LINE 29
});
// listview demo
$('#listview-grid-demo').on('click', '.mediumListIconTextItem', function(e){
e.preventDefault();
$(this).toggleClass('selected');
});
//$('#home-carousel').carousel({interval: 5000});
});
//function to append a new theme stylesheet with the new style changes
function updateCSS(css){
$("head").append('<link rel="stylesheet" type="text/css" href="content/css/' + css +'.css">');
if($("link[href*=metro-ui-]").size() > 1){
$("link[href*=metro-ui-]:first").remove();
}
};
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
var $window = $(window)
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
e.preventDefault()
})
// side bar
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
// make code pretty
window.prettyPrint && prettyPrint()
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
**, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
selector: '.show-grid > div'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('#myCarousel').carousel()
// javascript build logic
var inputsComponent = $("#components.download input")
, inputsPlugin = $("#plugins.download input")
, inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked'))
})
$('#plugins.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
})
$('#variables.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.download-btn').on('click', function () {
var css = $("#components.download input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins.download input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /\?dev/.test(window.location) ? 'http://*l*o*c*a*l*h*o*s*t*:3000' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
, img: img
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)**
为了满足代码部分允许的字符限制，我不得不从页面中删除很多内容；不过，metroui 背景颜色开关的一切都应该在那里。
感谢大家的关注/帮助。