Giter Club home page Giter Club logo

blazor-jsinterop-helpers's Introduction

Readme-Banner-1200x300

Nuget (with prereleases) Nuget

Table of Contents

  1. Overview
  2. Installation
  3. Usage
  4. Documentation
  5. License

Overview

When building robust and complex razor components using Blazor, interactions with the Document Object Model (DOM) become inevitable.

This package extends the JavaScript (JS) interoperability in Blazor through helpers for interacting with the DOM's Window and Element APIs.

Installation

Package Manager

Install-Package Blazor.JSInterop.Handlers -Version 1.1.1

.NET CLI

dotnet add package Blazor.JSInterop.Handlers

PackageReference

<PackageReference Include="Blazor.JSInterop.Handlers" Version="1.1.1">

Usage

To use the package, you first need to configure your dependency injection (DI) container. Add the following line of code to your Program.cs:

builder.Services.AddBlazorInteropHandlers();

Then add references to the namespaces in your _Imports.razor or as directives at the top of your razor component's page:

@using Blazor.JSInterop.Helpers.Services
@using Blazor.JSInterop.Helpers.Models

Finally, inject instances of the service as needed in your razor component in your directive section or code section:

// In directive section
@inject IElementHandler elementHandler
@inject IWindowHandler windowHandler

// In code section
@code
{
    [Inject] IElementHandler elementHandler;
    [Inject] IWindowHandler windowHandler;
}

Documentation

View complete API documentation and examples on the wiki

License

This project is licensed under MIT. Feel free to re-use any libraries or code for non-commercial use but do your due diligence with attributing credit.

blazor-jsinterop-helpers's People

Contributors

asathkumara avatar

Stargazers

avatar

Watchers

avatar

Forkers

univerise studyfor-future

blazor-jsinterop-helpers's Issues

Server-side Blazor gives an error when trying to use this package

this is the console output regarding the error:

 ---> System.InvalidOperationException: Error while validating the service descriptor 'ServiceType: Blazor.JSInterop.Helpers.Services.IElementHandler Lifetime: Singleton ImplementationType: Blazor.JSInterop.Helpers.Services.ElementHandler': Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'Blazor.JSInterop.Helpers.Services.IElementHandler'.
 ---> System.InvalidOperationException: Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'Blazor.JSInterop.Helpers.Services.IElementHandler'.
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.VisitScopeCache(ServiceCallSite scopedCallSite, CallSiteValidatorState state)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.VisitConstructor(ConstructorCallSite constructorCallSite, CallSiteValidatorState state)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.ValidateCallSite(ServiceCallSite callSite)
   at Microsoft.Extensions.DependencyInjection.ServiceProvider.ValidateService(ServiceDescriptor descriptor)
   --- End of inner exception stack trace ---
   at Microsoft.Extensions.DependencyInjection.ServiceProvider.ValidateService(ServiceDescriptor descriptor)
   at Microsoft.Extensions.DependencyInjection.ServiceProvider..ctor(ICollection`1 serviceDescriptors, ServiceProviderOptions options)
   --- End of inner exception stack trace ---
   at Microsoft.Extensions.DependencyInjection.ServiceProvider..ctor(ICollection`1 serviceDescriptors, ServiceProviderOptions options)
   at Microsoft.Extensions.DependencyInjection.ServiceCollectionContainerBuilderExtensions.BuildServiceProvider(IServiceCollection services, ServiceProviderOptions options)
   at Microsoft.Extensions.Hosting.HostApplicationBuilder.Build()
   at Microsoft.AspNetCore.Builder.WebApplicationBuilder.Build()
   at CreativeFabricaWeb_BSR80.Program.Main(String[] args) in X:\MyProject\Program.cs:line 22
 ---> (Inner Exception #1) System.InvalidOperationException: Error while validating the service descriptor 'ServiceType: Blazor.JSInterop.Helpers.Services.IWindowHandler Lifetime: Singleton ImplementationType: Blazor.JSInterop.Helpers.Services.WindowHandler': Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'Blazor.JSInterop.Helpers.Services.IWindowHandler'.
 ---> System.InvalidOperationException: Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'Blazor.JSInterop.Helpers.Services.IWindowHandler'.
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.VisitScopeCache(ServiceCallSite scopedCallSite, CallSiteValidatorState state)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.VisitConstructor(ConstructorCallSite constructorCallSite, CallSiteValidatorState state)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor`2.VisitCallSite(ServiceCallSite callSite, TArgument argument)
   at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteValidator.ValidateCallSite(ServiceCallSite callSite)
   at Microsoft.Extensions.DependencyInjection.ServiceProvider.ValidateService(ServiceDescriptor descriptor)
   --- End of inner exception stack trace ---
   at Microsoft.Extensions.DependencyInjection.ServiceProvider.ValidateService(ServiceDescriptor descriptor)
   at Microsoft.Extensions.DependencyInjection.ServiceProvider..ctor(ICollection`1 serviceDescriptors, ServiceProviderOptions options)<---```

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.