【发布时间】：2018-09-06 02:17:16
【问题描述】：
我是新的 MVC，页面布局如下图所示。问题是所有模块级别的页眉、侧边菜单、页脚相关的 js 文件都捆绑在一起，这些页眉菜单、侧边菜单、页脚位于 _Layout.cshtml 页面中。每次我从主页（Index.cshtml）视图转到播放列表菜单项（Playlist.cshtml）视图时，所有这些部分的 JS 文件都会被加载和执行。问题是如果我在主页的页脚播放歌曲，然后转到播放列表页面（Index.cshtml 和 Playlist.cshtml 都在正文部分呈现），那么我需要在 PlayList.cshtml 页面中播放相同的歌曲，而不是重新加载 JS 文件以在每个新页面中创建一个新的音乐播放器。我如何实现这一目标？在页脚播放相同的音乐，无论我在哪个页面（视图），除非我自己更改音乐。
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Favicon icon -->
<link rel="shortcut icon" href="~/assets/images/favicon.png" type="image/x-icon">
<link rel="icon" href="~/assets/images/favicon.ico" type="image/x-icon">
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Required Fremwork -->
<link rel="stylesheet" type="text/css" href="~/Content/Template/vendor/bootstrap/css/bootstrap.min.css">
<link href="~/Content/css/ChatStyle.css" rel="stylesheet" />
<!-- Style.css -->
<link rel="stylesheet" type="text/css" href="~/assets/css/main.css">
<!-- Responsive.css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/responsive.css">
<!--color css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/color/color-1.min.css" id="color" />
@RenderSection("head", required: false)
<link rel="stylesheet" type="text/css" href="~/Content/Album/css/albums.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/js/mediaelement-and-player_2.13.1.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/mep-feature-playlist-master/mep-feature-playlist.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Poppins.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.sticky-footer {
position: fixed;
bottom: 0;
width: 100%;
}
/*original*/
.liked::before {
color: #600;
content: '\f004';
}
.not-liked::before {
color: #aaa;
content: '\f08a';
}
.smallWidth {
width: 400px;
}
</style>
</head>
<body class="sidebar-mini fixed">
<div class="loader-bg">
<div class="loader-bar">
</div>
</div>
<div class="wrapper">
<!-- Navbar-->
<header class="main-header-top hidden-print">
<a href="index.html" class="logo"><img class="img-fluid able-logo" src="~/assets/images/logo.png" alt="Theme-logo"></a>
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button--><a href="#!" data-toggle="offcanvas" class="sidebar-toggle"></a>
<!-- Navbar Right Menu-->
<div class="navbar-custom-menu f-right p-absolute">
<ul class="top-nav">
<!--Notification Menu-->
<li class="dropdown pc-rheader-submenu message-notification search-toggle">
<a href="#!" id="morphsearch-search" class="drop icon-circle txt-white">
<i class="icofont icofont-search-alt-1"></i>
</a>
</li>
<li class="dropdown notification-menu">
<a href="#!" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle">
<i class="icon-bell"></i>
<span class="badge badge-danger header-badge">9</span>
</a>
<ul class="dropdown-menu">
<li class="not-head">You have <b class="text-primary">4</b> new notifications.</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-1.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block-time">2min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-2.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block-time">20min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-3.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block-time">3 hours ago</span></div>
</a>
</li>
<li class="not-footer">
<a href="#!">See all notifications.</a>
</li>
</ul>
</li>
<!-- chat dropdown -->
<li class="pc-rheader-submenu ">
<a href="#!" class="drop icon-circle displayChatbox">
<i class="icon-bubbles"></i>
<span id="msgCount" class="badge badge-danger header-badge blink"></span>
</a>
</li>
<!-- window screen -->
<li class="pc-rheader-submenu">
<a href="#!" class="drop icon-circle" onclick="javascript:toggleFullScreen()">
<i class="icon-size-fullscreen"></i>
</a>
</li>
<!-- User Menu-->
<li class="dropdown">
<a href="#!" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle drop icon-circle drop-image">
<span><img class="img-circle " src="~/assets/images/avatar-1.png" style="width:40px;" alt="User Image"></span>
<span>John <b>Doe</b> <i class=" icofont icofont-simple-down"></i></span>
</a>
<ul class="dropdown-menu settings-menu">
<li><a href="#!"><i class="icon-settings"></i> Settings</a></li>
<li><a href="profile.html"><i class="icon-user"></i> Profile</a></li>
<li><a href="message.html"><i class="icon-envelope-open"></i> My Messages</a></li>
<li class="p-0">
<div class="dropdown-divider m-0"></div>
</li>
<li><a href="lock-screen.html"><i class="icon-lock"></i> Lock Screen</a></li>
<li><a href="#!"><i class="icon-logout"></i> Logout</a></li>
</ul>
</li>
</ul>
<!-- search -->
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form">
<input class="morphsearch-input" type="search" placeholder="Search..." />
<button class="morphsearch-submit" type="submit">Search</button>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2>People</h2>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://0.gravatar.com/avatar/81b58502541f9445253f30497e53c280?s=50&d=identicon&r=G" alt="Sara Soueidan" />
<h3>Sara Soueidan</h3>
</a>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://1.gravatar.com/avatar/9bc7250110c667cd35c0826059b81b75?s=50&d=identicon&r=G" alt="Shaun Dona" />
<h3>Shaun Dona</h3>
</a>
</div>
<div class="dummy-column">
<h2>Popular</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="PagePreloadingEffect" />
<h3>Page Preloading Effect</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="DraggableDualViewSlideshow" />
<h3>Draggable Dual-View Slideshow</h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="TooltipStylesInspiration" />
<h3>Tooltip Styles Inspiration</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="NotificationStyles" />
<h3>Notification Styles Inspiration</h3>
</a>
</div>
</div><!-- /morphsearch-content -->
<span class="morphsearch-close"><i class="icofont icofont-search-alt-1"></i></span>
</div>
<!-- search end -->
</div>
</nav>
</header>
<!-- Side-Nav-->
<aside class="main-sidebar hidden-print ">
<section class="sidebar" id="sidebar-scroll">
<div class="user-panel">
<div class="f-left image"><img src="~/assets/images/avatar-1.png" alt="User Image" class="img-circle"></div>
<div class="f-left info">
<p>John Doe</p>
<p class="designation">Weather <i class="icofont icofont-caret-down m-l-5"></i></p>
</div>
</div>
<!-- sidebar profile Menu-->
<ul class="nav sidebar-menu extra-profile-list">
<li>
<a class="waves-effect waves-dark" href="profile.html">
<i class="icon-user"></i>
<span class="menu-text">View Profile</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-settings"></i>
<span class="menu-text">Settings</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-logout"></i>
<span class="menu-text">Logout</span>
<span class="selected"></span>
</a>
</li>
</ul>
<!-- Sidebar Menu-->
<ul class="sidebar-menu">
<li class="nav-level">Navigation</li>
<li class="active treeview">
<a class="waves-effect waves-dark" href="index.html">
<i class="icon-speedometer"></i><span> Dashboard</span>
</a>
</li>
<li class="nav-level">Components</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-briefcase"></i><span> UI Elements</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="accordion.html"><i class="icon-arrow-right"></i> Accordion</a></li>
<li><a class="waves-effect waves-dark" href="button.html"><i class="icon-arrow-right"></i> Button</a></li>
<li><a class="waves-effect waves-dark" href="label-badge.html"><i class="icon-arrow-right"></i> Label Badge</a></li>
<li><a class="waves-effect waves-dark" href="bootstrap-ui.html"><i class="icon-arrow-right"></i> Grid system</a></li>
<li><a class="waves-effect waves-dark" href="box-shadow.html"><i class="icon-arrow-right"></i> Box Shadow</a></li>
<li><a class="waves-effect waves-dark" href="color.html"><i class="icon-arrow-right"></i> Color</a></li>
<li><a class="waves-effect waves-dark" href="light-box.html"><i class="icon-arrow-right"></i> Light Box</a></li>
<li><a class="waves-effect waves-dark" href="notification.html"><i class="icon-arrow-right"></i> Notification</a></li>
<li><a class="waves-effect waves-dark" href="panels-wells.html"><i class="icon-arrow-right"></i> Panels-Wells</a></li>
<li><a class="waves-effect waves-dark" href="tabs.html"><i class="icon-arrow-right"></i> Tabs</a></li>
<li><a class="waves-effect waves-dark" href="tooltips.html"><i class="icon-arrow-right"></i> Tooltips</a></li>
<li><a class="waves-effect waves-dark" href="typography.html"><i class="icon-arrow-right"></i> Typography</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-chart"></i><span> Charts & Maps</span><span class="label label-success menu-caption">New</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="float-chart.html"><i class="icon-arrow-right"></i> Float Charts</a></li>
<li><a class="waves-effect waves-dark" href="morris-chart.html"><i class="icon-arrow-right"></i> Morris Charts</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-book-open"></i><span> Forms</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="form-elements-bootstrap.html"><i class="icon-arrow-right"></i> Form Elements Bootstrap</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-materialize.html"><i class="icon-arrow-right"></i> Form Elements Material</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-advance.html"><i class="icon-arrow-right"></i> Form Elements Advance</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" id="mnItemPlaylist">
<i class="icon-list"></i><span> Play Lists</span>
</a>
</li>
<li class="nav-level">More</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-docs"></i><span>Pages</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li class="treeview">
<a href="#!"><i class="icon-arrow-right"></i><span> Authentication</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="register1.html" target="_blank"><i class="icon-arrow-right"></i> Register 1</a></li>
<li><a class="waves-effect waves-dark" href="login1.html" target="_blank"><i class="icon-arrow-right"></i><span> Login 1</span></a></li>
<li><a class="waves-effect waves-dark" href="forgot-password.html" target="_blank"><i class="icon-arrow-right"></i><span> Forgot Password</span></a></li>
<li><a class="waves-effect waves-dark" href="profile.html"><i class="icon-arrow-right"></i> Profile</a></li>
</ul>
</li>
<li><a class="waves-effect waves-dark" href="lock-screen.html" target="_blank"><i class="icon-arrow-right"></i> Lock Screen</a></li>
<li><a class="waves-effect waves-dark" href="404.html" target="_blank"><i class="icon-arrow-right"></i> Error 404</a></li>
<li><a class="waves-effect waves-dark" href="sample-page.html"><i class="icon-arrow-right"></i> Sample Page</a></li>
<li><a class="waves-effect waves-dark" href="search-result.html"><i class="icon-arrow-right"></i> Search Result</a></li>
</ul>
</li>
<li class="nav-level">Menu Level</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icofont icofont-company"></i><span>Menu Level 1</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Two
</a>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Two</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Three
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Three</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
<!-- Sidebar chat start -->
<!-- Sidebar chat end-->
<div class="content-wrapper">
<!-- Container-fluid starts -->
<!-- Main content starts -->
<div class="container-fluid">
<!-- Item -->
@RenderBody()
</div>
<!-- Main content ends -->
<!-- Container-fluid ends -->
<!-- Page Footer-->
<footer id="sticky-footer" class="sticky-footer">
@Html.Partial("_fullPlayer")
</footer>
</div>
</div>
<script src="~/assets/plugins/jquery/dist/jquery.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="~/assets/plugins/tether/dist/js/tether.min.js"></script>
<!-- Required Fremwork -->
@*Added by*@
<script src="~/Content/Template/vendor/popper.js/umd/popper.min.js"></script>
<script src="~/Content/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="~/signalr/hubs"></script>
<script src="~/Scripts/Modules/Home/ChatBarJS.js" type="text/javascript"></script>
<!-- notification -->
<script src="~/assets/plugins/notification/js/bootstrap-growl.min.js"></script>
<div id="modPlayList" class="modcon" style="width: 20%;height:20%"></div>
@Scripts.Render("~/bundles/mediaelement")
@Scripts.Render("~/bundles/modules")
@RenderSection("scripts", false)
<script type="text/javascript">
$(document).ready(function () { // JQuery not loaded here, $ is undefined
$.getScript('../Scripts/Modules/musicCloud.js', function () {
var $window = $(window);
var nav = $('.fixed-button');
$window.scroll(function () {
if ($window.scrollTop() >= 200) {
nav.addClass('active');
}
else {
nav.removeClass('active');
}
});
$(function () {
$('#mnItemPlaylist').click(function () {
$.get('@Url.Action("PlayList", "PlayList",new {url = "/api/albums" })', function (data) {
debugger;
musicCloud.playlist.AppendToAlbums(data, 'New Releases');
});
});
});
});
});
</script>
</body>
</html>
【问题讨论】：
-
你真的是说你不希望页面在视图之间移动时刷新，这样音乐播放器就不会重新启动（因为整个页面已经重新加载？如果是这样，那么考虑使用ajax 和部分视图，或使用客户端 MVC 框架，例如 Angular
-
@adyson 我已经在使用 ajax 但是我如何使用通过 jquery 操作的 json 数据渲染部分视图（在成功的 ajax 调用之后）并替换 _layout.cshtml 中已经使用索引的 @renderbody()带有部分视图的 .cshtml 说 _Playlist.cshtml
-
"带有 json 数据的局部视图"...这是什么意思？部分视图应该包含 HTML，而不是 JSON。无论如何，您不想替换 renderbody() Razor 方法，它在服务器端运行。您需要的是 index.cshtml 本身并没有真正显示任何内容，它所做的是包含一些 JS 代码，这些代码根据一些数据加载相关的局部视图，例如菜单选择。可能你甚至根本不需要布局页面，只需将所有内容放在索引视图中，这将成为应用程序中唯一的完整视图
-
很抱歉让您感到困惑。这是我第一个使用 Asp.net MVC 的项目，自学。在我之前的评论中附加的布局图像中，呈现身体@RenderBody 的部分已呈现Index.cshtml（与所有音乐播放器一起）。其他所有页脚和菜单都在布局页面中。我唯一的要求是，每当我单击菜单项时，我想在 RenderBody() 部分加载一个页面，只刷新该部分，就像我们在使用 masterpage ScriptManager 和更新面板的 web 表单中所做的那样。我想加载的另一个页面具有与 json 数据绑定的动态 html
-
“我想在 RenderBody() 部分加载一个页面，只刷新该部分”...是的，这就是您在 MVC 设置中使用 ajax 和部分视图的目的。如果您在 index.cshtml 中拥有所有内容，并且没有布局页面，那么您的菜单项可以轻松触发 ajax 请求（而不是触发指向新视图的链接），这将容易得多。这个概念基本上被称为“单页应用程序”
标签： javascript asp.net-mvc asp.net-mvc-5