我有一个View组件,在Razor(.cshtml)文件中包含一些jQuery.脚本本身非常特定于视图(处理一些第三方库的配置),因此我想将脚本和
HTML保留在同一个文件中,以便组织起见.
问题是脚本没有在_Layout Scripts部分中呈现.显然,这只是关于View Components的how MVC handles个脚本.
我可以通过在Razor文件中使用脚本来解决它,但不能在Scripts部分内部.
但后来我遇到依赖问题 – 因为在引用库之前使用了jQuery(对库的引用位于_Layout文件的底部附近).
除了将jQuery的引用作为Razor代码的一部分包含在内之外,还有什么聪明的解决方案(这会阻碍HTML呈现放置组件的位置)吗?
我目前不在代码的前面,但是如果有机会,如果有人需要查看它以更好地理解它,我当然可以提供它.
解决方法
我决定做的是编写一个提供“OnContentLoaded”属性的ScriptTagHelper.如果为true,那么我将使用Javascript函数包装脚本标记的内部内容,以便在文档准备好后执行.这避免了当ViewComponent的脚本触发时jQuery库尚未加载的问题.
[HtmlTargetElement("script",Attributes = "on-content-loaded")] public class ScriptTagHelper : TagHelper { /// <summary> /// Execute script only once document is loaded. /// </summary> public bool OnContentLoaded { get; set; } = false; public override void Process(TagHelperContext context,TagHelperOutput output) { if (!OnContentLoaded) { base.Process(context,output); } else { var content = output.GetChildContentAsync().Result; var javascript = content.GetContent(); var sb = new StringBuilder(); sb.Append("document.addEventListener('DOMContentLoaded',"); sb.Append("function() {"); sb.Append(javascript); sb.Append("});"); output.Content.SetHtmlContent(sb.ToString()); } } }
ViewComponent中的示例用法:
<script type="text/javascript" on-content-loaded="true"> $('.button-collapse').sideNav(); </script>
原文地址:https://www.jb51.cc/js/157746.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。