如何避免在布局和视图中使用 javascript 两次 ASP.NET MVC 5
How to avoid using javascript Twice time ASP.NET MVC 5 in layout and view
这是我的布局页面
<!DOCTYPE html>
@using System.Web.Optimization;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author" content="">
<title></title>
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/bundles/metro-ui")
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
@Styles.Render("~/bundles/metro-ui/css")
@Styles.Render("~/bundles/css")
等等
这是我的 RazorView
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/metro.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/metro.css" rel="stylesheet" />
<script src="~/Scripts/select2.min.js"></script>
<link href="~/Content/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<br /><br />
@using (Html.BeginForm("Search", "Home", FormMethod.Get))
{
}
and so on...
我的 Razor View 继承了 Layout 如何在我的 Razor 视图中使用这些脚本我不需要在我的 Razor 视图中再次使用这些脚本请给我一些解决方案...?
从您的视图中删除所有 header 引用,除非它们仅特定于该视图。
如果 MVC 中的视图包含布局,则它们不是完整的页面。布局就是页面。布局中有一个@RenderBody,它会在渲染时替换为您的视图信息。所有常见 javascript 引用都应使用捆绑包添加到布局中。请参阅布局中的 Scripts.Render("~/bundles/jquery") 参考。
即使您有 javascript 特定于单个页面,也应该使用脚本渲染部分添加它。然后在页面加载时添加,而不是在视图呈现时添加。
这是我的布局页面
<!DOCTYPE html>
@using System.Web.Optimization;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author" content="">
<title></title>
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/bundles/metro-ui")
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
@Styles.Render("~/bundles/metro-ui/css")
@Styles.Render("~/bundles/css")
等等
这是我的 RazorView
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/metro.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/metro.css" rel="stylesheet" />
<script src="~/Scripts/select2.min.js"></script>
<link href="~/Content/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<br /><br />
@using (Html.BeginForm("Search", "Home", FormMethod.Get))
{
}
and so on...
我的 Razor View 继承了 Layout 如何在我的 Razor 视图中使用这些脚本我不需要在我的 Razor 视图中再次使用这些脚本请给我一些解决方案...?
从您的视图中删除所有 header 引用,除非它们仅特定于该视图。
如果 MVC 中的视图包含布局,则它们不是完整的页面。布局就是页面。布局中有一个@RenderBody,它会在渲染时替换为您的视图信息。所有常见 javascript 引用都应使用捆绑包添加到布局中。请参阅布局中的 Scripts.Render("~/bundles/jquery") 参考。
即使您有 javascript 特定于单个页面,也应该使用脚本渲染部分添加它。然后在页面加载时添加,而不是在视图呈现时添加。