视图组件中的Javascript

我有一个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>

可能有一个比这更好的方法,但到目前为止这对我有用.