我尝试在视图组件的视图中添加一个section脚本。
@section scripts {
<script src="~/somepath" asp-append-version="true"></script>
}
共享布局中还有渲染部分
@RenderSection("scripts", required: false)
当在局部视图和项目的其他地方使用时,脚本加载正常。但是,当在视图组件中使用时,脚本不加载。
我想我可以在调用组件的每个视图的section标记中包含脚本,我觉得这不符合视图组件的自包含特性。
我还有别的办法吗?
7条答案
按热度按时间xienkqul1#
我在视图组件中也遇到了sections标签的问题,据我所知,视图组件中没有对它的支持,请参见https://github.com/aspnet/Home/issues/2037
Jake Shakesworth实现了一个标记帮助器,如中所示:Javascript in a View Component
另一方面,您可以将其作为
我的要求是从视图组件中显示谷歌Map,问题是脚本在jquery,jquery. ui之前被调用。
通过使用defer,你可以告诉解析器在文档加载之前不要执行它,从而避免了为了正确执行而必须将它放入布局中的问题。chrome,safari和ie(10+),ff(3.6+),o(15+)支持defer
希望这能帮上忙
这是我的代码的一个例子:
注意,如果视图组件在页面上出现多次,您可能需要编写一些逻辑来防止脚本被多次包含,但我的情况并非如此
o2rvlv0m2#
从我所看到的情况来看,ViewComponent中的
"@section Scripts {}"
被忽略,并且不会在ViewComponents _*layout.cshtml
的相关@RenderSection()
中呈现我不知道为什么会这样。
gywdnpxw3#
@section scripts { }在视图组件中被忽略,不会被ASP.NET渲染引擎渲染。所以只在视图组件的末尾使用。另外,如果你的jquery脚本在布局的末尾指定,那么jquery在视图组件中将不可用。当然,将jquery脚本移动到布局的head部分将解决这个问题,但建议在末尾加载js文件。
因此,如果你想在布局的最后保留jquery脚本,并且仍然在视图组件中使用jquery,你可以使用javascript domcontentloaded,任何jquery都可以在domcontentloaded中编写,这不是一个永久的好方法,但对我来说很有效。
或者像@Alberto L. Bonfiglio提到的,你也可以试着把你的脚本移到另一个JS文件中,然后延迟加载到你的视图组件中:
izj3ouym4#
这就是我使用Asp.netcore2.0将脚本插入视图组件的方法。
首先,我创建了一个局部视图,并将其放置在视图零部件视图文件夹中。
路径:* 视图/共享/组件/日历小部件/_日历脚本部分.cshtml*
_日历脚本部分.cshtml
然后,我通过视图组件视图中的Htmlpartialasynchelper方法引入脚本。
路径:* 视图/共享/组件/日历小部件/默认.cshtml*
默认.cshtml
为了完整起见,这里是我的视图组件类。
路径:* 视图组件/日历小部件视图组件.cs*
日历小部件视图组件.cs
注意:在我的例子中,异步不是必需的,但是我打算将一个存储库注入到类的ctor中,该类将使用async/await。
注2:一旦我完成了这个开发,我计划捆绑和缩小到一个脚本的一切。
yeotifhr5#
我在一个作用域服务中注册ViewComponents脚本,然后在布局中的脚本部分之后呈现注册的脚本。
查看组件服务.cs
不要忘记在启动时注册服务。
视图组件示例
这里我们有ViewComponent和它的脚本在同一个文件中!
布局
ugmeyewa6#
在页面完全加载后,如果控制器在模态元素或其他元素中调用ViewComponent,defer也不起作用。相反,您必须将这些脚本放在父视图或_Layout中。在我的示例中,它是一个 AJAX 表单和
甚至
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
都不会被加载,从而导致正确发布表单的问题。1zmg4dgp7#
NET核心中的视图组件就像具有独立控制器的独立视图,因此您可以在视图组件上方插入bellow标记
之后插入bellow标签以使用相关脚本,例如: