这是否可以在 Blazor 应用程序中集成 jQuery UI 组件？答案

【问题标题】：Is this possible to integrate jQuery UI components inside Blazor application?这是否可以在 Blazor 应用程序中集成 jQuery UI 组件？
【发布时间】：2019-10-18 11:31:20
【问题描述】：

我想将 jQuery UI 组件集成到 Blazor 客户端应用程序中。 Spinner 组件在 jQuery UI 中看起来更好。这可能吗？怎么集成？

我希望将此 Spinner 组件集成到我的 Blazor 客户端应用程序中？

https://jqueryui.com/spinner/

【问题讨论】：

我问了一个相关问题here，在答案的帮助下，我最终能够使用 JavaScript 互操作创建一个带有 JavaScript 库（包含 jQuery）的 Blazor 应用程序。请参阅我的示例 here（GitHub PR）。

标签： jquery-ui client-side blazor

【解决方案1】：

这是为 JQuery 或 JS 控件创建包装器的方法：

1.- 将 JS 行为包含在函数中：

<script>
  var spinner = null;
  window.myWrapperKSUIfunctions = {

    initialize: function () {
        spinner = $( "#spinner" ).spinner();
        $( "button" ).button();
    },

    dissableclick: function () {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    },

    destroyclick: function () {
      if ( spinner.spinner( "instance" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    },

    getvalueclick: function () {
      alert( spinner.spinner( "value" ) );
    },

    setvalueclick: function () {
      spinner.spinner( "value", 5 );
    },    
  };
</script>

不要忘记包含其他 JS/JQuery 库。

2.- 从 blazor 初始化控件：

@code {

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeAsync<object>("myWrapperKSUIfunctions.initialize");
        }
    }

3.- 从 blazor 调用 JS 函数：

  <button id="disable" 
          @onclick="@( ()=>JustCall("dissableclick") )" >
     Toggle disable/enable
  </button>

@code {

    ...
    protected async Task JustCall(string f)
    {
        wait JsRuntime.InvokeAsync<object>($"myWrapperKSUIfunctions.{f}"); 
    }

Check it out at blazorfiddle.

另外，看看MatBlazor 控件。

【讨论】：

嗨，我在我的服务器端 Blazor 应用程序中使用 Bootstrap 4，但不包括 jQuery，因为我在其他帖子 [这里][1] 和 [这里][2] 中看到了两个 cmets我的印象是在“_Host.cshtml”中包含 jQuery 不是一个好习惯。我是对还是不对？感谢您的时间：）。 [1]：stackoverflow.com/questions/58427837/… [2]：stackoverflow.com/a/54275133/8607675
@Alexander，当然最好是一个没有 JS 和 JQuery 的干净项目。但是，如果您已经拥有 jquery 控件并且您需要尽快在代码中使用它，您能做什么？没有javascript从零开始重写？ Blazor 有 JSInterop 来做这件事。 Bootstrap 需要 jquery 的某些功能（carrusel、popups、...）
感谢您的评论。我搜索的原因是 Bootstrap 轮播和他在手机上的滑动效果。所以也许我会包含 jQuery 的脚本和我需要的所有内容并继续工作，再次感谢你:)。