gpt4 book ai didi

javascript - 布局上的脚本可以传播到 View 吗?

转载 作者:行者123 更新时间:2023-12-03 06:41:35 26 4
gpt4 key购买 nike

我对 layout 上的脚本有问题,所以我从基础知识开始尝试了解 @RenderSection("scripts", 正在做什么,现在我让它工作了。

但是我可以将 Jquery/Jquery.UI (js/css) 放在布局中,这样我就不必将它放在每个 View 上吗?因为我尝试将其放在布局上的 head 标签内,但 View 没有看到它。

这是我的布局。

<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>Test Layout</h1>
<div>
@RenderBody()
</div>
</body>
</html>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

还有我的观点

@{
ViewBag.Title = "TreeDetails";
Layout = "~/Views/Shared/_LayoutTest.cshtml";
}
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h2>TEST PAGE</h2>

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

</body>
</html>

@section scripts {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
// Your code goes here.
$(document).ready(function () {
console.log("before dialog");
$("#dialog").dialog({ autoOpen: false });
console.log("after dialog");

$("#opener").click(function () {
$("#dialog").dialog("open");
});
})
</script>
}

最佳答案

您的代码存在一些问题,包括在文档外部渲染脚本、复制脚本(包括脚本部分中的 css 文件)以及复制 <html> , <head><body> View 中的标签。

布局的基本结构应该是

<html>
<head>
<title>@ViewBag.Title</title>
....
// Add style sheets common to all views using this layout
@Styles.Render("~/Content/css")
// Add the place holder for any view specific css files
@RenderSection("styles", required: false)
// Include modernizr
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<h1>Test Layout</h1>
<div>
@RenderBody()
</div>
// Add js files common to all views using this layout
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
// Add the place holder for any view specific js files
@RenderSection("scripts", required: false)
</body>
</html>

以及 View

@{
ViewBag.Title = "TreeDetails";
Layout = "~/Views/Shared/_LayoutTest.cshtml";
}
<h2>TEST PAGE</h2>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

// View specific style sheets
@section styles {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
}

// View specific scripts
@section scripts {
// Note: don't repeat jquery-{version}.js
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
console.log("before dialog");
$("#dialog").dialog({ autoOpen: false });
console.log("after dialog");
$("#opener").click(function () {
$("#dialog").dialog("open");
})
</script>
}

注意:使用$(document).ready(function () {在这种情况下并不是绝对必要的,因为脚本是在关闭 </body> 之前立即渲染的。标签,但如果你要移动 @Scripts.Render(...)@RenderSection("scripts", required: false)进入<head>布局的标签,那么它是必需的。

关于javascript - 布局上的脚本可以传播到 View 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37934246/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com