在页面底部包含来自局部视图的JavaScript。

23 浏览
0 Comments

在页面底部包含来自局部视图的JavaScript。

假设我在一个部分视图中有一个 JavaScript 幻灯片展示...

_Slideshow.cshtml:

@{
    ViewBag.Title = "Slide Show";
}

但是我想成为一个优秀的网页开发者，确保所有的脚本都放在页面的底部。所以我会让我的 *_Layout.cshtml* 页面看起来像这样：

_Layout.cshtml:




    
    @ViewBag.Title
    


    @RenderBody

但是糟糕了！现在该怎么办，因为我的幻灯片展示脚本出现在我的 jQuery 引入之前？如果我希望我的幻灯片展示出现在每个页面上，那没什么大问题，但我只想在特定页面上渲染幻灯片展示部分视图，并且... 我希望我的脚本在底部！该怎么办？

0

2 答案

0 Comments

问题的原因是在使用部分视图（partial views）时，无法像问题要求的那样使用解决方案。正常情况下，可以在父视图的ActionResult中使用SectionName {}语句来定义特定部分的内容。当该视图最终插入到其LayoutPage中时，可以调用RenderSection将这些内容放置在页面的任何位置，允许您定义一些内联JavaScript，并在页面底部渲染和解析它所依赖的任何核心库。但是，当您想要在部分视图中重用完整页面视图时，问题就出现了。也许您还希望将视图作为小部件或对话框从另一个页面中使用。在这种情况下，完整的部分视图会完整地呈现在您在父视图中放置了.EditorFor或.Partial调用的地方。根据MSDN上关于使用Razor语法的布局的文档，部分视图中定义的部分仅在其直接布局页面中可用，无法从部分视图、视图组件或视图系统的其他部分引用，内容页面的body和所有部分必须由布局页面渲染。在这种情况下，将定义在部分视图中的脚本移到页面底部变得棘手。根据文档，您只能从布局视图调用RenderSection，不能从部分视图内部定义SectionName的内容，因此所有内容都被放在同一个区域，并且脚本将从HTML页面的中间渲染、解析和运行，而不是在它所依赖的任何库之后的页面底部。

解决方法是通过从部分视图中逐步构建脚本对象，并将其呈现到布局页面上来实现。无论如何，几乎任何解决方案都必须完成两个基本任务：

1. 从任何页面、部分视图或模板中逐步构建脚本对象，可能利用某种HtmlHelper扩展来实现可重用性。

2. 将该脚本对象呈现到布局页面上。由于布局页面实际上是最后渲染的，所以这只是将我们一直在构建的对象发送到主页面上。

以下是这个解决方案的一个简单实现，由Darin Dimitrov提供：

首先，添加帮助器扩展方法，允许您将任意脚本对象构建到ViewContent.HttpContext.Items集合中，并随后提取和呈现它们。

public static class HtmlExtensions
{
    public static MvcHtmlString Script(this HtmlHelper htmlHelper, Func 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;
                if (template != null)
                {
                    htmlHelper.ViewContext.Writer.Write(template(null));
                }
            }
        }
        return MvcHtmlString.Empty;
    }
}

然后，您可以在应用程序中像这样使用：

在部分视图中像这样构建脚本对象：

.Script(
    @
)

然后，在布局页面的任何位置像这样呈现它们：

.Render("~/bundles/jquery")
("scripts", required: false)
.RenderScripts()

这样做可以很好地处理部分视图中的情况。

0
0 Comments

问题的出现原因：

由于在布局页面的底部引入了JavaScript代码，并在页面中定义了一个包含JavaScript代码的部分，所以在页面渲染时，部分视图中的JavaScript代码无法正确添加到布局页面中。

解决方法：

将部分视图中的JavaScript代码添加到视图中的一个部分，并在布局页面的底部引入该部分。注意，这种解决方法不适用于部分视图，只适用于视图。

文章内容如下：

你可以在布局页面中定义一个用于脚本的部分，如下所示：


    

    

    
    
    @RenderSection("myScripts")

然后在你的页面中定义放在该部分中的内容：

@{
    ViewBag.Title = "Slide Show";
}




@section myScripts {
    
    
}

这样，当页面渲染时，会将部分视图中的内容添加到布局页面的相应位置（在这个例子中，是在底部）。

注意：这种方法不适用于部分视图。你不能在部分视图中使用部分，而是需要在包含部分视图的视图中添加部分。

希望对你有所帮助！

0