我有一个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>
可能有一个比这更好的方法,但到目前为止这对我有用.
