CSharp - 页面底部的部分视图,C# 包括 JavaScript

  显示原文与译文双语对照的内容
75 5

假设我在部分视图中有一个javascript幻灯片放映。

_Slideshow.cshtml:

@{
 ViewBag.Title ="Slide Show";
}
<div id="slides">
</div>
<script src="js/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function(){
 $('#slides').slides({
//slide show configuration...
 });
});
</script>

但是我想成为一个优秀的网页开发人员,并确保我的所有脚本都在页面的底部。因此,我将使 *_Layout.cshtml* 页面看起来像这样:

_Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>@ViewBag.Title</title>
 <link href="@Url.Content("~/css/global.css")" rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="wrapper">
 @RenderBody
 </div>
 <!-- Being a good little web developer, I include my scripts at the BOTTOM, yay!
 -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
</body>
</html>

但是哦,现在我该怎么做,因为我的幻灯片放映脚本结束了 above 我的jQuery包含? !如果我想在每页上放幻灯片放映,但我只希望幻灯片放映部分显示在某个页面上。我希望我的脚本在底部 !怎么办?

时间:原作者:0个回答

64 2

你可以在你的布局页面中为如下脚本定义一个部分:

<body>
 <div id="wrapper">
 @RenderBody
 </div>
 <!-- Being a good little web developer, I include my scripts at the BOTTOM, yay!
 -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
 @RenderSection("myScripts")
</body>

然后在你的页面上定义该部分中的内容:

@{
 ViewBag.Title ="Slide Show";
}
<div id="slides">
</div>
@section myScripts {//put your scripts here
 <script src="js/slides.min.jquery.js"></script>
 <script type="text/javascript">
 $(function(){
 $('#slides').slides({
//slide show configuration...
 });
 });
 </script>
}

然后,当页面呈现时,它将在你的节中获取所有内容并将它的添加到布局页面( 在这种情况下,在底部) 中。

原作者:
74 0

英镑注释: 接受的解决方案将不会工作 部分视图,如下面的问题所示。

问题

在正常流程中,你可以使用 @section SectionName {} 声明从ActionResult的父视图的inside 中定义特定部分的内容。在将该视图插入它的LayoutPage时,可以调用 RenderSection 在页面的任何位置放置这些内容,从而在页面的底部定义可以呈现和解析的任何核心 JavaScript,如下面的所示:

Layout> Full View

当你希望能够重用部分视图的整个页面视图 inside 时,就会出现这个问题。也许你也希望将视图作为一个小部件或者另一个页面 inside的对话框。如果在这种情况下,完全局部视图在你将调用放置到 @Html.EditorFor 或者 @Html.Partial/视图的所有地方都会被渲染,如下所示:

Layout> Parent View> Partial View

根据 MSDN文档的布局与 Razor 语法:

  • 视图中定义的节仅在它的立即布局页面中可用。
  • 部分不能从部分视图,视图组件或者视图系统的其他部分引用。
  • 内容页中的正文和所有节都必须由布局页呈现

在这种情况下,将脚本定义为页面底部的脚本变得非常困难。在每个文档的视图视图中,只能从部分视图调用 RenderSection,而不能在HTML页面的中间部分( 在任何库可能依赖的库) 中定义。解析和运行 @section 内容。

解决办法是什么呢

有关将部分视图从部分视图注入到页面中的许多方法,我首先从以下两个问题开始:

不同的解决方案在支持嵌套。排序。多脚本支持。不同内容类型。调用语法和重用性方面不同。但是,不管你如何切片,几乎任何解决方案都必须完成两个基本任务:

  • 在任何页面。部分视图或者模板中逐渐构建脚本对象,可以能会利用某种HtmlHelper扩展。
  • 将该脚本对象呈现到布局页面。由于布局页面实际上呈现最后,这只是发出我们在母版页上构建的对象。

这里的是一个简单的实现由 Darin Dimitrov

添加 helper 扩展方法,允许你在 ViewContent.HttpContext.Items Collection 中构建任意脚本对象并随后获取并呈现它们。

Utilities.cs

public static class HtmlExtensions
{
 public static MvcHtmlString Script(this HtmlHelper htmlHelper, Func<object, HelperResult> template)
 {
 htmlHelper.ViewContext.HttpContext.Items["_script_" + Guid.NewGuid()] = template;
 return MvcHtmlString.Empty;
 }
 public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
 {
 foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
 {
 if (key.ToString().StartsWith("_script_"))
 {
 var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
 if (template!= null)
 {
 htmlHelper.ViewContext.Writer.Write(template(null));
 }
 }
 }
 return MvcHtmlString.Empty;
 }
}

然后你可以在你的应用程序中使用这样的方法

构建这里脚本对象,如你的部分部分视图这样的对象:

@Html.Script(
 @<script>
 $(function() {
 $("#@Html.IdFor(model => model.FirstName)").change(function() {
 alert("New value is '" + this.value +"'");
 });
 })
 </script>
)

然后在你的LayoutPage的任何地方渲染它们,如下所示:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
@Html.RenderScripts()
原作者:
...