Возможно ли интегрировать компоненты пользовательского интерфейса jQuery в приложение Blazor?

Question

Я хочу интегрировать компонент пользовательского интерфейса jQuery в клиентское приложение Blazor. Компонент Spinner выглядит лучше в пользовательском интерфейсе jQuery. Это возможно? как его интегрировать?

Я ожидаю интегрировать этот компонент Spinner в мое клиентское приложение Blazor?

https://jqueryui.com/spinner/

Answer 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.- Инициализируйте управление из блазора:

@code {

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

3.- Вызовите функцию JS из блазора:

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

@code {

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

Проверьте это на Blazorfiddle .

Кроме того, взгляните на MatBlazor контроля.