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

问题描述

我有一个View组件，其中包含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如何处理脚本关于View Components。

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).

除了将jQuery的引用作为Razor代码的一部分包含在内之外，还有其它聪明的解决方案（这将阻碍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.

推荐答案

我决定做的是写一个ScriptTagHelper，提供OnContentLoaded属性。如果为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屋！