视图组件中的 Javascript [英] Javascript in a View Component

问题描述

我有一个视图组件，它在 Razor (.cshtml) 文件中包含一些 jQuery.脚本本身非常特定于视图(处理一些第三方库的配置)，因此为了组织起见，我想将脚本和 HTML 保存在同一个文件中.

I have a View Component that contains some jQuery in the Razor (.cshtml) file. The script itself is quite specific to the view (deals with some some configuration of third-party libraries), so I would like to keep the script and HTML in the same file for organization's sake.

问题是脚本没有在_Layout Scripts 部分呈现.显然这只是 MVC 如何处理脚本关于视图组件.

The problem is that the script is not rendered in the _Layout Scripts section. Apparently this is just how MVC handles scripts with regards to View Components.

我可以通过将脚本放在 Razor 文件中来解决这个问题，但不是在脚本部分.

I can get around it by just having the scripts in the Razor file, but not inside of the Scripts section.

但后来我遇到了依赖性问题 - 因为在引用库之前使用了 jQuery(对库的引用位于 _Layout 文件的底部附近).

But then I run into dependency issues - because jQuery is used before the reference to the library (the reference to the library is near the bottom of the _Layout file).

除了在 Razor 代码中包含对 jQuery 的引用(这会阻碍 HTML 呈现在组件所在的位置)之外，还有什么聪明的解决方案吗?

Is there any clever solution to this other than including the reference to jQuery as part of the Razor code (which would impede HTML rendering where ever the component is placed)?

我目前不在代码前面，但如果有人需要查看它以更好地理解它，我当然可以在有机会时提供它.

I'm currently not in front of the code, but I can certainly provide it once I get the chance if anyone needs to look at it to better understand it.

推荐答案

我决定编写一个提供OnContentLoaded"属性的 ScriptTagHelper.如果为 true，那么我将使用 Javascript 函数包装脚本标记的内部内容，以便在文档准备好后执行.这避免了当 ViewComponent 的脚本触发时 jQuery 库尚未加载的问题.

What I decided to do is write a ScriptTagHelper that provides an attribute of "OnContentLoaded". If true, then I wrap the inner contents of the script tag with a Javascript function to execute once the document is ready. This avoids the problem with the jQuery library having not loaded yet when the ViewComponent's script fires.

[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 中的示例用法:

example usage within a ViewComponent:

<script type="text/javascript" on-content-loaded="true">
    $('.button-collapse').sideNav();
</script>

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

There might be a better way than this, but this has worked for me so far.

这篇关于视图组件中的 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！